pict-section-form 1.0.2 → 1.0.3

package/example_applications/postcard_example/Pict-Application-Postcard-Configuration.json

@@ -2,7 +2,7 @@
 	"Name": "A Simple Postcard Application",
 	"Hash": "Postcard",
 
-	"MainViewportViewIdentifier": "Postcard-Navigation",
+	"MainViewportViewIdentifier": "PostcardNavigation",
 
 	"pict_configuration":
 		{

package/example_applications/postcard_example/Pict-Application-Postcard.js

@@ -4,6 +4,8 @@ const libPictSectionForm = require('../../source/Pict-Section-Form.js');
 
 const libProviderDynamicSection = require('./providers/PictProvider-Dynamic-Sections.js');
 
+const libMainApplicationView = require('./views/PictView-Postcard-MainApplication.js')
+
 class PostcardApplication extends libPictApplication
 {
 	constructor(pFable, pOptions, pServiceHash)
@@ -13,13 +15,17 @@ class PostcardApplication extends libPictApplication
 		this.pict.addProvider('Postcard-DynamicSection-Provider', libProviderDynamicSection.default_configuration, libProviderDynamicSection);
 		this.pict.addProvider('Postcard-Default-Theme-Provider', {}, require('./providers/PictProvider-BestPostcardTheme.js'));
 
-		this.pict.addView('Postcard-Navigation', require('./views/PictView-Postcard-Navigation.json'));
+		this.pict.addView('PostcardNavigation', require('./views/PictView-Postcard-Navigation.json'));
+		this.pict.addView('PostcardAbout', require('./views/PictView-Postcard-Content-About.json'));
+		this.pict.addView('PostcardLegal', require('./views/PictView-Postcard-Content-Legal.json'));
 
 		// Add the pict form service
 		this.pict.addServiceType('PictSectionForm', libPictSectionForm);
 
 		// Add the pict form metacontroller service, which provides programmaatic view construction from manifests and render/marshal methods.
 		this.pict.addView('PictFormMetacontroller', {}, libPictSectionForm.PictFormMetacontroller);
+
+		this.pict.addView('PostcardMainApplication', libMainApplicationView.default_configuration, libMainApplicationView);
 	}
 
 	changeToDefaultTheme()
@@ -27,6 +33,7 @@ class PostcardApplication extends libPictApplication
 		this.pict.views.PictFormMetacontroller.formTemplatePrefix = _Pict.providers.PictFormSectionDefaultTemplateProvider.formsTemplateSetPrefix
 		this.pict.views.PictFormMetacontroller.regenerateAllFormSectionTemplates();
 		this.pict.views.PictFormMetacontroller.renderAllFormSections();
+		this.marshalDataFromAppDataToView();
 	}
 
 	changeToPostcardTheme()
@@ -34,6 +41,22 @@ class PostcardApplication extends libPictApplication
 		this.pict.views.PictFormMetacontroller.formTemplatePrefix = _Pict.providers['Postcard-Default-Theme-Provider'].formsTemplateSetPrefix;
 		this.pict.views.PictFormMetacontroller.regenerateAllFormSectionTemplates();
 		this.pict.views.PictFormMetacontroller.renderAllFormSections();
+		this.marshalDataFromAppDataToView();
+	}
+
+	onAfterInitialize()
+	{
+		this.pict.views.PostcardMainApplication.render();
+	}
+
+	marshalDataFromViewToAppData()
+	{
+		this.pict.views.PictFormMetacontroller.marshalFromView();
+	}
+
+	marshalDataFromAppDataToView()
+	{
+		this.pict.views.PictFormMetacontroller.marshalToView();
 	}
 };
 

package/example_applications/postcard_example/index.html

@@ -8,6 +8,7 @@
 
 		<title>Das Postkärd</title>
 
+		<link href="postcard.css" rel="stylesheet">
 		<!-- PICT Dynamic View CSS Container -->
 		<style id="PICT-CSS"></style>
 
@@ -28,8 +29,7 @@
 		<!-- where the Navigation view puts its content -->
 		<div id="Postcard-Navigation-Container"></div>
 
-		<!-- where the Form Metacontroller view puts its content -->
-		<div id="Pict-Form-Container"></div>
+		<div id="Postcard-Content-Container"></div>
 
 		<!-- Load the Postcard PICT Application -->
 		<script src="dist/postcard_application.min.js" type="text/javascript"></script>

package/example_applications/postcard_example/postcard.css

