Merge remote-tracking branch 'origin/develop' into new/UnderTheHood

This commit is contained in:
Thermo_SIM
2021-02-04 17:41:42 +01:00
8 changed files with 133 additions and 21 deletions
@@ -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 {
@@ -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,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;
}
@@ -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>
@@ -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;
}
}
}
@@ -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;
}
}
@@ -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;