Add custom navigation guard to settings page (#137)

Closes: #131

There is probably a better ("more native") way to do this, but I spent hours trying to figure it out and in the end it was way easier to circumvent the built-in f7 router events and just use my own custom back button. D.U.M. - dumb, but not my fault (I think...).

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: #137

src/js/routes.js

@@ -27,7 +27,7 @@ var routes = [
   },
   {
     path: '/settings/',
-    component: SettingsPage,
+    component: SettingsPage
   },
   {
     path: '/contact/',

src/pages/settings.vue

@@ -1,7 +1,12 @@
 <template>
   <f7-page name="settings">
     <!-- Top Navbar -->
-    <f7-navbar :sliding="false" back-link="Back">
+    <f7-navbar :sliding="false">
+      <f7-nav-left>
+        <f7-link class="link icon-only ripple-inset" @click="confirmBack">
+          <f7-icon class="icon-back"></f7-icon>
+        </f7-link>
+      </f7-nav-left>
       <f7-nav-title sliding>Settings</f7-nav-title>
     </f7-navbar>
     <f7-block style="display: flex; flex-direction: column; align-items: center;">
@@ -16,15 +21,15 @@
         <div ref="advancedSettings" class="settings-container">
           <div style="display:flex; justify-content:space-between; width: 100%; margin-bottom: 10px;">
             <span style="margin-left: 16px;">Use mini ALVINN<f7-icon size="16" style="padding-left: 5px;" f7="question_diamond_fill" tooltip="faster, less accurate: recommended for slower devices" /></span>
-            <f7-toggle v-model:checked="otherSettings.mini" style="margin-right: 16px;" />
+            <f7-toggle v-model:checked="otherSettings.mini" style="margin-right: 16px;" @change="setDirty()" />
           </div>
           <div style="display:flex; justify-content:space-between; width: 100%; margin-bottom: 10px;">
             <span style="margin-left: 16px;">Enable demo mode</span>
-            <f7-toggle v-model:checked="otherSettings.demo" style="margin-right: 16px;" />
+            <f7-toggle v-model:checked="otherSettings.demo" style="margin-right: 16px;" @change="setDirty()" />
           </div>
           <div style="display:flex; justify-content:space-between; width: 100%">
             <span style="margin-left: 16px;">Use external server</span>
-            <f7-toggle v-model:checked="serverSettings.use" style="margin-right: 16px;" />
+            <f7-toggle v-model:checked="serverSettings.use" style="margin-right: 16px;" @change="setDirty()" />
           </div>
           <f7-list>
             <f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.address" label="Server address" type="text" placeholder="127.0.0.1" />
@@ -57,6 +62,7 @@
     data () {
       return {
         showAdvanced: false,
+        isDirty: false,
         otherSettings: {
           mini: false
         },
@@ -115,6 +121,7 @@
               closeTimeout: 2000
             })
             toast.open()
+            this.isDirty = false;
           },
           () => {
             var toast = f7.toast.create({
@@ -125,17 +132,31 @@
           }
         )
       },
+      setDirty () {
+        this.isDirty = true
+      },
       setDarkMode (mode) {
         this.themeSettings.darkMode = mode
         f7.setDarkMode(mode)
+        this.isDirty = true
       },
       setServerProps (add, port) {
         this.serverSettings.address = add
         this.serverSettings.port = port
+        this.isDirty = true
       },
       toggleSettingsView () {
         this.showAdvanced = !this.showAdvanced
         this.$refs.advancedSettings.style.maxHeight = `${this.showAdvanced ? this.$refs.advancedSettings.scrollHeight : 0}px`
+      },
+      confirmBack () {
+        if (this.isDirty) {
+          f7.dialog.confirm('If you leave this page you will loose unsaved changes to your settings.', () => {
+            f7.views.main.router.back()
+          })
+        } else {
+          f7.views.main.router.back()
+        }
       }
     }
   }