@@ -0,0 +1,14 @@
+body {
+font-size: 16px;
+padding: 2em;
+}
+
+select,
+input,
+button,
+a {
+padding: 0.5rem;
+margin: 0.25rem;
+border: 1px solid red;
+font: 1rem "Helvetica", sans-serif;
+}

package/example_applications/postcard_example/providers/PictProvider-BestPostcardTheme.js

@@ -10,7 +10,8 @@ const _Theme = (
 				"HashPostfix": "-Template-Input-DataType-String",
 				"Template": /*HTML*/`
 						<!-- DataType Number {~D:Record.Hash~} {~D:Record.DataType~} -->
-						<span>{~D:Record.Name~}: AND COLOR ME DIFFERENT </span> <input type="text" id="{~D:Context[0].UUID~}-FormInput-{~D:Record.Hash~}" name="{~D:Record.Name~}" value="">
+						<span style="font-weight: bold; background-color: #efffef;">{~D:Record.Name~}:</span> <input type="text" id="{~D:Context[0].UUID~}-FormInput-{~D:Record.Hash~}" name="{~D:Record.Name~}" data-i-form="{~D:Context[0].formID~}" data-i-datum="{~D:Record.PictForm.InformaryDataAddress~}" value="">
+						<!-- <p>{~D:Record.Description~}</p> -->
 	`
 			},
 			// -Form-Template-Input-DataType-Number
@@ -18,7 +19,8 @@ const _Theme = (
 				"HashPostfix": "-Template-Input-DataType-Number",
 				"Template": /*HTML*/`
 						<!-- DataType Number {~D:Record.Hash~} {~D:Record.DataType~} -->
-						<span>{~D:Record.Name~} COLOR ME DIFFERENT:</span> <input type="Number" id="{~D:Context[0].UUID~}-FormInput-{~D:Record.Hash~}" name="{~D:Record.Name~}" value="">
+						<span style="background-color: #efefef;">{~D:Record.Name~}:</span> <input type="Number" id="{~D:Context[0].UUID~}-FormInput-{~D:Record.Hash~}" name="{~D:Record.Name~}" data-i-form="{~D:Context[0].formID~}" data-i-datum="{~D:Record.PictForm.InformaryDataAddress~}" value="">
+						<!-- <p>{~D:Record.Description~}</p> -->
 	`
 			}
 		]}); // End of _Theme

package/example_applications/postcard_example/providers/PictProvider-Dynamic-Sections-MockServerResponse.json

@@ -17,7 +17,7 @@
 					[
 						{
 							"HashPostfix": "-Template-Input-InputType-ParaGraphaString",
-							"Template": "<p><span class=\"VeryImportantData\">{~D:Record.Name~}:</span>{~D:Record.Description~}<input type=\"text\" name=\"{~D:Record.Hash~}\" />\n"
+							"Template": "<p><span class=\"VeryImportantData\">{~D:Record.Name~}:</span>{~D:Record.Description~}<input type=\"text\" name=\"{~D:Record.Hash~}\" data-i-form=\"{~D:Context[0].formID~}\" data-i-datum=\"{~D:Record.PictForm.InformaryDataAddress~}\" />\n"
 						}
 					],
 

package/example_applications/postcard_example/views/PictView-Postcard-Content-About.json

@@ -0,0 +1,21 @@
+{
+    "ViewIdentifier": "Postcard-About-View",
+
+    "DefaultRenderable": "Postcard-About",
+    "DefaultDestinationAddress": "#Postcard-Content-Container",
+
+    "RenderOnLoad": false,
+
+    "Templates": [
+        {
+            "Hash": "Postcard-About-Content",
+            "Template": "<h1>Welcome to PostKard, where every moment becomes a cherished memory to share.</h1> <p>In a world filled with digital communication, we believe in the enduring power of a tangible connection. PostKard is not just an app; it's a portal to capture the essence of life's most beautiful moments and send them off into the world with a personal touch.</p> <p>Our journey began with a simple idea: to bridge the gap between the digital and physical worlds, allowing people to share their experiences in a way that transcends screens and keyboards. With PostKard, you can turn your photos into stunning postcards, complete with personalized messages, and send them to your loved ones near and far.</p> <p>What sets us apart is our commitment to quality and convenience. Our intuitive app makes it easy to create custom postcards in minutes, whether you're commemorating a special occasion or simply sharing a slice of your everyday life. From birthdays to holidays, travels to everyday moments, PostKard helps you celebrate life's moments, big and small.</p> <p>But PostKard is more than just a platform; it's a community of storytellers, adventurers, and dreamers. We believe in the power of connection, and we're proud to facilitate meaningful interactions that transcend borders and bring people closer together.</p> <p>Join us on our mission to spread joy, one postcard at a time. Whether you're sending a smile across the miles or sharing a piece of your world with someone special, PostKard is here to help you make every moment count.</p>"
+        }
+    ],
+    "Renderables": [
+        {
+            "RenderableHash": "Postcard-About",
+            "TemplateHash": "Postcard-About-Content"
+        }
+    ]
+}

