Merge remote-tracking branch 'CMS/feature/sottocofano' into feature/sottocofano

This commit is contained in:
=
2021-02-05 13:10:12 +01:00
14 changed files with 189 additions and 643 deletions
@@ -1,9 +1,5 @@
@import "../../../../variable.less";
span {
display: inline-block;
}
.log-assi-table {
width: 1384px;
height: 886px;
@@ -1,7 +1,5 @@
@import "../../../variable.less";
span {
display: inline-block;
}
.column-page-header {
width: 672px;
@@ -1,9 +1,25 @@
@import "../../../variable.less";
span {
display: inline-block;
.button-details {
width: 93px;
padding: 14px 0px 13px 0px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 2px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
cursor: pointer;
> label {
font-size: 18px;
font-weight: 500;
color: @very-light-pink;
}
}
.log-ciclo-automatico-table {
tbody tr:nth-child(odd) {
background-color: @fill-under-grey-3-2;
@@ -1,6 +1,6 @@
<template>
<div class="main-container">
<div class="column-page">
<div class="column-page-one-column">
<LogCicloAutomaticoTable></LogCicloAutomaticoTable>
</div>
</div>
@@ -1,186 +1,30 @@
@import "../../../../variable.less";
span {
display: inline-block;
.date {
width: 212px;
}
.log-ciclo-automatico-table {
width: 1384px;
height: 886px;
margin: 20px 20px 0 20px;
thead {
height: 34px;
opacity: 0.5;
background-color: @fill-under-grey-1-2;
}
th {
display: inline-block;
}
tbody {
overflow-y: scroll;
height: 752px;
tr {
display: inline-block;
width: 1358px;
height: 64px;
float: left;
&-inner {
width: 1358px;
height: 64px;
margin: 34px 26px 0 0;
padding: 0 2px 0 10px;
}
}
}
}
.date-ciclo {
width: 63px;
height: 12px;
margin: 10px 149px 12px 9px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 0.86;
letter-spacing: normal;
color: @white;
text-align: left !important;
float: left;
&-inner {
width: 177px;
height: 16px;
margin: 24px 0px 0px 10px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
float: left;
text-align: left;
color: @very-light-pink;
}
}
.class-ciclo {
width: 63px;
height: 12px;
margin: 10px 36px 12px 0px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 0.86;
letter-spacing: normal;
text-align: center;
float: left;
color: @white;
&-inner {
width: 35px;
height: 16px;
margin: 24px 0px 0px 47px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
float: left;
color: @very-light-pink;
}
}
.recipe-ciclo {
width: 63px;
height: 12px;
margin: 10px 108px 12px 0px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 0.86;
letter-spacing: normal;
float: left;
color: @white;
&-inner {
width: 121px;
height: 16px;
margin: 24px 0px 0px 51px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
float: left;
color: @very-light-pink;
}
}
.message-ciclo {
width: 114px;
height: 12px;
margin: 10px 0px 12px 0px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 0.86;
letter-spacing: normal;
float: left;
text-align: left !important;
color: @white;
&-inner {
.message {
width: 751px;
height: 64px;
margin: 18px 0px 0px 50px;
}
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
float: left;
text-align: initial;
color: @very-light-pink;
th,
td {
&.ciclo-date {
width: 212px;
max-width: 212px;
}
&.ciclo-message {
width: 751px;
max-width: 751px;
}
&.ciclo-recipe {
width: 171px;
max-width: 171px;
}
}
.button-details {
width: 99px;
float: right;
display: flex;
justify-content: center;
padding: 14px 0px 13px 0px;
margin: 8px 8px 8px 8px;
object-fit: contain;
border-radius: 2px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
cursor: pointer;
&-label {
width: 62px;
height: 21px;
object-fit: contain;
font-size: 18px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: @very-light-pink;
}
}
@@ -1,40 +1,29 @@
<template>
<div>
<table class="log-ciclo-automatico-table">
<div class="one-column-table-container scrollable">
<table>
<thead>
<tr>
<th class="date-ciclo">Date</th>
<th class="class-ciclo">Class</th>
<th class="recipe-ciclo">Recipe</th>
<th class="message-ciclo">Message</th>
<th class="ciclo-date">Date</th>
<th>Class</th>
<th class="ciclo-recipe">Recipe</th>
<th class="ciclo-message">Message</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(item, i) of rowData" :key="i" class="tr-inner">
<td>
<span class="date-ciclo-inner">
{{ item.date }}
</span>
</td>
<td>
<span class="class-ciclo-inner">
{{ item.class }}
</span>
</td>
<td>
<span class="recipe-ciclo-inner">
{{ item.recipe }}
</span>
</td>
<td>
<span class="message-ciclo-inner">
{{ item.message }}
</span>
<span class="button-details" @click="goToDetails()">
<span class="button-details-label">Details</span>
</span>
</td>
</tr>
<template v-for="(item, idx) in rowData">
<tr :key="`c-${idx}`">
<td>{{ item.date }}</td>
<td>{{ item.class }}</td>
<td>{{ item.recipe }}</td>
<td>{{ item.message }}</td>
<td>
<span class="button-details">
<label>Details</label>
</span>
</td>
</tr>
</template>
</tbody>
</table>
</div>
@@ -1,6 +1,6 @@
<template>
<div class="main-container">
<div class="column-page">
<div class="column-page-one-column">
<LogMisurazioniTable></LogMisurazioniTable>
</div>
</div>
@@ -1,163 +1,23 @@
@import "../../../../variable.less";
span {
display: inline-block;
}
.log-misurazioni-table {
width: 1384px;
height: 886px;
margin: 20px 20px 0 20px;
thead {
height: 34px;
opacity: 0.5;
background-color: @fill-under-grey-1-2;
th,
td {
&.misurazioni-value {
width: 322px;
max-width: 322px;
}
th {
display: inline-block;
&.misurazioni-recipe {
width: 539px;
max-width: 539px;
}
tbody tr:nth-child(odd) {
background-color: @fill-under-grey-3-2;
&.misurazioni-date {
width: 313px;
max-width: 313px;
}
tbody tr:nth-child(even) {
background-color: @fill-under-grey-1-2;
}
tbody {
overflow-y: scroll;
height: 752px;
tr {
display: inline-block;
width: 1358px;
height: 64px;
float: left;
&-inner {
width: 1358px;
height: 64px;
margin: 34px 26px 0 0;
padding: 0 2px 0 10px;
}
}
&.misurazioni-type {
width: 187px;
max-width:187px;
}
}
.date-misurazioni {
width: 63px;
height: 12px;
margin: 10px 0px 12px 9px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 0.86;
letter-spacing: normal;
color: @white;
text-align: left !important;
float: left;
&-inner {
width: 164px;
height: 16px;
margin: 24px 0px 24px 10px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left !important;
float: left;
color: @very-light-pink;
}
}
.recipe-misurazioni {
width: 63px;
height: 12px;
margin: 10px 0px 12px 267px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 0.86;
letter-spacing: normal;
text-align: left;
float: left;
color: @white;
&-inner {
width: 121px;
height: 16px;
margin: 24px 0px 24px 139px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center !important;
float: left;
color: @very-light-pink;
}
}
.type-misurazioni {
width: 63px;
height: 12px;
margin: 10px 0 12px 448px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 0.86;
letter-spacing: normal;
text-align: left !important;
float: left;
color: @white;
&-inner {
width: 48px;
height: 16px;
margin: 24px 0px 24px 410px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
float: left;
color: @very-light-pink;
}
}
.value-misurazioni {
width: 63px;
height: 12px;
margin: 10px 268px 12px 124px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 0.86;
letter-spacing: normal;
text-align: left !important;
color: @white;
&-inner {
width: 253px;
height: 16px;
margin: 24px 69px 24px 142px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
float: left;
text-align: initial;
color: @very-light-pink;
}
}
@@ -1,33 +1,33 @@
<template>
<div>
<table class="log-misurazioni-table">
<div class="one-column-table-container scrollable">
<table>
<thead>
<tr>
<th class="date-misurazioni">Date</th>
<th class="recipe-misurazioni">Recipe</th>
<th class="type-misurazioni">Type</th>
<th class="value-misurazioni">Value</th>
<th class="misurazioni-date">Date</th>
<th class="misurazioni-recipe">Recipe</th>
<th class="misurazioni-type">Type</th>
<th class="misurazioni-value">Value</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, i) of rowData" :key="i" class="tr-inner">
<td>
<span class="date-misurazioni-inner">
<span>
{{ item.date }}
</span>
</td>
<td>
<span class="recipe-misurazioni-inner">
<span>
{{ item.recipe }}
</span>
</td>
<td>
<span class="type-misurazioni-inner">
<span>
{{ item.type }}
</span>
</td>
<td>
<span class="value-misurazioni-inner">
<span>
{{ item.value }}
</span>
</td>
@@ -1,6 +1,6 @@
<template>
<div class="main-container">
<div class="column-page">
<div class="column-page-one-column">
<RiscaldiTable></RiscaldiTable>
</div>
</div>
@@ -1,268 +1,71 @@
@import "../../../../variable.less";
span {
display: inline-block;
}
.riscaldi-table {
width: 1384px;
height: 886px;
margin: 20px 20px 0 20px;
thead {
height: 34px;
opacity: 0.5;
background-color: @fill-under-grey-1-2;
th,
td {
&.riscaldi-status {
width: 435px;
max-width: 435px;
padding: 0 0 0 38px;
}
th {
display: inline-block;
&.riscaldi-set {
width: 378px;
max-width: 378px;
}
tbody {
overflow-y: scroll;
height: 752px;
tr:nth-child(odd) {
background-color: @fill-under-grey-3-2;
}
tr {
display: inline-block;
width: 1358px;
height: 64px;
&-inner {
width: 1358px;
height: 64px;
margin: 34px 26px 0 0;
padding: 0 2px 0 10px;
}
}
&.riscaldi-cell-id {
width: 254px;
max-width: 254px;
}
&.riscaldi-current {
width: 308px;
max-width: 308px;
}
}
.cell-id {
height: 16px;
margin: 10px 0px 12px 9px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
float: left;
color: @very-light-pink;
&-inner {
width: 6px;
height: 16px;
margin: 24px 0px 24px 10px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
float: left;
color: @very-light-pink;
}
}
.current {
width: 63px;
height: 12px;
margin: 10px 0px 12px 173px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 0.86;
letter-spacing: normal;
text-align: center;
float: left;
color: @white;
&-inner {
width: 44px;
height: 16px;
margin: 24px 0px 24px 216px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
float: left;
color: @very-light-pink;
}
}
.set {
width: 63px;
height: 12px;
margin: 10px 0px 12px 226px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 0.86;
letter-spacing: normal;
text-align: center;
float: left;
color: @white;
&-inner {
width: 21px;
height: 16px;
margin: 24px 0px 24px 260px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: @very-light-pink;
}
}
.status {
width: 63px;
height: 12px;
margin: 10px 0 12px 325px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 0.86;
letter-spacing: normal;
text-align: center;
float: left;
color: @white;
}
.button-details {
width: 93px;
float: right;
padding: 14px 0px 13px 0px;
margin: 8px 8px 8px 8px;
object-fit: contain;
.status-buttons {
padding: 3px 16px;
border-radius: 2px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
cursor: pointer;
&-label {
width: 62px;
height: 21px;
object-fit: contain;
}
font-size: 18px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: @very-light-pink;
}
label {
margin: 3px 16px 3px 16px;
}
.ok-button {
width: 55px;
height: 25px;
margin: 20px 263px 19px 336px;
padding: 3px 16px;
border-radius: 2px;
background-color: @booger;
&-label {
width: 23px;
height: 19px;
> label {
text-shadow: 0 0 4px @black-50;
margin: 3px 16px 3px 16px;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: @very-light-pink;
}
}
.broken-button {
width: 87px;
height: 25px;
margin: 20px 247px 19px 320px;
padding: 3px 16px;
border-radius: 2px;
background-color: @scarlet;
&-label {
width: 55px;
height: 19px;
margin: 3px 16px 3px 16px;
text-shadow: 0 0 4px @black-50;
> label {
text-shadow: 0 0 4px rgb(0 0 0 / 50%);
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: @very-light-pink;
}
}
.error-button {
width: 96px;
height: 25px;
margin: 20px 243px 19px 315px;
padding: 3px 16px;
border-radius: 2px;
background-color: @scarlet;
&-label {
width: 64px;
height: 19px;
margin: 3px 16px 3px 16px;
> label {
text-shadow: 0 0 4px @black-50;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: @very-light-pink;
}
}
.warning-button {
width: 96px;
height: 25px;
margin: 20px 243px 19px 315px;
padding: 3px 16px;
border-radius: 2px;
display: flex;
justify-content: center;
background-color: @macaroni-and-cheese;
&-label {
width: 79px;
height: 19px;
> label {
margin: 3px 0px 3px 0px;
text-shadow: 0 0 4px @black-50;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: @very-light-pink;
}
}
.status-container {
width: 126px;
display: flex;
justify-content: center;
}
@@ -1,50 +1,69 @@
<template>
<div>
<table class="riscaldi-table">
<div class="one-column-table-container scrollable">
<table>
<thead>
<tr>
<th class="cell-id">Cell ID</th>
<th class="current">Current</th>
<th class="set">Set</th>
<th class="status">Status</th>
<th class="riscaldi-cell-id">Cell ID</th>
<th class="riscaldi-current">Current</th>
<th class="riscaldi-set">Set</th>
<th class="riscaldi-status">Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(item, i) of rowData" :key="i" class="tr-inner">
<tr v-for="(item, i) of rowData" :key="i">
<td>
<span class="cell-id-inner">
<span>
{{ item.cellId }}
</span>
</td>
<td>
<span class="current-inner">
<span>
{{ item.current }}
</span>
</td>
<td>
<span class="set-inner">
<span>
{{ item.set }}
</span>
</td>
<td>
<span class="status-inner">
<span v-if="item.status === 'ok'" class="ok-button status-ok">
<span class="ok-button-label">OK</span>
</span>
<span v-else-if="item.status === 'broken'" class="broken-button">
<span class="broken-button-label">Broken</span>
</span>
<span v-else-if="item.status === 'error 23'" class="error-button">
<span class="error-button-label">Error 23</span>
</span>
<span v-else-if="item.status === 'error 12'" class="error-button">
<span class="error-button-label">Error 12</span>
</span>
<span class="status-container">
<span
v-else-if="item.status === 'warning 3'"
class="warning-button"
v-if="item.status === 'ok'"
class="status-buttons ok-button status-ok"
>
<span class="warning-button-label">Warning 3</span>
<label>OK</label>
</span>
</span>
<span>
<span class="status-container">
<span
v-if="item.status === 'broken'"
class="status-buttons broken-button"
>
<label>Broken</label>
</span>
</span>
</span>
<span
v-if="item.status === 'error 23'"
class="status-buttons error-button"
>
<label>Error 23</label>
</span>
<span
v-if="item.status === 'error 12'"
class="status-buttons error-button"
>
<label>Error 12</label>
</span>
<span class="status-container">
<span
v-if="item.status === 'warning 3'"
class="status-buttons warning-button"
>
<label>Warning 3</label>
</span>
</span>
</td>
@@ -5,7 +5,7 @@
@click="go('io')"
:class="{white: this.value == 'io'}"
>{{'i-o' | localize("I/O")}}</div>
<!-- <div
<div
class="rettangle"
@click="go('log-ciclo-automatico')"
:class="{white: this.value == 'log-ciclo-automatico'}"
@@ -15,16 +15,16 @@
@click="go('log-misurazioni')"
:class="{white: this.value == 'log-misurazioni'}"
>{{'log-misurazioni' | localize("Log misurazioni")}}</div>
<div
<!-- <div
class="rettangle"
@click="go('assi')"
:class="{white: this.value == 'assi'}"
>{{'log-assi' | localize('Log assi')}}</div>
>{{'log-assi' | localize('Log assi')}}</div> -->
<div
class="rettangle"
@click="go('riscaldi')"
:class="{white: this.value == 'riscaldi'}"
>{{'riscaldi' | localize("Riscaldi")}}</div>-->
>{{'riscaldi' | localize("Riscaldi")}}</div>
</div>
</template>
<style lang="less">
@@ -128,6 +128,27 @@
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
}
.column-page-one-column {
grid-row: 2;
grid-column: 2;
width: 1384px;
height: 885px;
border-top: @white 2px solid;
background-color: @fill-under-grey-2-2;
display: grid;
> table {
margin: 20px 0 0 20px
}
}
.one-column-table-container {
height: 800px;
margin: 20px 0 0 20px;
> table {
width: -webkit-fill-available;
}
}
.pointer {
cursor: pointer;
}