Merge remote-tracking branch 'origin/develop' into new/UnderTheHood
This commit is contained in:
+4
-1
@@ -11,11 +11,14 @@ export default class InputTable extends Vue {
|
||||
|
||||
|
||||
|
||||
pin(item: server.channel) {
|
||||
pin(item: server.channel, group: string) {
|
||||
let found = this.pinned.findIndex(i => i == item);
|
||||
if (found >= 0) this.pinned.splice(found, 1);
|
||||
else
|
||||
this.pinned.push(item);
|
||||
|
||||
if (group)
|
||||
Vue.set(item, '__group', group);
|
||||
}
|
||||
|
||||
isPinned(item: server.channel): boolean {
|
||||
|
||||
+3
-2
@@ -17,11 +17,12 @@
|
||||
<td colspan="6">{{'pinned' | localize('Pinned')}}</td>
|
||||
</tr>
|
||||
<input-row
|
||||
:group="item.__group"
|
||||
@click="pin(item)"
|
||||
:pinned="isPinned(item)"
|
||||
:item="item"
|
||||
v-for="(item, index) of pinned"
|
||||
:key="`pinned-${idx}-${index}`"
|
||||
:key="`pinned-${index}`"
|
||||
></input-row>
|
||||
</template>
|
||||
|
||||
@@ -33,7 +34,7 @@
|
||||
|
||||
<input-row
|
||||
:group="group"
|
||||
@click="pin(item)"
|
||||
@click="pin(item, group)"
|
||||
:pinned="isPinned(item)"
|
||||
:item="item"
|
||||
:id="`input-${group}`"
|
||||
|
||||
+3
-1
@@ -3,7 +3,7 @@ import Vue from "vue";
|
||||
import { Prop } from "vue-property-decorator";
|
||||
|
||||
@Component({})
|
||||
export default class inputRow extends Vue {
|
||||
export default class outputRow extends Vue {
|
||||
|
||||
@Prop()
|
||||
pinned: boolean;
|
||||
@@ -11,5 +11,7 @@ export default class inputRow extends Vue {
|
||||
@Prop()
|
||||
item: server.channel;
|
||||
|
||||
@Prop()
|
||||
group: string;
|
||||
|
||||
}
|
||||
+17
-2
@@ -26,7 +26,7 @@
|
||||
<td>
|
||||
<span>{{ item.label | localize(item.label) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<td v-if="group=='do'">
|
||||
<span
|
||||
:class="
|
||||
item.value
|
||||
@@ -38,8 +38,23 @@
|
||||
<span v-if="item.value == 0" class="value-button-input-container-off-label">OFF</span>
|
||||
</span>
|
||||
</td>
|
||||
<td></td>
|
||||
<td v-if="group=='ao'" class="ao">
|
||||
<span>{{item.value}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="do-container">
|
||||
<div class="io-buttons" v-if="group=='do'">
|
||||
<button :class="{forced: item.forceZero}">0</button>
|
||||
<button :class="{forced: item.forceOne}">1</button>
|
||||
</div>
|
||||
<input v-model="item.forcedValue" v-if="group=='ao'" />
|
||||
<button class="btn-force" v-if="item.isForced">
|
||||
<i class="fa fa-times" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<script src="./output-row-item.ts" lang="ts">
|
||||
import input from '../input/input.vue';
|
||||
</script>
|
||||
+76
@@ -10,5 +10,81 @@ td {
|
||||
&.force {
|
||||
width: 130px;
|
||||
max-width: 130px;
|
||||
|
||||
input {
|
||||
max-width: 100px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
&.ai {
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
span {
|
||||
margin: 0 20px 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.do-container {
|
||||
width: 130px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.io-buttons {
|
||||
box-sizing: border-box;
|
||||
width: 86px;
|
||||
height: 40px;
|
||||
border-radius: 40px;
|
||||
background-color: #545454;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: @light-grey-blue;
|
||||
color: #fff;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.19);
|
||||
|
||||
&.forced {
|
||||
background: @clear-blue;
|
||||
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
&.btn-force {
|
||||
background: @scarlet;
|
||||
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 84px;
|
||||
height: 48px;
|
||||
background-color: #dddddd;
|
||||
box-shadow: inset 0 1px 3px 0 @black-50;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding: 0 10px;
|
||||
color: #4b4b4b;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+8
-1
@@ -10,11 +10,14 @@ export default class OutputTable extends Vue {
|
||||
pinned = [];
|
||||
|
||||
|
||||
pin(item: server.channel) {
|
||||
pin(item: server.channel, group: string) {
|
||||
let found = this.pinned.findIndex(i => i == item);
|
||||
if (found >= 0) this.pinned.splice(found, 1);
|
||||
else
|
||||
this.pinned.push(item);
|
||||
|
||||
if (group)
|
||||
Vue.set(item, '__group', group);
|
||||
}
|
||||
|
||||
isPinned(item: server.channel): boolean {
|
||||
@@ -24,4 +27,8 @@ export default class OutputTable extends Vue {
|
||||
get items(): server.channels {
|
||||
return store.state.underTheHood.ioChannels;
|
||||
}
|
||||
|
||||
get config(): { [id: string]: number[] } {
|
||||
return store.state.underTheHood.ioChannelsConfig;
|
||||
}
|
||||
}
|
||||
|
||||
+21
-13
@@ -18,31 +18,39 @@
|
||||
<td colspan="6">{{'pinned' | localize('Pinned')}}</td>
|
||||
</tr>
|
||||
<output-row
|
||||
:group="item.__group"
|
||||
@click="pin(item)"
|
||||
:pinned="isPinned(item)"
|
||||
:item="item"
|
||||
v-for="(item, index) of pinned"
|
||||
:key="`pinned-${idx}-${index}`"
|
||||
:key="`pinned-${index}`"
|
||||
></output-row>
|
||||
</template>
|
||||
|
||||
<template v-for="(group, idx) in Object.keys(items)">
|
||||
<tr class="group-row" :key="`h-${idx}`">
|
||||
<td colspan="6">{{group | localize(group)}}</td>
|
||||
</tr>
|
||||
<template v-for="(group, idx) in ['do','ao']">
|
||||
<template v-for="(bankid, idx2) in config[group]">
|
||||
<tr class="group-row" :key="`h-${idx}-${idx2}`">
|
||||
<td colspan="6">{{ `${group} ${bankid}`}}</td>
|
||||
</tr>
|
||||
|
||||
<output-row
|
||||
@click="pin(item)"
|
||||
:pinned="isPinned(item)"
|
||||
:item="item"
|
||||
:id="`output-${group}`"
|
||||
v-for="(item, index) of items[group]"
|
||||
:key="`h-${idx}-${index}`"
|
||||
></output-row>
|
||||
<output-row
|
||||
:group="group"
|
||||
@click="pin(item, group)"
|
||||
:pinned="isPinned(item)"
|
||||
:item="item"
|
||||
:id="`output-${group}`"
|
||||
v-for="(item, index) of items[group].filter(i => i.bank == bankid)"
|
||||
:key="`h-${idx}-${idx2}-${index}`"
|
||||
></output-row>
|
||||
</template>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "output.less";
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
}
|
||||
|
||||
.table-container {
|
||||
height: 600px;
|
||||
height: 700px;
|
||||
|
||||
tr.group-row {
|
||||
height: 64px;
|
||||
|
||||
Reference in New Issue
Block a user