package/example_applications/postcard_example/views/PictView-Postcard-Content-Legal.json

@@ -0,0 +1,21 @@
+{
+    "ViewIdentifier": "Postcard-Legal-View",
+
+    "DefaultRenderable": "Postcard-Legal",
+    "DefaultDestinationAddress": "#Postcard-Content-Container",
+
+    "RenderOnLoad": false,
+
+    "Templates": [
+        {
+            "Hash": "Postcard-Legal-Content",
+            "Template": "<h1>Legal Disclaimer:</h1> <p>By using our postcard sending site, you agree to abide by the following terms and conditions:</p> <p><b>Intellectual Property Rights</b>: All content, including but not limited to text, images, graphics, logos, and software, provided on our site is the property of our company or its licensors and is protected by copyright, trademark, and other intellectual property laws. You may not reproduce, distribute, modify, or otherwise use any content without the prior written consent of the respective owners.</p> <p><b>User Content</b>: By uploading or submitting any content (such as text, images, or personal information) to our site, you grant us a worldwide, royalty-free, non-exclusive license to use, reproduce, modify, adapt, publish, translate, and distribute such content for the purpose of providing our services. You represent and warrant that you have the necessary rights to grant us this license.</p> <p><b>Privacy Policy</b>: We are committed to protecting your privacy. Our Privacy Policy outlines how we collect, use, and disclose your personal information. By using our site, you consent to the collection, use, and disclosure of your information as described in our Privacy Policy.</p> <p><b>Limitation of Liability</b>: We make every effort to ensure the accuracy and reliability of the information provided on our site. However, we cannot guarantee that our site will be error-free, uninterrupted, or free of viruses or other harmful components. In no event shall we be liable for any direct, indirect, incidental, special, or consequential damages arising out of or in any way connected with your use of our site.</p> <p><b>Governing Law</b>: These terms and conditions shall be governed by and construed in accordance with the laws of the world, without regard to its conflict of law provisions. Any disputes arising out of or relating to these terms and conditions shall be subject to the exclusive jurisdiction of the courts of the world.</p> <p>By using our postcard sending site, you acknowledge that you have read, understood, and agree to be bound by these terms and conditions. If you do not agree to these terms and conditions, please refrain from using our site.</p>"
+        }
+    ],
+    "Renderables": [
+        {
+            "RenderableHash": "Postcard-Legal",
+            "TemplateHash": "Postcard-Legal-Content"
+        }
+    ]
+}

package/example_applications/postcard_example/views/PictView-Postcard-MainApplication.js

@@ -0,0 +1,55 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration = (
+{
+	ViewIdentifier: "Postcard-MainApplication",
+
+	DefaultRenderable: "Postcard-Main-Application",
+    DefaultDestinationAddress: "#Postcard-Content-Container",
+
+	RenderOnLoad: true,
+
+	CSS: ".PostcardControls { margin-top: 2em; background-color: #fff5f5; }",
+
+	Templates: [
+		{
+			Hash: "Postcard-Main-Application-Template",
+			Template: /*html*/`
+<h1>Send a Fabulous Postkard!</h1>
+
+<!-- where the Form Metacontroller view puts its content -->
+<div id="Pict-Form-Container"></div>
+
+<div class="PostcardControls"> 
+	<a href="#" onclick="_Pict.PictApplication.marshalDataFromViewToAppData()">[ Store Data ]</a> | <a href="#" onclick="_Pict.PictApplication.marshalDataFromAppDataToView()">[ Read Data ]</a>
+	||
+	<a href="#" onclick="_Pict.PictApplication.changeToPostcardTheme()">[ Postkard Theme ]</a> | <a href="#" onclick="_Pict.PictApplication.changeToDefaultTheme()">[ Default Theme ]</a>
+</div>
+`
+		}
+	],
+	Renderables: [
+		{
+			RenderableHash: "Postcard-Main-Application",
+			TemplateHash: "Postcard-Main-Application-Template"
+		}]
+});
+
+class PostcardMainApplicationView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender()
+	{
+		this.pict.views.PictFormMetacontroller.render();
+		this.pict.views.PictFormMetacontroller.renderAllFormSections();
+		this.pict.PictApplication.marshalDataFromAppDataToView();
+	}
+}
+
+module.exports = PostcardMainApplicationView;
+
+module.exports.default_configuration = _ViewConfiguration;

