Team2890/PhotonVision
4
0
Fork 0
mirror of https://github.com/PhotonVision/photonvision synced 2026-06-26 01:51:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

completed system settings page with vuex integration

Browse Source
This commit is contained in:
ori
2019-04-26 00:28:31 +03:00
parent cbbd34abcf
commit 2fd075398c
2 changed files with 129 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
chameleon-client/src/components/SystemTab.vue
View File

@@ -1,41 +1,134 @@
<template>
<div id="SystemTab">
<chInputNumber title="Enter Team Number" Xkey="teamValue"></chInputNumber>
<div>
<row type="flex" justify="start" align="middle" :gutter="10" >
<Col span="6">
<h4>Team Number:</h4>
</Col>
<col span="4">
<InputNumber :min="0" v-model="teamNum" size="small"></InputNumber>
</col>
</row>
</div>
<Divider class="divdiv" orientation="left">Networking</Divider>
<div>
<RadioGroup v-model="lan" style="display: flex;">
<RadioGroup v-model="connectionType" style="display: flex;">
<Radio label="DHCP"></Radio>
<Radio label="Static"></Radio>
</RadioGroup>
<!--
ip
subnetmask
gateway
hostname -->
</div>
<div class="ipSettings">
<row type="flex" justify="start" align="middle" class="spacing">
<Col span="4">
<h4>IP:</h4>
</Col>
<Col span="10">
<Input v-model="IP" size="small" :disabled="isConnection"></Input>
</Col>
</row>
<row type="flex" justify="start" align="middle" class="spacing">
<Col span="4">
<h4>Gateway:</h4>
</Col>
<Col span="10">
<Input v-model="gateWay" size="small" :disabled="isConnection"></Input>
</Col>
</row>
<row type="flex" justify="start" align="middle" class="spacing">
<Col span="4">
<h4>Hostname:</h4>
</Col>
<Col span="10">
<Input v-model="hostName" size="small">
<span slot="prepend">http://Chameleon-Vision</span>
<span slot="append">.local</span>
</Input>
</Col>
</row>
</div>
<Divider class="divdiv" orientation="left"></Divider>
<row type="flex" justify="start" align="middle" style="margin-top:20px">
<Button type="primary" size="small" v-on:click="socketSendAll">Save Changes</Button>
</row>
</div>
</div>
</template>
<script>
import chInputNumber from './ch-inputNumber.vue'
import chSelect from './ch-select.vue'
export default {
name: 'SystemTab',
data() {
return {
lan:0
lan:0
}
},
components:{
chInputNumber
chInputNumber,
chSelect
},
methods: {
socketSendAll: function(){
this.$socket.sendObj([
{'teamValue':this.teamNum},
{'connectionType':this.connectionType},
{'ip':this.ip},
{'gateWay':this.gateWay},
{'hostName':this.hostName}]);
}
},
computed: {
teamNum:{
get: function(){
return this.$store.state.teamValue;
},
set: function(value){
this.$store.commit('teamValue',value);
}
},
connectionType:{
get: function(){
return this.$store.state.connectionType;
},
set: function(value){
this.$store.commit('connectionType',value);
}
},
IP:{
get: function(){
return this.$store.state.ip;
},
set: function(value){
this.$store.commit('ip',value);
}
},
gateWay:{
get: function(){
return this.$store.state.gateWay;
},
set: function(value){
this.$store.commit('gateWay',value);
}
},
hostName:{
get: function(){
return this.$store.state.hostName;
},
set: function(value){
this.$store.commit('hostName',value);
}
},
isConnection: function(){
if(this.connectionType == "DHCP"){
return true
} else{
return false
}
}
}
}
</script>
</script>
<style>
.ivu-divider-inner-text{
color: aliceblue
}
@@ -44,4 +137,10 @@
text-align: left;
color: aliceblue;
}
.ipSettings{
margin-top: 10px;
}
.spacing{
margin-top: 10px;
}
</style>

19
chameleon-client/src/store.js
View File

@@ -27,7 +27,11 @@ export const store = new Vuex.Store({
ratio:[0,0],
extent:[0,100],
//Settings
teamValue:0
teamValue:0,
connectionType:"DHCP",
ip:0,
gateWay:0,
hostName:""
},
mutations:{
@@ -48,7 +52,11 @@ export const store = new Vuex.Store({
area: set('area'),
ratio: set('ratio'),
extent: set('extent'),
teamValue: set('teamValue')
teamValue: set('teamValue'),
connectionType: set('connectionType'),
ip: set('ip'),
gateWay : set('gateWay'),
hostName : set('hostName')
},
getters:{
camera: state => state.camera,
@@ -65,6 +73,11 @@ export const store = new Vuex.Store({
area: state =>state.area,
ratio: state =>state.ratio,
extent: state =>state.extent,
teamValue: state => state.teamValue
teamValue: state => state.teamValue,
connectionType: state => state.connectionType,
ip: state => state.ip,
gateWay: state => state.gateWay,
hostName: state => state.hostName
},
});