Commit 4b935a58 authored by Joel Collins's avatar Joel Collins
Browse files

Input for port

parent 001edce4

src/App.vue

+2 −2
Original line number Diff line number Diff line 
<template>

  <div id="app">

    <hostInput/>

    <img alt="Vue logo" src="./assets/images/logo.png">

    <hostDisplay/>

  </div>

</template>
@@ -38,6 +37,7 @@ export default { 
#app {

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  text-align: left;

  padding-left: 20px;

}

</style>

src/components/hostDisplay.vue

+4 −4
Original line number Diff line number Diff line 
<template>

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

		<p>Current host is: {{ $store.state.host }}</p>

		<p>Current base URI is: {{ $store.getters.uri }}</p>

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

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

		Error: {{ $store.state.error }}

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

	</div>

	<div v-else>

		Enter a hostname and connect to start.

src/components/hostInput.vue

+26 −5
Original line number Diff line number Diff line
@@ -6,7 +6,18 @@ 
          <span class="uk-form-icon" uk-icon="icon: server"></span>

          <input @input="IpChanged" 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">Connect</button>

        <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 @input="portChanged" class="uk-input uk-form-width-medium uk-form-small" id="form-stacked-text" type="number" value=5000>

              </div>

            </div>

          </li>

      </ul>

      </form>

  </div>
@@ -24,16 +35,22 @@ export default { 
        this.hostname = event.target.value

      }

    },

    

    portChanged: function(event) {

      this.port = event.target.value

    },

    handleSubmit: function(event) {

        this.$store.commit('changeHost', this.hostname);

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

        this.hostname, 

        this.port

      ]);

      this.$store.dispatch('updateConfig');

    }

  },



  data: function () {

    return {

      hostname: "localhost"

      hostname: "localhost",

      port: 5000

    }  

  },
@@ -51,4 +68,8 @@ export default { 


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

<style scoped lang="less">

.host-input {

  text-align: left;

  width: 300px

}

</style>

src/store.js

+4 −1
Original line number Diff line number Diff line 
import Vue from 'vue'

import Vuex from 'vuex'

import axios from 'axios'

import UIkit from 'uikit';



Vue.use(Vuex)
@@ -18,7 +19,8 @@ export default new Vuex.Store({ 
  },



  mutations: {

    changeHost(state, host, port=5000, apiVer='v1') {

    changeHost(state, [host, port, apiVer='v1']) {

      console.log(host, port)

      state.host = host;

      state.port = port;

      state.apiVer = apiVer;
@@ -55,6 +57,7 @@ export default new Vuex.Store({ 
        context.commit('commitError', '');

        context.commit('commitConfig', response.data);

      }, (error)  =>  {

        UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${error.message}`, status: 'danger'})

        context.commit('changeWaiting', false);

        context.commit('commitError', error.message);

        context.commit('changeConnected', false);