package/example_applications/postcard_example/views/PictView-Postcard-Navigation.json

@@ -6,10 +6,12 @@
 
     "RenderOnLoad": true,
 
+    "CSS": ".PostcardNavigation { background-color: #fff5f5; }",
+
     "Templates": [
         {
             "Hash": "Postcard-Top-Navigation",
-            "Template": "<div id=\"Navigation\"><a href=\"#\">Postcard</a> | <a href=\"#About\">About</a> | <a href=\"#Legal\">Legal </a> || <a href=\"#\" onclick=\"_Pict.PictApplication.changeToPostcardTheme()\">[ Postkard Theme ]</a> | <a href=\"#\" onclick=\"_Pict.PictApplication.changeToDefaultTheme()\">[ Default Theme ]</a></div>"
+            "Template": "<div class=\"PostcardNavigation\"><a href=\"#\" onclick=\"_Pict.views.PostcardMainApplication.render()\">Postcard</a> | <a href=\"#About\" onclick=\"_Pict.views.PostcardAbout.render()\">About</a> | <a href=\"#Legal\" onclick=\"_Pict.views.PostcardLegal.render()\">Legal </a></div>"
         }
     ],
     "Renderables": [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-form",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "description": "Pict dynamic form sections",
     "main": "source/Pict-Section-Form.js",
     "directories": {
@@ -30,6 +30,7 @@
         "quackage": "^1.0.29"
     },
     "dependencies": {
+        "informary": "^2.0.21",
         "pict-provider": "^1.0.2",
         "pict-view": "^1.0.43"
     },

package/source/Pict-Form-Metacontroller.js

@@ -22,6 +22,32 @@ class PictFormMetacontroller extends libPictViewClass
 		this.formTemplatePrefix = 'Pict-Forms-Basic';
 	}
 
+	onMarshalFromView()
+	{
+		let tmpViewList = Object.keys(this.fable.views);
+
+		for (let i = 0; i < tmpViewList.length; i++)
+		{
+			if (this.fable.views[tmpViewList[i]].isPictSectionForm)
+			{
+				this.fable.views[tmpViewList[i]].marshalFromView();
+			}
+		}
+	}
+
+	onMarshalToView()
+	{
+		let tmpViewList = Object.keys(this.fable.views);
+
+		for (let i = 0; i < tmpViewList.length; i++)
+		{
+			if (this.fable.views[tmpViewList[i]].isPictSectionForm)
+			{
+				this.fable.views[tmpViewList[i]].marshalToView();
+			}
+		}
+	}
+
 	onAfterInitializeAsync(fCallback)
 	{
 		// This is safe -- if there is no settings.DefaultFormManifest configuration, it just doesn't do anything

package/source/Pict-Section-Form-Provider-Templates-DefaultFormTemplates.js

@@ -119,8 +119,8 @@ Glug glug glug
 		{
 			"HashPostfix": "-Template-Input",
 			"Template": /*HTML*/`
-					<!-- Input {~D:Record.Hash~} {~D:Record.DataType~} -->
-					<span>{~D:Record.Name~}:</span> <input type="hidden" id="{~D:Context[0].UUID~}-FormInput-{~D:Record.Hash~}" name="{~D:Record.Name~}" value="">
+					<!-- Input {~"D:Record.Hash~} {~D:Record.DataType~} -->
+					<span style="background-color:#fffdfd;">{~D:Record.Name~}:</span> <input type="text" id="{~D:Context[0].UUID~}-FormInput-{~D:Record.Hash~}" name="{~D:Record.Name~}" data-i-form="{~D:Context[0].formID~}" data-i-datum="{~D:Record.PictForm.InformaryDataAddress~}" value="">
 `
 		},
 		// -Form-Template-Input-DataType-String
@@ -128,7 +128,7 @@ Glug glug glug
 			"HashPostfix": "-Template-Input-DataType-String",
 			"Template": /*HTML*/`
 					<!-- DataType Number {~D:Record.Hash~} {~D:Record.DataType~} -->
-					<span>{~D:Record.Name~}:</span> <input type="text" id="{~D:Context[0].UUID~}-FormInput-{~D:Record.Hash~}" name="{~D:Record.Name~}" value="">
+					<span>{~D:Record.Name~}:</span> <input type="text" id="{~D:Context[0].UUID~}-FormInput-{~D:Record.Hash~}" name="{~D:Record.Name~}" data-i-form="{~D:Context[0].formID~}" data-i-datum="{~D:Record.PictForm.InformaryDataAddress~}" value="">
 `
 		},
 		// -Form-Template-Input-DataType-Number
