Commit 0a2dd91b authored by Joel Collins's avatar Joel Collins
Browse files

savedHost now persistant via localStorage

parent ca38e1cd

src/components/paneConnect.vue

+54 −38
Original line number Diff line number Diff line
@@ -2,6 +2,8 @@ 
<div class="host-input">

  <div class="uk-margin">



    <h3>Connect</h3>



    <form @submit.prevent="handleSubmit">

      <div class="uk-inline">

        <span class="uk-form-icon" uk-icon="icon: server"></span>
@@ -23,6 +25,9 @@ 
    </form>



    <div class="host-display">



      <h3>Status</h3>



      <div v-if="$store.getters.ready">

        <p><b>Host:</b> {{ $store.state.host }}</p>

        <p><b>Base URI:</b> {{ $store.getters.uri }}</p>
@@ -32,24 +37,16 @@ 


      </div>



        <div v-else-if="$store.state.waiting">

          <div uk-spinner></div>

        </div>



        <div v-else-if="$store.state.error">

          <b>Error:</b> {{ $store.state.error }}

        </div>



        <div v-else>

          Enter a hostname and connect to start.

        </div>

      <div v-else-if="$store.state.waiting"><div uk-spinner></div></div>

      <div v-else-if="$store.state.error"><b>Error:</b> {{ $store.state.error }}</div>

      <div v-else>No active connection</div>

    </div>



    <h3>Saved hosts</h3>



    <div v-for="host in savedHosts" :key="host.name">

      <a href="#" v-on:click="delSavedHost(host)" class="uk-icon-link" uk-icon="trash"></a> 

      <a href="#" v-on:click="autofillHost(host)">{{ host.name }} ({{ host.hostname }}:{{ host.port }})</a> 

    <div v-for="host in savedHosts" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-grid">

      <a href="#" v-on:click="autofillHost(host)" class="uk-icon-link uk-padding-remove uk-width-expand"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a> 

      <a href="#" v-on:click="delSavedHost(host)" class="uk-icon-link uk-width-auto" uk-icon="trash"></a> 

    </div>



  </div>
@@ -84,6 +81,25 @@ export default { 
    }  

  },



  mounted() {

    // Try loading and parsing savedHosts from localStorage 

    if (localStorage.getItem('savedHosts')) {

      try {

        this.savedHosts = JSON.parse(localStorage.getItem('savedHosts'));

      } catch(e) {

        localStorage.removeItem('savedHosts');

      }

    }

  },



  // When savedHosts changes, serialise to JSON and save to localStorage

  watch: {

    savedHosts(newSavedHosts) {

      const parsed = JSON.stringify(this.savedHosts);

      localStorage.setItem('savedHosts', parsed);

    }

  },



  methods: {

    handleSubmit: function(event) {

      if (this.hostname.includes(':')) {