Commit 35fdaf33 authored by Joel Collins's avatar Joel Collins
Browse files

Simplified connect pane

parent f9c4df28

src/components/paneConnect.vue

+95 −12
Original line number Diff line number Diff line 
<template>

  <div id="paneConnect">

    <hostInput/>

    <hostDisplay/>

<div class="host-input">

  <div class="uk-margin">

      <form @submit.prevent="handleSubmit">

        <div class="uk-inline">

          <span class="uk-form-icon" uk-icon="icon: server"></span>

          <input v-model="hostname" v-bind:class="IpFormClasses" class="uk-input uk-form-width-medium uk-form-small" type="text" name="flavor" placeholder="localhost">

        </div>

        <button class="uk-button uk-button-default uk-form-small uk-float-right">Connect</button>

        <ul uk-accordion>

          <li>

            <a class="uk-accordion-title" href="#">Advanced</a>

            <div class="uk-accordion-content">

              <label class="uk-form-label" for="form-stacked-text">Port</label>

              <div class="uk-form-controls">

                  <input v-model="computedPort" class="uk-input uk-form-width-medium uk-form-small" id="form-stacked-text" type="number" value=5000>

              </div>

            </div>

          </li>

      </ul>

      </form>



      <div class="host-display">

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

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

          <p><b>Base URI:</b> {{ $store.getters.uri }}</p>

          <p v-if="$store.state.apiConfig.name"><b>Device name:</b> {{ $store.state.apiConfig.name }}</p>

        </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>

  </div>



</div>

</template>



<script>

// Import components

import hostInput from './paneConnectComponents/hostInput.vue'

import hostDisplay from './paneConnectComponents/hostDisplay'



// Export main app

export default {

  name: 'paneConnect',

  components: {

    hostInput,

    hostDisplay



  methods: {

    handleSubmit: function(event) {

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

        this.port = this.computedPort

        this.hostname = this.hostname.split(':')[0];

      }

      // Commit the hostname and port to store

      this.$store.commit('changeHost', [

        this.hostname, 

        this.port

      ]);

      // Try to get config and state JSON from the newly submitted host

      this.$store.dispatch('firstConnect')

    }

</script>

  },



<style lang="less">

  data: function () {

    return {

      hostname: "localhost",

      port: 5000

    }  

  },



  computed: {

    // Stylises the hostname input box based on connection status

    IpFormClasses: function () {

      return {

        'uk-form-danger': !this.$store.state.available,

        'uk-form-success': this.$store.getters.ready

      }

    },



    computedPort: {

      get: function() {

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

          var port = parseInt(this.hostname.split(':')[1]);

          return !isNaN(port) ? port : this.port

        }

        else {

          return this.port

        }

      },

      set: function(newPort) {

        this.port = newPort

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

          this.hostname = this.hostname.split(':')[0] + ":" + this.port

        }

      }

    }

  }



}

</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="less">

.host-input {

  text-align: left;

}

</style>

src/components/paneConnectComponents/hostDisplay.vue

deleted100644 → 0
+0 −18
Original line number Diff line number Diff line 
<template>

	<div class="host-display">

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

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

			<p><b>Base URI:</b> {{ $store.getters.uri }}</p>

			<p v-if="$store.state.apiConfig.name"><b>Device name:</b> {{ $store.state.apiConfig.name }}</p>

		</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>

</template>
 
 No newline at end of file

src/components/paneConnectComponents/hostInput.vue

deleted100644 → 0
+0 −90
Original line number Diff line number Diff line 
<template>

<div class="host-input">

  <div class="uk-margin">

      <form @submit.prevent="handleSubmit">

        <div class="uk-inline">

          <span class="uk-form-icon" uk-icon="icon: server"></span>

          <input v-model="hostname" v-bind:class="IpFormClasses" class="uk-input uk-form-width-medium uk-form-small" type="text" name="flavor" placeholder="localhost">

        </div>

        <button class="uk-button uk-button-default uk-form-small uk-float-right">Connect</button>

        <ul uk-accordion>

          <li>

            <a class="uk-accordion-title" href="#">Advanced</a>

            <div class="uk-accordion-content">

              <label class="uk-form-label" for="form-stacked-text">Port</label>

              <div class="uk-form-controls">

                  <input v-model="computedPort" class="uk-input uk-form-width-medium uk-form-small" id="form-stacked-text" type="number" value=5000>

              </div>

            </div>

          </li>

      </ul>

      </form>

  </div>

</div>

</template>



<script>



export default {

  name: 'hostInput',



  methods: {

    handleSubmit: function(event) {

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

        this.port = this.computedPort

        this.hostname = this.hostname.split(':')[0];

      }

      // Commit the hostname and port to store

      this.$store.commit('changeHost', [

        this.hostname, 

        this.port

      ]);

      // Try to get config and state JSON from the newly submitted host

      this.$store.dispatch('firstConnect')

    }

  },



  data: function () {

    return {

      hostname: "localhost",

      port: 5000

    }  

  },



  computed: {

    // Stylises the hostname input box based on connection status

    IpFormClasses: function () {

      return {

        'uk-form-danger': !this.$store.state.available,

        'uk-form-success': this.$store.getters.ready

      }

    },



    computedPort: {

      get: function() {

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

          var port = parseInt(this.hostname.split(':')[1]);

          return !isNaN(port) ? port : this.port

        }

        else {

          return this.port

        }

      },

      set: function(newPort) {

        this.port = newPort

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

          this.hostname = this.hostname.split(':')[0] + ":" + this.port

        }

      }

    }

  }



}

</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="less">

.host-input {

  text-align: left;

}

</style>