Still Alpha Code, but WOrksish

app/app.js

@@ -58,7 +58,7 @@ var app = new Vue({
 
 		currentVersion: "",
 
-		availableVersions: []
+		versions: []
 	},    
 
 	created()
@@ -66,6 +66,7 @@ var app = new Vue({
 		this.sections = models.newDefaultSections();
 		// this.versons = [];
 		this.versions = storage.getLocalStorage("versions");
+		this.currentVersion = "";
 
 		// console.log("this.sections=", this.sections);
 
@@ -88,8 +89,9 @@ var app = new Vue({
 	{
 		this.loadCountryCodes();
 		this.loadFromStorage();
+		this.currentVersion = this.$root.sections.meta.version
 		// Quick Fix
-		storage.setVersionedLocalStorage(this.$root.sections.meta.version, "sections", this.$root.sections);
+		storage.setVersionedLocalStorage(this.currentVersion, "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);
@@ -124,7 +126,16 @@ var app = new Vue({
 			this.activePage.fontAwesomeIconCss = component.fontAwesomeIcon;
     },
 		
+		onVersionChange: function() {
+			// storage.setVersionedLocalStorage(this.currentVersion,"sections",this.$root.sections);
+			console.log(["version",this.currentVersion,this.$root.sections.meta.version]);
 
+			this.$root.sections = storage.getVersionedLocalStorage(this.currentVersion,"sections");
+			
+			console.log(["version",this.currentVersion,this.$root.sections.meta.version]);
+
+			storage.setLocalStorage(this.$root.sections); // Perhaps optimisation to come
+		},
 
 		/**
 		 * Reset and clear the details of the active page.

index.html

@@ -47,8 +47,14 @@
             <nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar">
                 <div class="w3-bar-block">
                     <a href="#/" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fas fa-home"></i>&nbsp; Home</a>
-                    <a v-bind:href="this.sections.meta.canonical" v-if="this.sections.meta.canonical != ''" target="_new" class="w3-bar-item w3-button w3-padding w3-blue">{{ this.sections.meta.version }}</a>
+                    <form>
-                    <span v-else  class="w3-bar-item w3-button w3-padding w3-blue">{{ this.sections.meta.version }}</span><span  v-if="this.sections.meta.lastModified != ''"  class="w3-bar-item w3-button w3-padding w3-blue">({{ this.sections.meta.lastModified}})</span>
+                    <select name="currentVersion" v-model="currentVersion" @change="onVersionChange()">
+                    <option v-for="(version, v_index) in this.$root.versions">
+                            {{ version }}
+                    </option>
+                    </select>
+                    </form>
+                    <a v-bind:href="this.sections.meta.canonical" v-if="this.sections.meta.canonical != ''" target="_new" class="w3-bar-item w3-button w3-padding "><i class="fas fa-link"></i> link ({{ this.sections.meta.lastModified}})</a>
                 </div>
                 <div class="w3-container w3-margin-top">
                     <h5>Sections</h5>

scripts/storage.js

@@ -41,7 +41,7 @@ var storage = {
 
     getLocalStorage: function(key)
     {
-        // console.log(key);
+        console.log(key);
         return this.parseJSON2Native(localStorage.getItem(key));
     },
     /*