Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix keyboard behaviour

Browse Source
This commit is contained in:
Samuele E. Locatelli
2020-10-13 10:01:35 +02:00
parent 3c329bb5c8
commit cadf52012c
5 changed files with 170 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Thermo.Active/wwwroot/assets/styles/base/tastierino.less
+34
View File
@@ -29,6 +29,26 @@
color: @color-darkish-blue;
font-size: 20px;
border-radius: 2px;
&.pressed,
&:active:not([disabled]) {
background-image: linear-gradient(to bottom, @color-silver, @color-white2);
border: none !important;
box-shadow: inset @button-shadow !important;
}
&[disabled] {
border-radius: 2px;
border-radius: 2px;
background-color: #dddddd;
background-image: none;
box-shadow: none;
color: @color-warm-grey;
&:hover {
box-shadow: none !important;
}
}
}
.zero {
@@ -102,11 +122,25 @@
.bPunto {
grid-column: 3/4;
grid-row: 4/5;
&.point {
background-image: linear-gradient(to bottom, #1756ad, #002680);
color: white;
}
}
.bDel {
grid-column: 4/5;
grid-row: 1/2;
}
.focus{
position: absolute;
background-image: linear-gradient(to bottom, #1756ad, #002680);
bottom: 6px;
right: 4px;
width: 10px;
height: 10px;
border-radius: 5px;
}
}
}
Thermo.Active/wwwroot/assets/styles/style.css
+29
View File
@@ -4802,6 +4802,22 @@ article .box .body {
font-size: 20px;
border-radius: 2px;
}
.keyboard .mask button.pressed,
.keyboard .mask button:active:not([disabled]) {
background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
border: none !important;
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important;
}
.keyboard .mask button[disabled] {
border-radius: 2px;
background-color: #dddddd;
background-image: none;
box-shadow: none;
color: #878787;
}
.keyboard .mask button[disabled]:hover {
box-shadow: none !important;
}
.keyboard .mask .zero {
grid-column: 1 / span 2;
grid-row: 0.8;
@@ -4861,10 +4877,23 @@ article .box .body {
grid-column: 0.75;
grid-row: 0.8;
}
.keyboard .mask .bPunto.point {
background-image: linear-gradient(to bottom, #1756ad, #002680);
color: white;
}
.keyboard .mask .bDel {
grid-column: 0.8;
grid-row: 0.5;
}
.keyboard .mask .focus {
position: absolute;
background-image: linear-gradient(to bottom, #1756ad, #002680);
bottom: 6px;
right: 4px;
width: 10px;
height: 10px;
border-radius: 5px;
}
.pre_heat {
grid-template-rows: 144px auto auto auto;
grid-template-columns: repeat(6, 16.7%);
Thermo.Active/wwwroot/src/app_modules_thermo/components/KeyboardHelper.ts
+1
View File
@@ -10,6 +10,7 @@ export class KeyboardHelper {
static showKeyboard(x, y, value: Recipe.IValue, component: HTMLInputElement) {
if (KeyboardHelper.currentKeyboard) {
KeyboardHelper.currentKeyboard.focusTo();
KeyboardHelper.currentKeyboard.resetTo(value);
KeyboardHelper.currentKeyboard.positionX = x;
Thermo.Active/wwwroot/src/app_modules_thermo/components/keyboard.ts
+94 -30
View File
@@ -13,62 +13,84 @@ export default class Keyboard extends Vue {
actualValue: Recipe.IValue;
point: string;
point = false;
haspoint = false;
disabledall = false;
addedPoint = true;
focus = false;
@Prop()
value: string;
get Value() {
get Value() {
return this.actualValue.setpointHMI;
}
set Value(v: number) {
try {
let scale = Math.pow(10, this.actualValue.numDec ?? 0);
let result = Math.round(v * scale) / scale;
if (!Number.isNaN(result) && Number.isFinite(result))
this.actualValue.setpointHMI = result;
else
this.actualValue.setpointHMI = v;
} catch {
setValue(v: number) {
if (!Number.isNaN(v) && Number.isFinite(v))
this.actualValue.setpointHMI = v;
}
}
del() {
this.Value = 0;
this.setValue(0);
this.calcDisabled();
}
canc() {
let temp = String(this.Value);
this.Value = Number(temp.slice(0, -1))
let temp = String(this.actualValue.setpointHMI);
temp = temp.slice(0, -1);
if(temp.endsWith('.'))
temp = temp.slice(0, -1);
this.setValue(Number(temp));
this.calcDisabled();
}
add(num: string) {
if (this.point) {
this.point += num;
this.Value = Number(this.point)
} else {
let temp = String(this.Value);
temp += num;
this.Value = Number(temp)
if(this.disabledall) return
if(this.focus)
{
this.focus = false;
this.setValue(Number(num));
return
}
if (this.point) {
this.point = false;
let temp = String(this.actualValue.setpointHMI);
temp += "."+num;
this.setValue(Number(temp));
} else if(this.actualValue.setpointHMI == 0){
this.setValue(Number(num));
}
else {
let temp = String(this.actualValue.setpointHMI);
temp += num;
this.setValue(Number(temp));
}
this.calcDisabled();
}
addpoint() {
if (!this.point) {
this.point = String(this.Value);
this.point += ".";
}
if(this.actualValue.numDec == 0)return
if(String(this.actualValue.setpointHMI).includes(".")) return;
this.point = !this.point;
this.calcDisabled();
}
resetTo(value) {
this.actualValue = null;
this.point = null;
this.actualValue = value;
this.point = false;
if(this.actualValue){
this.calcDisabled();
}
}
focusTo() {
this.focus = true;
}
hide() {
@@ -79,5 +101,47 @@ export default class Keyboard extends Vue {
mounted() {
KeyboardHelper.setCurrentKeyboard(this);
}
countDecimals(value) {
if (Math.floor(value) !== value)
return value.toString().split(".")[1].length || 0;
return 0;
}
countchars(value) {
return value.toString().split(".")[0].length || 0;
}
calcDisabled(){
if(this.actualValue.numDec == 0) {
if(this.focus){
this.disabledall = false;
this.haspoint = true;
}
else{
this.haspoint = true;
this.disabledall = this.countchars(this.actualValue.setpointHMI) >= this.countchars(this.actualValue.range.max);
}
}
else{
if(this.focus){
this.disabledall = false;
this.haspoint = false;
}
else
{
this.haspoint = String(this.actualValue.setpointHMI).includes(".");
if(!this.haspoint && !this.point){
this.disabledall =this.countchars(this.actualValue.setpointHMI) >= this.countchars(this.actualValue.range.max);
}
else{
this.disabledall = this.countDecimals(this.actualValue.setpointHMI) >= this.actualValue.numDec;
}
}
}
}
}
Thermo.Active/wwwroot/src/app_modules_thermo/components/keyboard.vue
+12 -11
View File
@@ -6,44 +6,45 @@
@mousedown.prevent.stop
>
<div class="mask">
<button class="b7" @click="add('7')">
<button class="b7" @click="add('7')" :disabled="disabledall">
<label class="lab">7</label>
</button>
<button class="b8" @click="add('8')">
<button class="b8" @click="add('8')" :disabled="disabledall">
<label class="lab">8</label>
</button>
<button class="b9" @click="add('9')">
<button class="b9" @click="add('9')" :disabled="disabledall">
<label class="lab">9</label>
</button>
<button class="bDel" @click="del()">
<label class="lab">Del</label>
</button>
<button class="b4" @click="add('4')">
<button class="b4" @click="add('4')" :disabled="disabledall">
<label class="lab">4</label>
</button>
<button class="b5" @click="add('5')">
<button class="b5" @click="add('5')" :disabled="disabledall">
<label class="lab">5</label>
</button>
<button class="b6" @click="add('6')">
<button class="b6" @click="add('6')" :disabled="disabledall">
<label class="lab">6</label>
</button>
<button class="bCanc" @click="canc()"></button>
<button class="b1" @click="add('1')">
<button class="b1" @click="add('1')" :disabled="disabledall">
<label class="lab">1</label>
</button>
<button class="b2" @click="add('2')">
<button class="b2" @click="add('2')" :disabled="disabledall">
<label class="lab">2</label>
</button>
<button class="b3" @click="add('3')">
<button class="b3" @click="add('3')" :disabled="disabledall">
<label class="lab">3</label>
</button>
<button class="submit" @click="hide()"></button>
<button class="zero" @click="add('0')">
<button class="zero" @click="add('0')" :disabled="disabledall">
<label class="lab">0</label>
</button>
<button class="bPunto" @click="addpoint()">
<button class="bPunto" :class="{'point':point}" @click="addpoint()" :disabled="haspoint">
<label class="lab">,</label>
</button>
<div v-if="focus" class="focus">&nbsp;</div>
</div>
</div>
</template>