Refactoring and adding Projects section

app/app.js

@@ -21,6 +21,7 @@ var router = new VueRouter({
 		{ path: '/section/languages', component: sectionLanguagesComponent },
 		{ path: '/section/interests', component: sectionInterestsComponent },
 		{ path: '/section/references', component: sectionReferencesComponent },
+		{ path: '/section/projects', component: sectionProjectsComponent },
 
 		{ path: '/preview', component: previewResumeComponent },
 		{ path: '/import', component: importComponent },
@@ -74,7 +75,9 @@ var app = new Vue({
 
     created()
     {
-		this.sections = sections.getDefaultSections();
+		this.sections = models.newDefaultSections();
+
+		console.log("this.sections=", this.sections);
 
         //-- Register all components
         pageComponents.registerComponents();
@@ -147,7 +150,7 @@ var app = new Vue({
 
 		loadFromStorage: function()
 		{
-			var savedData = helpers.getLocalStorage("sections");
+			var savedData = storage.getLocalStorage("sections");
 
 			this.populateSections(savedData);
 		},
@@ -239,6 +242,16 @@ var app = new Vue({
 		},
 
 
+		projectEndDate: function(index)
+		{
+			var endDate = this.$root.sections.projects[index].endDate;
+
+			if (endDate == "") return "Current";
+
+			return endDate;
+		},
+
+
 		dateMonthYear: function(dateString)
 		{
 			var dt = new Date(dateString);
@@ -275,7 +288,7 @@ var app = new Vue({
 
 			if (response == true)
 			{
-				this.sections = sections.getDefaultSections();
+				this.sections = models.newDefaultSections();
 				alert("Your resume has been cleared.");
 			}
 
@@ -287,7 +300,7 @@ var app = new Vue({
 		{
 			var response = confirm("Resume saved");
 
-			helpers.setLocalStorage("sections", this.$root.sections);
+			storage.setLocalStorage("sections", this.$root.sections);
 
 			alert("Resume saved");
 			return false;
@@ -500,7 +513,7 @@ var app = new Vue({
 		// 		//NOTE: I'm initially not concerned about performance here.
 		// 		if (val.status == "loaded")
 		// 		{
-		// 			helpers.setLocalStorage("sections", val.sections);
+		// 			storage.setLocalStorage("sections", val.sections);
 		// 		}
 		// 	},
 		// 	deep: true

app/page_registration.js

@@ -171,6 +171,15 @@ var pageComponents = {
             fontAwesomeIcon: "fas fa-list"  
         });
         
+        this.registerComponent({
+            id: "projects",
+            path: "#/section/projects",
+            type: "page",
+            title: "Projects",
+            description: "",
+            fontAwesomeIcon: "fas fa-project-diagram"  
+        });
+        
         this.registerComponent({
             id: "previewResume",
             path: "#/preview",
@@ -208,5 +217,6 @@ var pageComponents = {
         });
         
         
+
     }
 };

components/import.js

@@ -33,9 +33,14 @@ var importComponent = {
 
 			var data = JSON.parse(this.json);
 
+			// Reset first
+			this.$root.sections = models.newDefaultSections();
+
 			this.$root.populateSections(data);
 
-			helpers.setLocalStorage("sections", this.$root.sections);
+			storage.setLocalStorage("sections", this.$root.sections);
+
+			router.push("section/basics");
 		},
 
 

components/section_awards.js

@@ -29,7 +29,7 @@ var sectionAwardsComponent = {
 	methods: {
 		addAward: function()
 		{
-			var item = this.$root.getDefaultAward();
+			var item = models.newDefaultAward();
 			this.$root.sections.awards.push(item);
 		},
 

components/section_basics.js

@@ -7,7 +7,7 @@ var sectionBasicsComponent = {
 
 	mounted: function()
 	{
-		var savedData = helpers.getLocalStorage("section.basics");
+		var savedData = storage.getLocalStorage("section.basics");
 
 		if (savedData)
 		{
@@ -58,7 +58,7 @@ var sectionBasicsComponent = {
 			{
 				// Save the data to localStorage
 				//NOTE: I'm initially not concerned about performance here/
-				//helpers.setLocalStorage("section.basics", val);
+				//storage.setLocalStorage("section.basics", val);
 
 				//this.$root.sections.basics = val;
 			},
@@ -73,7 +73,7 @@ var sectionBasicsComponent = {
 	methods: {
 		addProfile: function()
 		{
-			var item = sections.getDefaultBasicProfile();
+			var item = models.newDefaultBasic();
 			this.$root.sections.basics.profiles.push(item);
 		}
 	}

components/section_education.js

@@ -29,13 +29,13 @@ var sectionEducationComponent = {
 	methods: {
 		addEducation: function()
 		{
-			var item = sections.getDefaultEducation();
+			var item = models.getDefaultEducation();
 			this.$root.sections.education.push(item);
 		},
 
 		addCourse: function(index)
 		{
-			var item = sections.getDefaultEducationCourse();
+			var item = models.newDefaultEducationCourse();
 			this.$root.sections.education[index].courses.push(item);
 		},
 

components/section_interests.js

@@ -29,13 +29,13 @@ var sectionInterestsComponent = {
 	methods: {
 		addInterest: function()
 		{
-			var item = sections.getDefaultInterest();
+			var item = models.wDefaultInterest();
 			this.$root.sections.interests.push(item);
 		},
 
 		addKeyword: function(index)
 		{
-			var item = sections.getDefaultInterestKeywoard();
+			var item = models.newDefaultInterestKeyword();
 			//console.log("addHighlight(" + index + ")", this.$root.sections.interests[index]);
 			this.$root.sections.interests[index].keywords.push(item);
 		},

components/section_languages.js

@@ -29,7 +29,7 @@ var sectionLanguagesComponent = {
 	methods: {
 		addLanguage: function()
 		{
-			var item = sections.getDefaultInterest();
+			var item = models.wDefaultInterest();
 			this.$root.sections.languages.push(item);
 		},
 		

components/section_projects.js

@@ -0,0 +1,97 @@
+var sectionProjectsComponent = {
+	template: '#section-projects-template',
+
+	
+
+	mounted: function()
+	{
+		
+	},
+
+
+
+	destroyed: function()
+	{
+		
+	},
+
+
+	
+	data: function()
+	{
+		return {
+			item: {}
+		};
+	},
+
+	
+
+	methods: {
+		addProject: function()
+		{
+			var item = models.newDefaultProject();
+			this.$root.sections.projects.push(item);
+		},
+
+		addHighlight: function(index)
+		{
+			if (!this.$root.sections.projects[index].highlights)
+			{
+				// May not exist from an import, so add the property.
+				this.$set(this.$root.sections.projects[index], "highlights", []);
+			}
+
+			var item = models.newDefaultProjectHighlight();
+			this.$root.sections.projects[index].highlights.push(item);
+
+			console.log("this.$root.sections.projects[" + index + "]=", this.$root.sections.projects[index]);
+		},
+
+		addKeyword: function(index)
+		{
+			if (!this.$root.sections.projects[index].keywords)
+			{
+				// May not exist from an import, so add the property.
+				this.$set(this.$root.sections.projects[index], "keywords", []);
+			}
+
+			var item = models.newDefaultProjectKeyword();
+			this.$root.sections.projects[index].keywords.push(item);
+		},
+
+		addRole: function(index)
+		{
+			if (!this.$root.sections.projects[index].roles)
+			{
+				// May not exist from an import, so add the property.
+				this.$set(this.$root.sections.projects[index], "roles", []);
+			}
+
+			var item = models.newDefaultProjectRole();
+			this.$root.sections.projects[index].roles.push(item);
+		},
+
+
+		deleteClicked: function(index)
+		{
+			var response = confirm("Are you sure you want to delete this project?");
+
+			if (response == true)
+			{
+				this.$root.sections.projects.splice(index, 1);
+			}
+		},
+
+
+		moveUpClicked: function(index)
+		{
+			this.$root.moveArrayPosition(this.$root.sections.work, index, index - 1);
+		},
+
+
+		moveDownClicked: function(index)
+		{
+			this.$root.moveArrayPosition(this.$root.sections.work, index, index + 1);
+		}
+	}
+};

components/section_publications.js

@@ -29,7 +29,7 @@ var sectionPublicationsComponent = {
 	methods: {
 		addPublication: function()
 		{
-			var item = sections.getDefaultWork();
+			var item = models.newDefaultWork();
 			this.$root.sections.publications.push(item);
 		},
 

components/section_references.js

@@ -29,7 +29,7 @@ var sectionReferencesComponent = {
 	methods: {
 		addReference: function()
 		{
-			var item = sections.getDefaultReference();
+			var item = models.newDefaultReference();
 			this.$root.sections.references.push(item);
 		},
 

components/section_skills.js

@@ -29,13 +29,13 @@ var sectionSkillsComponent = {
 	methods: {
 		addSkill: function()
 		{
-			var item = this.$root.getDefaultSkill();
+			var item = models.newDefaultSkill();
 			this.$root.sections.skills.push(item);
 		},
 
 		addKeyword: function(index)
 		{
-			var item = sections.getDefaultSkillKeywoard();
+			var item = models.newDefaultSkillKeyword();
 			//console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
 			this.$root.sections.skills[index].keywords.push(item);
 		},

components/section_volunteer.js

@@ -29,13 +29,13 @@ var sectionVolunteerComponent = {
 	methods: {
 		addPosition: function()
 		{
-			var item = sections.getDefaultVolunteer();
+			var item = models.newDefaultVolunteer();
 			this.$root.sections.volunteer.push(item);
 		},
 
 		addHighlight: function(index)
 		{
-			var item = sections.getDefaulVolunteerHighlight();
+			var item = models.newDefaultVolunteerHighlight();
 			//console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
 			this.$root.sections.volunteer[index].highlights.push(item);
 		},

components/section_work.js

@@ -29,13 +29,13 @@ var sectionWorkComponent = {
 	methods: {
 		addPosition: function()
 		{
-			var item = sections.getDefaultWork();
+			var item = models.newDefaultWork();
 			this.$root.sections.work.push(item);
 		},
 
 		addHighlight: function(index)
 		{
-			var item = sections.getDefaultWorkHighlight();
+			var item = models.newDefaultWorkHighlight();
 			this.$root.sections.work[index].highlights.push(item);
 		},
 

index.html

@@ -64,6 +64,7 @@
                     <a href="#/section/languages" class="w3-bar-item w3-button w3-padding"><i class="fas fa-heart"></i>&nbsp; Languages</a>
                     <a href="#/section/interests" class="w3-bar-item w3-button w3-padding"><i class="fas fa-map"></i>&nbsp; Interests</a>
                     <a href="#/section/references" class="w3-bar-item w3-button w3-padding"><i class="fas fa-list"></i>&nbsp; References</a>
+                    <a href="#/section/projects" class="w3-bar-item w3-button w3-padding"><i class="fas fa-project-diagram"></i>&nbsp; Projects</a>
                 </div>
                 <hr>
                 <div class="w3-bar-block">
@@ -111,7 +112,7 @@
         <template type="text/x-template" id="home-template" lang="html">
             <div id="home-root">
                 <p class="margin-bottom-64">
-                    <b style="color: maroon">Status: Working & Under Development (16 Nov 2019)</b>
+                    <b style="color: maroon">Status: Working & Under Development (26 Nov 2019)</b>
                 </p>
                 <p>
                     Welcome to Profile Studio - a generator and editor for <a href="https://jsonresume.org/">JSON Resume</a> files.
@@ -141,6 +142,11 @@
                 <p>
                     See it in action now. Copy a resume from <a href="https://gist.github.com/jsnelders/cab89beb9bc0e677ef3f5ec30ef4260b">https://gist.github.com/jsnelders/cab89beb9bc0e677ef3f5ec30ef4260b</a>.
                 </p>
+                <p>
+                    Currently developed to use the schema defined at <a href="https://jsonresume.org/schema/">https://jsonresume.org/schema/</a>, 
+                    with additional attributes found at <a href="https://github.com/jsonresume/resume-schema/blob/v1.0.0/schema.json">https://github.com/jsonresume/resume-schema/blob/v1.0.0/schema.json</a>.<br>
+                    "url" attributes are current identified as "website" per the published shema at jsonresume.org.
+                </p>
                 <p>Enjoy!</p>
                 <p><a href="https://jsnelders.com">Jason Snelders</a></p>
             </div>
@@ -791,6 +797,114 @@
 
 
 
+        <template type="text/x-template" id="section-projects-template" lang="html">
+            <div id="section-projects-root">
+                <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addProject">+ Add Project</button>
+
+                <div class="w3-row margin-top-32">
+                    <div class="w3-col m6">
+                        <form class="w3-card-4" v-for="(project, p_index) in $root.sections.projects">
+                            <card-header v-bind:label="project.name + ' (' + $root.dateMonthYear(project.startDate) + ')'" v-bind:id="p_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
+
+                            <div class="w3-container w3-hide" v-bind:id="'content' + p_index">
+                                <p>
+                                    <label for="company" class="w3-text-blue required-field"><b>Name</b></label>
+                                    <input id="company" class="w3-input w3-border" type="text" v-model="project.name" required>
+                                    <small id="companyHelp" class="form-help text-muted">Name of the company or organisation where you worked.</small>
+                                </p>
+                                <p>
+                                    <label for="position" class="w3-text-blue required-field"><b>Description</b></label>
+                                    <input id="position" class="w3-input w3-border" type="text" v-model="project.description" required>
+                                    <small id="positionHelp" class="form-help text-muted">Your role or position title.</small>
+                                </p>
+                                <p>
+                                    <label for="website" class="w3-text-blue"><b>Website</b></label>
+                                    <input id="website" class="w3-input w3-border" type="url" v-model="project.website">
+                                    <small id="websiteHelp" class="form-help text-muted">Company website.</small>
+                                </p>
+                                <p>
+                                    <label for="startDate" class="w3-text-blue"><b>Start Date</b></label>
+                                    <input id="startDate" class="w3-input w3-border" type="month" v-model="project.startDate" required>
+                                    <small id="startDateHelp" class="form-help text-muted">Date you started in the position.</small>
+                                </p>
+                                <p>
+                                    <label for="endDate" class="w3-text-blue"><b>End Date</b></label>
+                                    <input id="endDate" class="w3-input w3-border" type="month" v-model="project.endDate">
+                                    <small id="endDateHelp" class="form-help text-muted">Date you finished in the position (leave blank if you are still currently in it).</small>
+                                </p>
+    
+    
+                                <h5 class="margin-top-32">Highlights</h5>
+                                <small id="highlightsHelp" class="form-help text-muted">Briefly describe successes and outcomes (e.g. Increased profits by 20% from 2011-2012 through viral advertising).</small>
+    
+                                <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addHighlight(p_index)">+ Add Highlight</button>
+                                <span v-if="project.highlights">X: {{project.highlights.length}}</span>
+                                <ol>
+                                    <li v-for="(highlight, h_index) in project.highlights">
+                                        <input class="w3-input w3-border" type="text" v-model="$root.sections.projects[p_index].highlights[h_index]">
+                                    </li>
+                                </ol>
+
+
+                                <h5 class="margin-top-32">Keywords</h5>
+                                <small id="highlightsHelp" class="form-help text-muted">Briefly describe successes and outcomes (e.g. Increased profits by 20% from 2011-2012 through viral advertising).</small>
+    
+                                <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addKeyword(p_index)">+ Add Keyword</button>
+                                <ol>
+                                    <li v-for="(keyword, k_index) in project.keywords">
+                                        <input class="w3-input w3-border" type="text" v-model="$root.sections.projects[p_index].keywords[k_index]">
+                                    </li>
+                                </ol>
+
+
+                                <h5 class="margin-top-32">Roles</h5>
+                                <small id="highlightsHelp" class="form-help text-muted">Briefly describe successes and outcomes (e.g. Increased profits by 20% from 2011-2012 through viral advertising).</small>
+    
+                                <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addRole(p_index)">+ Add Role</button>
+                                <ol>
+                                    <li v-for="(role, r_index) in project.roles">
+                                        <input class="w3-input w3-border" type="text" v-model="$root.sections.projects[p_index].roles[r_index]">
+                                    </li>
+                                </ol>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="w3-col m6">
+                        <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(project, p_index) in $root.sections.projects">
+                            <preview-field label="Name" v-bind:value="project.name"></preview-field>
+                            <preview-field label="Description" v-bind:value="project.description"></preview-field>
+                            <preview-field label="Website" v-bind:value="project.website" format="url"></preview-field>
+                            <preview-field label="Start Date" v-bind:value="project.startDate" format="date"></preview-field>
+                            <preview-field label="End Date" v-bind:value="project.endDate" format="date"></preview-field>
+
+                            <h5 class="margin-top-32">Highlights</h5>
+                            <ol>
+                                <li v-for="(highlight, h_index) in project.highlights">
+                                    <preview-field label="" v-bind:value="$root.sections.projects[p_index].highlights[h_index]" format="list-item"></preview-field>
+                                </li>
+                            </ol>
+
+                            <h5 class="margin-top-32">Keywords</h5>
+                            <ol>
+                                <li v-for="(keyword, k_index) in project.keywords">
+                                    <preview-field label="" v-bind:value="$root.sections.projects[p_index].keywords[k_index]" format="list-item"></preview-field>
+                                </li>
+                            </ol>
+
+                            <h5 class="margin-top-32">Roles</h5>
+                            <ol>
+                                <li v-for="(role, r_index) in project.roles">
+                                    <preview-field label="" v-bind:value="$root.sections.projects[p_index].roles[r_index]" format="list-item"></preview-field>
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        
+
         <template type="text/x-template" id="preview-resume-template" lang="html">
             <div id="preview-resume-root">
                 <!-- Page Container -->
@@ -1006,6 +1120,56 @@
                             </div>
                             <!-- /References -->
 
+                            <!-- Projects -->
+                            <div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.projects.length > 0">
+                                <h2 class="w3-text-grey w3-padding-16"><i class="fas fa-project-diagram fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Projects</h2>
+
+                                <div class="w3-container" v-for="(project, p_index) in $root.sections.projects">
+                                    <h5 class="w3-opacity"><b>{{project.name}}</b></h5>
+                                    <p>{{project.description}}</p>
+                                    <a v-if="project.website" v-bind:href="project.website" target="_blank" class="w3-margin-left"><i class="fas fa-globe"></i></a>
+                                    <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>
+                                        {{project.startDate}} - 
+                                        <span class="w3-tag w3-teal w3-round" v-if="$root.projectEndDate(p_index) == 'Current'">{{$root.projectEndDate(p_index)}}</span>
+                                        <span v-if="$root.projectEndDate(p_index) != 'Current'">{{$root.projectEndDate(p_index)}}</span>
+                                    </h6>
+                                    
+
+                                    <div v-if="project.highlights && project.highlights.length > 0">
+                                        <h5 class="margin-top-32">Highlights</h5>
+                                        <ol>
+                                            <li v-for="(highlight, h_index) in project.highlights">
+                                                {{highlight}}
+                                            </li>
+                                        </ol>
+                                    </div>
+                                   
+
+                                    <div v-if="project.keywords && project.keywords.length > 0">
+                                        <h5 class="margin-top-32">Keywords</h5>
+                                        <ol>
+                                            <li v-for="(keyword, k_index) in project.keywords">
+                                                {{keyword}}
+                                            </li>
+                                        </ol>
+                                    </div>
+                                    
+
+                                    <div v-if="project.roles && project.roles.length ">
+                                        <h5 class="margin-top-32">Roles</h5>
+                                        <ol>
+                                            <li v-for="(role, r_index) in project.roles">
+                                                {{role}}
+                                            </li>
+                                        </ol>
+                                    </div>
+                                    
+
+                                    <hr v-if="p_index < $root.sections.projects.length - 1">
+                                </div>
+                            </div>
+                            <!-- /Projects -->
+
                         </div>
                         <!-- /Right Column -->
                         
@@ -1140,7 +1304,8 @@
 
 
         <!-- Scripts -->
-        <script type="text/javascript" src="scripts.js"></script>
+        <script type="text/javascript" src="scripts/storage.js"></script>
+        <script type="text/javascript" src="scripts/models.js"></script>
 
         <script type="text/javascript" src="vendor/vue.2.6.10.js"></script>
         <script type="text/javascript" src="vendor/vue-router.3.1.3.js"></script>
@@ -1159,6 +1324,7 @@
         <script type="text/javascript" src="components/section_languages.js"></script>
         <script type="text/javascript" src="components/section_interests.js"></script>
         <script type="text/javascript" src="components/section_references.js"></script>
+        <script type="text/javascript" src="components/section_projects.js"></script>
         <script type="text/javascript" src="components/preview_resume.js"></script>
         <script type="text/javascript" src="components/preview_single_field.js"></script>
         <script type="text/javascript" src="components/card_header.js"></script>

scripts.js

@@ -1,224 +0,0 @@
-/**
- * Create a Helpers object to keep functions out of the global namespace space.
- */
-var helpers = {
-
-    setLocalStorage: function(key, value)
-    {
-        var jsonValue = JSON.stringify(value);
-        localStorage.setItem(key, jsonValue);
-    },
-
-
-
-    getLocalStorage: function(key)
-    {
-        jsonValue = localStorage.getItem(key);
-        
-
-        var value = null;
-        
-        if (jsonValue)
-        {
-            value = JSON.parse(jsonValue);
-        }
-        
-        return value;
-    },
-
-
-
-    clearLocalStorage: function(key)
-    {
-        localStorage.removeItem(key);
-    }
-}
-
-
-
-
-
-var sections = {
-    getDefaultSections: function()
-    {
-        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: ""
-        };
-    }
-}

scripts/models.js

@@ -0,0 +1,240 @@
+var models = {
+
+    // resume.json uses the ISO 8601 date standard e.g. 2014-06-29
+
+    newDefaultSections: function()
+    {
+        var structure = {
+            basics: {},
+            work: [],
+            volunteer: [],
+            education: [],
+            awards: [],
+            publications: [],
+            skills: [],
+            languages: [],
+            interests: [],
+            references: [],
+            projects: [],
+            meta: {}
+        };
+
+        structure.basics = this.newDefaultBasic();
+        structure.work.push(this.newDefaultWork());
+        structure.volunteer.push(this.newDefaultVolunteer());
+        structure.education.push(this.getDefaultEducation());
+        structure.awards.push(this.newDefaultAward());
+        structure.publications.push(this.newDefaultPublication());
+        structure.skills.push(this.newDefaultSkill());
+        structure.languages.push(this.newDefaultLanguage());
+        structure.interests.push(this.newDefaultInterest());
+        structure.references.push(this.newDefaultReference());
+        structure.references.push(this.newDefaultProject());
+        structure.meta = this.newDefaultMeta();
+
+        return structure;
+    },
+
+    newDefaultBasic: function()
+    {
+        return {
+            name: "",
+            label: "",
+            picture: "",    // "image" per schema v1.0.0
+            email: "",
+            phone: "",
+            website: "",
+            summary: "",
+            location: {
+                address: "",
+                postalCode: "",
+                city: "",
+                countryCode: "",        // code as per ISO-3166-1 ALPHA-2, e.g. US, AU, IN
+                region: "",
+            },
+            profiles: [
+                {
+                    network: "",
+                    username: "",
+                    url: "",
+                }
+            ]
+        };
+    },
+
+    newDefaultBasicProfile: function()
+    {
+        return {
+            network: "",
+            username: "",
+            url: "",
+        };
+    },
+
+    newDefaultWork: function()
+    {
+        return {
+            company: "",        // "name" per schema v1.0.0
+            location: "",
+            description: "",
+            position: "",
+            website: "",        // "url" per schema v1.0.0
+            startDate: "",
+            endDate: "",
+            summary: "",
+            highlights: [""]
+        };
+    },
+
+    newDefaultWorkHighlight: function()
+    {
+        return "";
+    },
+    
+    newDefaultVolunteer: function()
+    {
+        return {
+            organization: "",
+            position: "",
+            website: "",        // "url" per schema v1.0.0
+            startDate: "",
+            endDate: "",
+            summary: "",
+            highlights: [""]
+        };
+    },
+
+    newDefaultVolunteerHighlight: function()
+    {
+        return "";
+    },
+
+    getDefaultEducation: function()
+    {
+        return {
+            institution: "",
+            area: "",
+            studyType: "",
+            startDate: "",
+            endDate: "",
+            gpa: "",
+            courses: [""]
+        };
+    },
+            
+    newDefaultEducationCourse: function()
+    {
+        return "";
+    },
+    
+    newDefaultAward: function()
+    {
+        return {
+            title: "",
+            date: "",
+            awarder: "",
+            summary: ""
+        };
+    },
+
+    newDefaultPublication: function()
+    {
+        return {
+            name: "",
+            publisher: "",
+            releaseDate: "",
+            website: "",        // "url" per schema v1.0.0
+            summary: ""
+        };
+    },
+
+    newDefaultSkill: function()
+    {
+        return {
+            name: "",
+            level: "",
+            keywords: [""]
+        };
+    },
+            
+    newDefaultSkillKeyword: function()
+    {
+        return "";
+    },
+
+    newDefaultLanguage: function()
+    {
+        return {
+            language: "",
+            fluency: ""
+        };
+    },
+
+    newDefaultInterest: function()
+    {
+        return {
+            name: "",
+            keywords: [""]
+        };
+    },
+
+    newDefaultInterestKeyword: function()
+    {
+        return "";
+    },
+
+    newDefaultReference: function()
+    {
+        return {
+            name: "",
+            reference: ""
+        };
+    },
+
+
+    // Also in  schema v1.0.0
+    newDefaultProject: function()
+    {
+        return {
+            name: "",
+            description: "",
+            highlights: [],
+            keywords: [],
+            startDate: "",
+            endDate: "",
+            website: "",        // "url" per schema v1.0.0
+            roles: [],
+            entity: "",         // Specify the relevant company/entity affiliations e.g. 'greenpeace', 'corporationXYZ'
+            type: ""            //" e.g. 'volunteering', 'presentation', 'talk', 'application', 'conference'"
+        };
+    },
+
+
+    newDefaultProjectHighlight: function()
+    {
+        return "";
+    },
+
+
+    newDefaultProjectKeyword: function()
+    {
+        return "";
+    },
+    
+
+    newDefaultProjectRole: function()
+    {
+        return "";
+    },
+
+
+    // Also in  schema v1.0.0
+    newDefaultMeta: function()
+    {
+        return {
+            canonical: "",      // "URL (as per RFC 3986) to latest version of this document"
+            version: "",        // "A version field which follows semver - e.g. v1.0.0"
+            lastModified: ""    // "Using ISO 8601 with YYYY-MM-DDThh:mm:ss"
+        };
+    }
+}

scripts/scripts.js

@@ -0,0 +1,4 @@
+
+
+
+

scripts/storage.js

@@ -0,0 +1,35 @@
+/**
+ * Create a Helpers object to keep functions out of the global namespace space.
+ */
+var storage = {
+
+    setLocalStorage: function(key, value)
+    {
+        var jsonValue = JSON.stringify(value);
+        localStorage.setItem(key, jsonValue);
+    },
+
+
+
+    getLocalStorage: function(key)
+    {
+        jsonValue = localStorage.getItem(key);
+        
+
+        var value = null;
+        
+        if (jsonValue)
+        {
+            value = JSON.parse(jsonValue);
+        }
+        
+        return value;
+    },
+
+
+
+    clearLocalStorage: function(key)
+    {
+        localStorage.removeItem(key);
+    }
+}