From add35e788fd27d05341ca3c463c3dacf2c6c96e1 Mon Sep 17 00:00:00 2001
From: Jason Snelders <jsnelders@gmail.com>
Date: Tue, 12 Nov 2019 19:12:28 +1100
Subject: [PATCH] More WIPs

---
 app/app.js                   | 363 ++++++++++++++++++++++++++---------
 components/section_basics.js |   4 +
 index.html                   |  47 +++--
 3 files changed, 304 insertions(+), 110 deletions(-)

diff --git a/app/app.js b/app/app.js
index 5d68d89..0d9ad7f 100644
--- a/app/app.js
+++ b/app/app.js
@@ -99,7 +99,7 @@ var app = new Vue({
 
     mounted() 
     {
-		this.loadFromStorage();
+		//this.loadFromStorage();
 
 		// Set the "current" main navigation item based on the current route.
 		helpers.selectMenuItemForCurrentUrl();
@@ -141,95 +141,6 @@ var app = new Vue({
 
 
 
-		getDefaultSections: function()
-		{
-			return {
-				basics: {
-					name: "",
-					label: "",
-					picture: "",
-					email: "",
-					phone: "",
-					website: "",
-					summary: "",
-					location: {
-						address: "",
-						postalCode: "",
-						city: "",
-						countryCode: "",
-						region: "",
-					},
-					profiles: [
-						{
-							network: "",
-							username: "",
-							url: "",
-						}
-					]
-				},
-				work: [{
-					company: "",
-					position: "",
-					website: "",
-					startDate: "",
-					endDate: "",
-					summary: "",
-					highlights: [""]
-				}],
-				volunteer: [{
-					organization: "",
-					position: "",
-					website: "",
-					startDate: "",
-					endDate: "",
-					summary: "",
-					highlights: []
-				}],
-				education: [{
-					institution: "",
-					area: "",
-					studyType: "",
-					startDate: "",
-					endDate: "",
-					gpa: "",
-					courses: []
-				}],
-				awards: [{
-					title: "",
-					date: "",
-					awarder: "",
-					summary: ""
-				}],
-				publications: [{
-					name: "",
-					publisher: "",
-					releaseDate: "",
-					website: "",
-					summary: ""
-				}],
-				skills: [{
-					name: "",
-					level: "",
-					keywords: []
-				}],
-				languages: [{
-					language: "",
-					fluency: ""
-				}],
-				interests: [{
-					name: "",
-					keywords: [
-					]
-				}],
-				references: [{
-					name: "",
-					reference: ""
-				}]
-			};
-		},
-
-
-
 		loadFromStorage: function()
 		{
 			var savedData = helpers.getLocalStorage("sections");
@@ -270,7 +181,279 @@ var app = new Vue({
 			}
 
 			return false;
+		},
+
+
+		
+		getDefaultSections: function()
+		{
+			// return {
+			// 	basics: {
+			// 		name: "",
+			// 		label: "",
+			// 		picture: "",
+			// 		email: "",
+			// 		phone: "",
+			// 		website: "",
+			// 		summary: "",
+			// 		location: {
+			// 			address: "",
+			// 			postalCode: "",
+			// 			city: "",
+			// 			countryCode: "",
+			// 			region: "",
+			// 		},
+			// 		profiles: [
+			// 			{
+			// 				network: "",
+			// 				username: "",
+			// 				url: "",
+			// 			}
+			// 		]
+			// 	},
+			// 	work: [{
+			// 		company: "",
+			// 		position: "",
+			// 		website: "",
+			// 		startDate: "",
+			// 		endDate: "",
+			// 		summary: "",
+			// 		highlights: [""]
+			// 	}],
+			// 	volunteer: [{
+			// 		organization: "",
+			// 		position: "",
+			// 		website: "",
+			// 		startDate: "",
+			// 		endDate: "",
+			// 		summary: "",
+			// 		highlights: []
+			// 	}],
+			// 	education: [{
+			// 		institution: "",
+			// 		area: "",
+			// 		studyType: "",
+			// 		startDate: "",
+			// 		endDate: "",
+			// 		gpa: "",
+			// 		courses: []
+			// 	}],
+			// 	awards: [{
+			// 		title: "",
+			// 		date: "",
+			// 		awarder: "",
+			// 		summary: ""
+			// 	}],
+			// 	publications: [{
+			// 		name: "",
+			// 		publisher: "",
+			// 		releaseDate: "",
+			// 		website: "",
+			// 		summary: ""
+			// 	}],
+			// 	skills: [{
+			// 		name: "",
+			// 		level: "",
+			// 		keywords: []
+			// 	}],
+			// 	languages: [{
+			// 		language: "",
+			// 		fluency: ""
+			// 	}],
+			// 	interests: [{
+			// 		name: "",
+			// 		keywords: [
+			// 		]
+			// 	}],
+			// 	references: [{
+			// 		name: "",
+			// 		reference: ""
+			// 	}]
+			// };
+
+			var structure = {
+				basics: {},
+				work: [],
+				volunteer: [],
+				education: [],
+				awards: [],
+				publications: [],
+				skills: [],
+				languages: [],
+				interests: [],
+				references: []
+			};
+
+			structure.basics = this.getDefaultBasic();
+			structure.work.push(this.getDefaultWork());
+			structure.volunteer.push(this.getDefaultVolunteer());
+			structure.education.push(this.getDefaultEducation());
+			structure.awards.push(this.getDefaultAward());
+			structure.publications.push(this.getDefaultPublication());
+			structure.skills.push(this.getDefaultSkill());
+			structure.languages.push(this.getDefaultLanguage());
+			structure.interests.push(this.getDefaultInterest());
+			structure.references.push(this.getDefaultReference());
+
+
+			return structure;
+		},
+
+
+		getDefaultBasic: function()
+		{
+			return {
+				name: "",
+				label: "",
+				picture: "",
+				email: "",
+				phone: "",
+				website: "",
+				summary: "",
+				location: {
+					address: "",
+					postalCode: "",
+					city: "",
+					countryCode: "",
+					region: "",
+				},
+				profiles: [
+					{
+						network: "",
+						username: "",
+						url: "",
+					}
+				]
+			};
+		},
+
+		getDefaultBasicProfile: function()
+		{
+			return {
+				network: "",
+				username: "",
+				url: "",
+			};
+		},
+
+		getDefaultWork: function()
+		{
+			return {
+				company: "",
+				position: "",
+				website: "",
+				startDate: "",
+				endDate: "",
+				summary: "",
+				highlights: []
+			};
+		},
+
+		getDefaultWorkHighlight: function()
+		{
+			return "";
+		},
+		
+		getDefaultVolunteer: function()
+		{
+			return {
+				organization: "",
+				position: "",
+				website: "",
+				startDate: "",
+				endDate: "",
+				summary: "",
+				highlights: []
+			};
+		},
+
+		getDefaulVolunteerHighlight: function()
+		{
+			return "";
+		},
+
+		getDefaultEducation: function()
+		{
+			return {
+				institution: "",
+				area: "",
+				studyType: "",
+				startDate: "",
+				endDate: "",
+				gpa: "",
+				courses: []
+			};
+		},
+				
+		getDefaultEducationCourse: function()
+		{
+			return "";
+		},
+		
+		getDefaultAward: function()
+		{
+			return {
+				title: "",
+				date: "",
+				awarder: "",
+				summary: ""
+			};
+		},
+
+		getDefaultPublication: function()
+		{
+			return {
+				name: "",
+				publisher: "",
+				releaseDate: "",
+				website: "",
+				summary: ""
+			};
+		},
+
+		getDefaultSkill: function()
+		{
+			return {
+				name: "",
+				level: "",
+				keywords: []
+			};
+		},
+				
+		getDefaultSkillKeywoard: function()
+		{
+			return "";
+		},
+
+		getDefaultLanguage: function()
+		{
+			return {
+				language: "",
+				fluency: ""
+			};
+		},
+
+		getDefaultInterest: function()
+		{
+			return {
+				name: "",
+				keywords: []
+			};
+		},
+
+		getDefaultInterestKeywoard: function()
+		{
+			return "";
+		},
+
+		getDefaultReference: function()
+		{
+			return {
+				name: "",
+				reference: ""
+			};
 		}
+
 	},
 
 
diff --git a/components/section_basics.js b/components/section_basics.js
index 7e109a5..94d81d3 100644
--- a/components/section_basics.js
+++ b/components/section_basics.js
@@ -71,5 +71,9 @@ var sectionBasicsComponent = {
 
 
 	methods: {
+		addProfile: function()
+		{
+			
+		}
 	}
 };
\ No newline at end of file
diff --git a/index.html b/index.html
index 2dd0df5..616ea76 100644
--- a/index.html
+++ b/index.html
@@ -207,24 +207,29 @@
                                 <input id="location.region" class="w3-input w3-border" type="text" v-model="$root.sections.basics.location.region">
                                 <small id="regionHelp" class="form-help text-muted">State or region</small>
                             </p>
+                        </form>
 
-
-                            <h5 class="margin-top-32">Social Network Profiles</h5>
-                            <p>      
-                                <label for="profiles[0].network" class="w3-text-blue"><b>Network</b></label>
-                                <input id="profiles[0].network" class="w3-input w3-border" type="text" v-model="$root.sections.basics.profiles[0].network">
-                                <small id="networkHelp" class="form-help text-muted">Name of the network</small>
-                            </p>
-                            <p>      
-                                <label for="profiles[0].username" class="w3-text-blue"><b>Username</b></label>
-                                <input id="profiles[0].username" class="w3-input w3-border" type="text" v-model="$root.sections.basics.profiles[0].username">
-                                <small id="usernameHelp" class="form-help text-muted">Your username in the network</small>
-                            </p>
-                            <p>      
-                                <label for="profiles[0].url" class="w3-text-blue"><b>URL</b></label>
-                                <input id="profiles[0].url" class="w3-input w3-border" type="text" v-model="$root.sections.basics.profiles[0].url">
-                                <small id="urlHelp" class="form-help text-muted">URL to your profile in the network</small>
-                            </p>
+                        <h5 class="margin-top-32">Social Network Profiles</h5>
+                        <button class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addProfile">+ Add Profile</button>
+                        
+                        <form class="w3-container w3-card-4 w3-margin-top">
+                            <div v-for="profile in $root.sections.basics.profiles">
+                                <p>      
+                                    <label for="profiles.network" class="w3-text-blue"><b>Network</b></label>
+                                    <input id="profiles.network" class="w3-input w3-border" type="text" v-model="profile.network">
+                                    <small id="networkHelp" class="form-help text-muted">Name of the network</small>
+                                </p>
+                                <p>      
+                                    <label for="profiles.username" class="w3-text-blue"><b>Username</b></label>
+                                    <input id="profiles.username" class="w3-input w3-border" type="text" v-model="profile.username">
+                                    <small id="usernameHelp" class="form-help text-muted">Your username in the network</small>
+                                </p>
+                                <p>      
+                                    <label for="profiles.url" class="w3-text-blue"><b>URL</b></label>
+                                    <input id="profiles.url" class="w3-input w3-border" type="text" v-model="profile.url">
+                                    <small id="urlHelp" class="form-help text-muted">URL to your profile in the network</small>
+                                </p>
+                            </div>
                         </form>
                     </div>
                     <div class="w3-col m6">
@@ -247,9 +252,11 @@
                             <preview-field label="Region" v-bind:value="$root.sections.basics.location.region"></preview-field>
     
                             <h5 class="margin-top-32">Social Network Profiles</h5>
-                            <preview-field label="Network" v-bind:value="$root.sections.basics.profiles[0].network"></preview-field>
-                            <preview-field label="Username" v-bind:value="$root.sections.basics.profiles[0].username"></preview-field>
-                            <preview-field label="URL" v-bind:value="$root.sections.basics.profiles[0].url"></preview-field>
+                            <div v-for="profile in $root.sections.basics.profiles">
+                                <preview-field label="Network" v-bind:value="profile.network"></preview-field>
+                                <preview-field label="Username" v-bind:value="profile.username"></preview-field>
+                                <preview-field label="URL" v-bind:value="profile.url"></preview-field>
+                            </div>
                         </div>
                     </div>
                 </div>