Import function starting to work

app/app.js

@@ -36,51 +36,66 @@ var router = new VueRouter({
 var app = new Vue({
 	el: '#app',
 	router: router,
-    components: 
+	components: 
-    {
+	{
+	},
+
+	data: 
+	{
+		status: "loading",
+
+		sections: {},
+		/**
+		 * Details of the  current page/route.
+		 */
+		activePage: {
+			id: "",
+			title: "",
+			fontAwesomeIconCss: ""
 		},
 
-    data: 
+		countryCodes: [],
-    {
-			status: "loading",
 
-			sections: {},
+		currentVersion: "",
-			/**
-			 * Details of the  current page/route.
-			 */
-			activePage: {
-				id: "",
-				title: "",
-				fontAwesomeIconCss: ""
-			},
 
-			countryCodes: []
+		availableVersions: []
-    },    
+	},    
 
-    created()
+	created()
-		{
+	{
-			this.sections = models.newDefaultSections();
+		this.sections = models.newDefaultSections();
-			console.log("this.sections=", this.sections);
+		// this.versons = [];
+		this.versions = storage.getLocalStorage("versions");
 
-			//-- Register all components
+		// console.log("this.sections=", this.sections);
-			pageComponents.registerComponents();
 
-			//-- Get the component for the initial route path
+		//-- Register all components
-			var initialRoute = this.$route.path;
+		pageComponents.registerComponents();
-			var component = pageComponents.getComponentByPath(initialRoute);
+
-			this.setActivePageByComponent(component);
+		//-- Get the component for the initial route path
-    },
+		var initialRoute = this.$route.path;
+		var component = pageComponents.getComponentByPath(initialRoute);
+		this.setActivePageByComponent(component);
+	},
 
 
-    destroyed() 
+	destroyed() 
-    {
+	{
-		},
+	},
 
 
-    mounted() 
+	mounted() 
-    {
+	{
 		this.loadCountryCodes();
 		this.loadFromStorage();
+		// Quick Fix
+		storage.setVersionedLocalStorage(this.$root.sections.meta.version, "sections", this.$root.sections);
+		console.log([this.$root.sections.meta.version,this.$root.sections]);
+		//if (!this.availableVersions.hasKey(this.$root.sections.meta.version))
+		//	this.availableVersions.push(this.$root.sections.meta.version);
+		// console.log([this.versions[0],storage.getVersionedLocalStorage(this.versions[0])]);
+
+		// this.availableVersions = this.$root.availableVersions;
 
 		// Set the "current" main navigation item based on the current route.
 		this.selectMenuItemForCurrentUrl();
@@ -120,13 +135,21 @@ var app = new Vue({
 			this.activePage.title = "";
 			this.activePage.fontAwesomeIconCss = "";
 		},
-
+		/*
+		 *
+		 */
 		loadFromStorage: function()
 		{
 			var savedData = storage.getLocalStorage("sections");
 			this.populateSections(savedData);
 		},
 
+		loadVersionFromStorage: function(version)
+		{
+			var savedData = storage.getLocalStorageVersion(version,"sections");
+			this.populateSections(savedData);
+		},
+
 		populateSections: function(data)
 		{
 			if (data)
@@ -141,6 +164,7 @@ var app = new Vue({
 				}
 			}
 		},
+
 		loadCountryCodes: function()
 		{
 			console.log("loadCountryCodes(): data", countryCodes);
@@ -159,7 +183,6 @@ var app = new Vue({
 			}
 		},
 
-
 		getCountryName: function(countryCode)
 		{
 			for (var i = 0; i < this.countryCodes.length; i++)
@@ -174,13 +197,12 @@ var app = new Vue({
 
 			return "";
 		},
+
 		displayLocation: function()
 		{
 			return this.sections.basics.location.city + ", " + this.getCountryName(this.sections.basics.location.countryCode);
 		},
 
-
-
 		skillLevelAsPercent: function(index)
 		{
 			var level = this.$root.sections.skills[index].level;
@@ -202,6 +224,7 @@ var app = new Vue({
 				return 50;
 			}
 		},
+
 		languageFluencyAsPercent: function(index)
 		{
 			if (!this.$root.sections.skills[index]) {
@@ -280,6 +303,7 @@ var app = new Vue({
 
 			return false;
 		},
+
 		saveResume: function()
 		{
 			var response = confirm("Resume saved");

components/import.js

@@ -1,22 +1,17 @@
 var importComponent = {
 	template: '#import-template',
 
-	
-
 	mounted: function()
 	{
 
+		
 	},
 
-
-
 	destroyed: function()
 	{
 		
 	},
 
-
-	
 	data: function()
 	{
 		return {
@@ -24,12 +19,10 @@ var importComponent = {
 		};
 	},
 
-	
-
 	methods: {
 		importJson: function()
 		{
-			console.log("import JSON: " + this.json);
+			// console.log("import JSON: " + this.json);
 
 			var data = JSON.parse(this.json);
 
@@ -43,10 +36,14 @@ var importComponent = {
 			router.push("section/basics");
 		},
 
-
 		validateJson: function(value)
 		{
 
+		},
+
+		importVersion: function(version) {
+			this.sections = storage.getVersionedLocalStorage(version,"sections");
+			router.push("section/basics");
 		}
 	}
 };

index.html

@@ -1273,6 +1273,10 @@
                 </p>
                 <textarea rows="20" class="w3-input w3-border" type="text" v-model="json"></textarea>
                 <button class="w3-btn w3-white w3-border w3-border-blue w3-round" v-on:click="importJson">Import</button>
+                <br/>
+                <button class="w3-btn w3-white w3-border w3-border-blue w3-round" v-on:click="importVersion" v-bind:version="version" v-for="(version, v_index) in $root.versions">
+                    {{ version }}
+                </button>
             </div>
         </template>
 

scripts/storage.js

@@ -3,19 +3,61 @@
  */
 var storage = {
 
+    getCurrentVersion: function()
+    {
+        console.log("storage getCurrentVersion" + this.getLocalStorage('sections.meta.version'));
+
+        return this.getLocalStorage('sections.meta.version');
+    },
+
+    getAvailableVersions: function()
+    {
+        return storage.getLocalStorage("versions");
+    },
+
     setLocalStorage: function(key, value)
     {
         var jsonValue = JSON.stringify(value);
         localStorage.setItem(key, jsonValue);
     },
 
+    setVersionedLocalStorage: function(version, key, value)
+    {
+        var jsonValue = JSON.stringify(value);
+        key = "versions." + version + "." + key;
+        localStorage.setItem(key, jsonValue);
+        this.versions = [];
+        if (this.getLocalStorage("versions")) {
+            this.versions = this.getLocalStorage("versions");
+        }
+        if (!this.versions.includes(version)) {
+            this.versions.push(version);
+        }
+        // versions.push(version);
+        // console.log([version, key, value, versions]);
 
+        this.setLocalStorage("versions",this.versions);
+    },
 
     getLocalStorage: function(key)
     {
-        jsonValue = localStorage.getItem(key);
+        console.log(key);
+        return this.parseJSON2Native(localStorage.getItem(key));
+    },
+    /*
+    * @TODO optimize
+    */ 
+    getVersionedLocalStorage: function(version, key)
+    {
+        return this.getLocalStorage("versions." + version + "." + key);
+    },
 
+    clearLocalStorage: function(key)
+    {
+        localStorage.removeItem(key);
+    },
 
+    parseJSON2Native: function(jsonValue) {
         var value = null;
         
         if (jsonValue)
@@ -24,12 +66,6 @@ var storage = {
         }
         
         return value;
-    },
-
-
-
-    clearLocalStorage: function(key)
-    {
-        localStorage.removeItem(key);
     }
+
 }