@@ -136,7 +136,7 @@ Glug glug glug
 			"HashPostfix": "-Template-Input-DataType-Number",
 			"Template": /*HTML*/`
 					<!-- DataType Number {~D:Record.Hash~} {~D:Record.DataType~} -->
-					<span>{~D:Record.Name~}:</span> <input type="Number" id="{~D:Context[0].UUID~}-FormInput-{~D:Record.Hash~}" name="{~D:Record.Name~}" value="">
+					<span>{~D:Record.Name~}:</span> <input type="Number" id="{~D:Context[0].UUID~}-FormInput-{~D:Record.Hash~}" name="{~D:Record.Name~}" data-i-form="{~D:Context[0].formID~}" data-i-datum="{~D:Record.PictForm.InformaryDataAddress~}" value="">
 `
 		},
 		// -Form-Template-Input-InputType-TextArea
@@ -144,7 +144,7 @@ Glug glug glug
 			"HashPostfix": "-Template-Input-InputType-TextArea",
 			"Template": /*HTML*/`
 					<!-- InputType TextArea {~D:Record.Hash~} {~D:Record.DataType~} -->
-					<span>{~D:Record.Name~}:</span> <textarea id="{~D:Context[0].UUID~}-FormInput-{~D:Record.Hash~}" name="{~D:Record.Name~}"></textarea>
+					<span>{~D:Record.Name~}:</span> <textarea id="{~D:Context[0].UUID~}-FormInput-{~D:Record.Hash~}" name="{~D:Record.Name~}" data-i-form="{~D:Context[0].formID~}" data-i-datum="{~D:Record.PictForm.InformaryDataAddress~}"></textarea>
 `
 		}
 	]

package/source/Pict-Section-Form-View.js

@@ -1,5 +1,7 @@
 const libPictViewClass = require('pict-view');
 
+const libInformary = require('informary');
+
 const libFormsTemplateProvider = require('./Pict-Section-Form-Provider-Templates.js');
 
 class PictSectionForm extends libPictViewClass
@@ -79,9 +81,52 @@ class PictSectionForm extends libPictViewClass
 				}
 			}
 		}
+
+		this.formID = `Pict-Form-${this.Hash}-${this.UUID}`;
+
+		this.informary = new libInformary({ Form:this.formID })
+
 		this.initializeFormGroups();
 	}
 
+	onMarshalToView()
+	{
+		try
+		{
+			this.informary.marshalDataToForm(this.AppData,
+				function(pError)
+				{
+					if (pError)
+					{
+						this.log.error(`Error marshaling data from view: ${pError}`);
+					}
+				});
+		}
+		catch (pError)
+		{
+			this.log.error(`Gross error marshaling data from view: ${pError}`);
+		}
+	}
+
+	onMarshalFromView()
+	{
+		try
+		{
+			this.informary.marshalFormToData(this.AppData,
+				function(pError)
+				{
+					if (pError)
+					{
+						this.log.error(`Error marshaling data to view: ${pError}`);
+					}
+				});
+		}
+		catch (pError)
+		{
+			this.log.error(`Gross error marshaling data to view: ${pError}`);
+		}
+	}
+
 	initializeFormGroups()
 	{
 		// Enumerate the manifest and make sure a group exists for each group in the section definition
@@ -103,6 +148,8 @@ class PictSectionForm extends libPictViewClass
 					tmpDescriptor.PictForm.Section == this.sectionDefinition.Hash
 				)
 			{
+				tmpDescriptor.PictForm.InformaryDataAddress = tmpDescriptorKeys[i];
+
 				let tmpGroupHash = (typeof(tmpDescriptor.PictForm.Group) == 'string') ? tmpDescriptor.PictForm.Group : 'Default';
 				
 				let tmpGroup = this.sectionDefinition.Groups.find((pGroup) => { return pGroup.Hash == tmpGroupHash; });