ALVINN_f7/src/pages/settings.vue

<template>
    <f7-page name="settings">
      <!-- Top Navbar -->
      <f7-navbar :sliding="false" back-link="Back">
        <f7-nav-title sliding>Settings</f7-nav-title>
      </f7-navbar>
      <f7-block style="display: flex; flex-direction: column; align-items: center;">
        <div style="display: flex; flex-direction: column; align-items: center;">
          <f7-block-title medium>Server Settings</f7-block-title>
          <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;" />
          </div>
          <f7-list>
            <f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.address" label="Server address" type="text" placeholder="127.0.0.1" />
            <f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.port" label="Server port" type="text" placeholder="9001" />
          </f7-list>
          <span>Other servers</span>
          <f7-list :dividers="true" :outline="true" :strong="true" :inset="true" style="width: calc(100% - 32px); margin-top: 0;">
            <f7-list-item v-for="(port, add) in otherIp" :disabled="!serverSettings.use" :title="add" @click="setServerProps(add, port)">{{ port }}</f7-list-item>
            <f7-list-item v-if="Object.keys(otherIp).length == 0" title="No previous server settings"></f7-list-item>
          </f7-list>
          <f7-block-title medium>Dark Mode</f7-block-title>
          <f7-list style="width: 100%;">
            <f7-list-item title="Auto" :checked="themeSettings.darkMode == 'auto'" radio name="darkmode" radio-icon="end" @change="setDarkMode('auto')" ></f7-list-item>
            <f7-list-item title="Light" :checked="themeSettings.darkMode.toString() == 'false'" radio name="darkmode" radio-icon="end" @change="setDarkMode(false)" ></f7-list-item>
            <f7-list-item title="Dark" :checked="themeSettings.darkMode.toString() == 'true'" radio name="darkmode" radio-icon="end" @change="setDarkMode(true)" ></f7-list-item>
          </f7-list>
          <f7-button @click="saveAllSettings" >Save</f7-button>
        </div>
      </f7-block>
    </f7-page>
</template>

<script>
    import { f7 } from 'framework7-vue'

    export default {
        data () {
            return {
              serverSettings: {
                use: false,
                address: '10.170.64.22',
                port: '9001',
                previous: {}
              },
              themeSettings: {
                darkMode: 'auto'
              }
            }
        },
        computed: {
          otherIp () {
            let filteredIps = {}
            for (var oldIp in this.serverSettings.previous) {
              if (oldIp != this.serverSettings.address) {
                filteredIps[oldIp] = this.serverSettings.previous[oldIp]
              }
            }
            return filteredIps
          }
        },
        created () {
            var loadServerSettings = localStorage.getItem('serverSettings')
            if (loadServerSettings) this.serverSettings =  JSON.parse(loadServerSettings)
            if (!this.serverSettings.previous) this.serverSettings.previous = {}
            var loadThemeSettings = localStorage.getItem('themeSettings')
            if (loadThemeSettings) this.themeSettings = JSON.parse(loadThemeSettings)
        },
        methods: {
            saveAllSettings () {
                let saveSetting = new Promise(
                  (saved,failed) => {
                    try {
                      if (this.serverSettings.use) {
                        this.serverSettings.previous[this.serverSettings.address] = this.serverSettings.port
                      }
                      localStorage.setItem('serverSettings',JSON.stringify(this.serverSettings))
                      localStorage.setItem('themeSettings',JSON.stringify(this.themeSettings))
                      saved()
                    } catch {
                      failed()
                    }
                  }
                )
                saveSetting.then(
                  () => {
                    var toast = f7.toast.create({
                      text: 'Settings saved',
                      closeTimeout: 2000
                    })
                    toast.open()
                  },
                  () => {
                    var toast = f7.toast.create({
                      text: 'ERROR: No settings saved',
                      closeTimeout: 2000
                    })
                    toast.open()
                  }
                )
            },
            setDarkMode (mode) {
              this.themeSettings.darkMode = mode
              f7.setDarkMode(mode)
            },
            setServerProps (add, port) {
              this.serverSettings.address = add
              this.serverSettings.port = port
            }
          }
        }
</script>