From 5a0269e50eea2c7d6d593cd1da102609e7ecc775 Mon Sep 17 00:00:00 2001 From: Jason Snelders Date: Tue, 12 Nov 2019 14:58:36 +1100 Subject: [PATCH] WIP - import/export, and changing data model location. --- app/app.js | 216 +++++++++++++++++++++++++++++------ components/export.js | 4 +- components/import.js | 2 +- components/section_basics.js | 64 ++++++----- index.html | 70 ++++++------ 5 files changed, 251 insertions(+), 105 deletions(-) diff --git a/app/app.js b/app/app.js index fb3d04c..a8631d7 100644 --- a/app/app.js +++ b/app/app.js @@ -36,30 +36,6 @@ var app = new Vue({ el: '#app', router: router, - - - - - - watch: { - /** - * Detect when a route changes. - * - * @param object to Details of the previous route (navigating away from). - * @param object from Details of the new active route (navigating to). - */ - $route: function (to, from) - { - //console.log("Route change: ", from, " --> ", to); - - // Set the "current" main navigation item based on the current route. - helpers.selectMenuItemForCurrentUrl(); - - // Set the current page details based on the component mapped to the active route. - var component = components.getComponentByPath(to.fullPath); - this.setActivePageByComponent(component); - } - }, @@ -76,21 +52,91 @@ var app = new Vue({ data: { - // componentId: "", - // pageTitle: "", - // fontAwesomeIcon: "", - - // display: "", - // sidebarHeight: "", - // username: "", - // searchString: "", + sections: { + 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: "" + }] + }, - /** - * The complete JSON document - */ - jsonDocument: "", - /** * Details of the current page/route. */ @@ -130,6 +176,47 @@ var app = new Vue({ mounted() { + // var savedData = helpers.getLocalStorage("sections.basics"); + + // console.log("savedData=", savedData); + + // if (savedData) + // { + // // Data previously saved. + // //this.sections = savedData; + + // for (var key in savedData) + // { + // if (savedData.hasOwnProperty(key)) + // { + // console.log(key + " > " + savedData[key]); + // this.sections.basics[key] = savedData[key]; + // } + // } + // } + + + //var savedData = helpers.getLocalStorage("sections").sections; + var savedData = helpers.getLocalStorage("sections"); + + console.log("get saved data[sections]=", savedData); + + if (savedData) + { + // Data previously saved. + //this.sections = savedData; + + for (var key in savedData) + { + if (savedData.hasOwnProperty(key)) + { + console.log(key + " > ", savedData[key]); + this.sections[key] = savedData[key]; + } + } + } + + // Set the "current" main navigation item based on the current route. helpers.selectMenuItemForCurrentUrl(); @@ -178,5 +265,58 @@ var app = new Vue({ // //alert("Hello was clicked" + "\n" + "Who=" + eventValue.whoWasIt + "\n" + "What=" + eventValue.whatWasIt); // console.log("componentActivated(): eventValue.component=", eventValue.component); // } - } + }, + + + + + + // watch: { + // /** + // * Watch all data for changes + // */ + // 'sections.basics': function(val) + // { + // // Save the data to localStorage + // //NOTE: I'm initially not concerned about performance here/ + // console.log("watch section", val); + // } + // } + + + + + + + watch: { + /** + * Detect when a route changes. + * + * @param object to Details of the previous route (navigating away from). + * @param object from Details of the new active route (navigating to). + */ + $route: function (to, from) + { + //console.log("Route change: ", from, " --> ", to); + + // Set the "current" main navigation item based on the current route. + helpers.selectMenuItemForCurrentUrl(); + + // Set the current page details based on the component mapped to the active route. + var component = components.getComponentByPath(to.fullPath); + this.setActivePageByComponent(component); + }, + + + $data: { + handler: function(val, oldVal) + { + console.log("val=", val.sections); + // Save the data to localStorage + //NOTE: I'm initially not concerned about performance here. + helpers.setLocalStorage("sections", val.sections); + }, + deep: true + } + }, }); \ No newline at end of file diff --git a/components/export.js b/components/export.js index 667aae0..c8047ac 100644 --- a/components/export.js +++ b/components/export.js @@ -5,7 +5,7 @@ var exportComponent = { mounted: function() { - + this.json = JSON.stringify(this.$root.sections, null, 4); }, @@ -20,7 +20,7 @@ var exportComponent = { data: function() { return { - item: {} + json: "" }; }, diff --git a/components/import.js b/components/import.js index d5e0be7..c03e550 100644 --- a/components/import.js +++ b/components/import.js @@ -20,7 +20,7 @@ var importComponent = { data: function() { return { - item: {} + json: "" }; }, diff --git a/components/section_basics.js b/components/section_basics.js index 9565e83..9a96a4c 100644 --- a/components/section_basics.js +++ b/components/section_basics.js @@ -1,16 +1,16 @@ var sectionBasicsComponent = { template: '#section-basics-template', + + mounted: function() { var savedData = helpers.getLocalStorage("section.basics"); - console.log("basics: mounted", savedData); if (savedData) { - console.log("set data"); // Data previously saved. this.data = savedData; @@ -23,14 +23,12 @@ var sectionBasicsComponent = { } } } - - //this["name"] = "Doug"; - - console.log("this.data=", this); }, + + destroyed: function() { @@ -38,35 +36,39 @@ var sectionBasicsComponent = { + + data: function() { return { - name: "", - label: "", - picture: "", - email: "", - phone: "", - website: "", - summary: "", - location: { - address: "", - postalCode: "", - city: "", - countryCode: "", - region: "", - }, - profiles: [ - { - network: "", - username: "", - url: "", - } - ] + // name: "", + // label: "", + // picture: "", + // email: "", + // phone: "", + // website: "", + // summary: "", + // location: { + // address: "", + // postalCode: "", + // city: "", + // countryCode: "", + // region: "", + // }, + // profiles: [ + // { + // network: "", + // username: "", + // url: "", + // } + // ] }; }, + + watch: { /** * Watch all data for changes @@ -76,14 +78,18 @@ var sectionBasicsComponent = { { // Save the data to localStorage //NOTE: I'm initially not concerned about performance here/ - helpers.setLocalStorage("section.basics", val); + //helpers.setLocalStorage("section.basics", val); + + //this.$root.sections.basics = val; }, deep: true } }, - methods: { + + + methods: { } }; \ No newline at end of file diff --git a/index.html b/index.html index 6e48bf3..9a4c045 100644 --- a/index.html +++ b/index.html @@ -142,37 +142,37 @@

- + Your full name.

- + Your job or professional title (e.g. software developer, IT manager, graphic designer).

- + URL to your profile photo or avatar.

- + Your contact email address

- + Your contact phone number.

- + Your website.

- + About you, what your do, who you are, what you are looking for in your career.

@@ -181,27 +181,27 @@ Where are you located?

- + (Not recommended) Your street address

- + Post or Zip cod

- + City or town

- + The 2-character country code (https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes)

- + State or region

@@ -209,17 +209,17 @@
Social Network Profiles

- + Name of the network

- + Your username in the network

- + URL to your profile in the network

@@ -228,27 +228,27 @@  
- - - + + + - - - + + + - +
Location
- - - - - + + + + +
Social Network Profiles
- - - + + +
@@ -479,7 +479,10 @@ @@ -490,10 +493,7 @@

Copy the following text in a text file and save it with the exctension ".json" (.e.g resume.json).

-
- {{$parent.jsonDocument}} -
- +