modale termo e misure, tab con validazione

This commit is contained in:
=
2021-02-26 19:49:35 +01:00
parent d4cfe8d27c
commit 5a0518af42
11 changed files with 147 additions and 89 deletions
@@ -12,14 +12,14 @@
width: 100vw;
height: 100vh;
.notes_textarea{
.notes_textarea {
box-sizing: border-box;
resize: none;
display: block;
border-radius: 2px;
border: solid 1px #dfdfdf;
height: 120px;
font-family: 'Work Sans', sans-serif;
font-family: "Work Sans", sans-serif;
color: #4b4b4b;
font-size: 16px;
background-color: #f8f8f8;
@@ -32,7 +32,7 @@
}
}
.select_folder{
.select_folder {
height: 48px;
background-color: #fff;
padding: 0 20px;
@@ -51,7 +51,7 @@
cursor: pointer;
}
.description_lbl{
.description_lbl {
margin-top: 22px;
font-size: 14px;
color: #878787;
@@ -79,6 +79,10 @@
font-weight: bold;
border-top: 2px solid #002680;
}
&.error {
border-top: 4px solid #d0021b;
}
}
}
@@ -96,7 +100,7 @@
height: 980px;
section.body {
height: calc(~'100% - 66px');
height: calc(~"100% - 66px");
section {
height: 100%;
@@ -106,8 +110,8 @@
padding: 14px;
display: flex;
justify-content: flex-start;
width: calc(~'100% - 28px');
height: calc(~'100% - 28px - 82px');
width: calc(~"100% - 28px");
height: calc(~"100% - 28px - 82px");
.auto {
overflow-y: auto;
@@ -133,7 +137,7 @@
margin-left: 0px;
}
.notEnabled{
.notEnabled {
position: absolute;
top: 0;
left: 0;
@@ -146,12 +150,11 @@
display: flex;
justify-content: center;
align-items: center;
&.small{
&.small {
margin-top: 55px;
height: 90%;
}
}
}
article {
@@ -161,7 +164,7 @@
// align-items: center;
position: relative;
.notEnabled{
.notEnabled {
position: absolute;
top: 0;
left: 0;
@@ -187,7 +190,6 @@
justify-content: space-evenly;
align-items: center;
img {
flex-shrink: 0;
width: 215px;
@@ -199,7 +201,6 @@
.imgborder {
border: 1px solid @color-darkish-blue;
}
}
.svg-area {
@@ -211,7 +212,7 @@
flex: 1;
flex-flow: column;
align-items: center;
.small-img{
.small-img {
position: absolute;
right: 0;
bottom: 0;
@@ -219,22 +220,22 @@
max-height: 200px;
}
.ventosa{
color: #FFFF;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
.ventosa {
color: #ffff;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.volantino{
.volantino {
height: 48px;
width: 48px;
position: absolute;
bottom: 101px;
left: 100px;
}
.quota-volantino{
.quota-volantino {
height: 48px;
width: 169px;
position: absolute;
@@ -244,7 +245,7 @@
align-items: center;
font-size: 1.2em;
}
.quota-caricatore{
.quota-caricatore {
height: 48px;
width: 169px;
position: absolute;
@@ -255,7 +256,7 @@
justify-content: flex-end;
font-size: 1.2em;
}
.load-label{
.load-label {
width: 100%;
text-align: center;
font-size: 2em;
@@ -278,7 +279,7 @@
position: absolute;
background-color: white;
&.noteditable{
&.noteditable {
border-radius: 0;
border: none;
padding: 4px 2px;
@@ -290,7 +291,7 @@
color: white;
}
&.error{
&.error {
border-color: #d0021b;
}
@@ -319,9 +320,7 @@
align-items: center;
justify-content: flex-end;
}
}
}
img {
@@ -353,13 +352,11 @@
}
}
.divider {
width: 100%;
height: 20px;
}
.modal-footer-navigator {
position: absolute;
bottom: 0;
@@ -378,7 +375,6 @@
grid-template-columns: 40px 1fr;
&.current {
.background-top,
.background-bottom {
background-color: #d3d3d3;
@@ -389,11 +385,11 @@
}
.background-top {
box-shadow: -3px 5px 5px rgba(0, 0, 0, .2) inset;
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2) inset;
}
.background-bottom {
box-shadow: -3px -5px 5px rgba(0, 0, 0, .2) inset;
box-shadow: -3px -5px 5px rgba(0, 0, 0, 0.2) inset;
}
}
@@ -414,11 +410,11 @@
border-radius: 7px;
&.fa-check-circle {
color: #90BF3D;
color: #90bf3d;
}
&.fa-check-circle.undone-step {
color: #1791FF;
color: #1791ff;
}
}
@@ -430,7 +426,6 @@
align-items: center;
font-size: 14px;
font-weight: bold;
;
}
label {
@@ -449,7 +444,6 @@
font-weight: bold;
color: darkblue;
}
}
.modal.setup-info {
@@ -464,9 +458,9 @@
height: 100%;
.Rectangle {
width: calc(~'100% - 200px');
height: calc(~'100% - 200px');
background-color: #BBBCBC;
width: calc(~"100% - 200px");
height: calc(~"100% - 200px");
background-color: #bbbcbc;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr 1fr;
@@ -474,7 +468,6 @@
justify-items: center;
padding: 100px;
}
}
}
@@ -514,11 +507,9 @@
grid-row: 2;
z-index: 2;
margin: auto;
}
i {
i {
position: absolute;
bottom: 6px;
left: 93px;
@@ -527,11 +518,11 @@
font-size: 36px;
&.fa-check-circle {
color: #90BF3D;
color: #90bf3d;
}
&.fa-check-circle.undone-step {
color: #1791FF;
color: #1791ff;
}
}
@@ -539,7 +530,6 @@
.background-top,
.background-bottom {
position: absolute;
left: 0;
width: 100%;
@@ -570,8 +560,6 @@
bottom: 0;
transform: skewX(-20deg);
}
}
article {
@@ -580,7 +568,6 @@ article {
}
}
.box {
margin-bottom: 20px;
box-sizing: border-box;
@@ -655,16 +642,11 @@ article {
text-align: center;
color: @color-darkish-blue;
}
}
}
.setup-play {
cursor: pointer;
margin: auto;
display: flex;
}
}
+10 -7
View File
@@ -17,7 +17,7 @@
border-radius: 2px;
border: solid 1px #dfdfdf;
height: 120px;
font-family: 'Work Sans', sans-serif;
font-family: "Work Sans", sans-serif;
color: #4b4b4b;
font-size: 16px;
background-color: #f8f8f8;
@@ -74,6 +74,9 @@
font-weight: bold;
border-top: 2px solid #002680;
}
.setup .tab-header button.error {
border-top: 4px solid #d0021b;
}
.setup hr {
flex-shrink: 0;
background-color: #979797;
@@ -197,7 +200,7 @@
max-height: 200px;
}
.setup .modal section.body section article .svg-area .ventosa {
color: #FFFF;
color: #ffff;
display: flex;
justify-content: center;
align-items: center;
@@ -364,10 +367,10 @@
border-radius: 7px;
}
.setup .modal-footer-navigator .setup-button i.fa-check-circle {
color: #90BF3D;
color: #90bf3d;
}
.setup .modal-footer-navigator .setup-button i.fa-check-circle.undone-step {
color: #1791FF;
color: #1791ff;
}
.setup .modal-footer-navigator .setup-button span,
.setup .modal-footer-navigator .setup-button label {
@@ -403,7 +406,7 @@
.modal.setup-info section .Rectangle {
width: calc(100% - 200px);
height: calc(100% - 200px);
background-color: #BBBCBC;
background-color: #bbbcbc;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr 1fr;
@@ -455,10 +458,10 @@
font-size: 36px;
}
.setup-button i.fa-check-circle {
color: #90BF3D;
color: #90bf3d;
}
.setup-button i.fa-check-circle.undone-step {
color: #1791FF;
color: #1791ff;
}
.setup-button .background-top,
.setup-button .background-bottom {
@@ -2,7 +2,7 @@
"env": "development",
"api": {
"enabled": true,
"apiServerUrl": "http://localhost:9000/"
"apiServerUrl": "http://seriate.steamware.net:9000/"
},
"allUIVisible": false
}
+1 -1
View File
@@ -13,7 +13,7 @@
<script src="Scripts/jquery.mousewheel.js"></script>
<script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
<script src="Scripts/raphael-2.1.4.min.js"></script>
<script src="http://localhost:9000//signalr/hubs" async></script>
<script src="http://seriate.steamware.net:9000//signalr/hubs" async></script>
<link href="assets/styles/style.css" rel="stylesheet" />
</head>
@@ -40,6 +40,35 @@ export default class ShowCicloInfo extends Vue {
};
get formingHasErrors() {
return (this.recipe.cycle_forming_type.status.visible && this.recipe.cycle_forming_type.status.hasError) ||
(this.recipe.cycle_forming_pause_cycle.status.visible && this.recipe.cycle_forming_pause_cycle.status.hasError) ||
(this.recipe.cycle_forming_cooling_enabled.status.visible && this.recipe.cycle_forming_cooling_enabled.status.hasError) ||
(this.recipe.cycle_forming_blowingbox_enabled.status.visible && this.recipe.cycle_forming_blowingbox_enabled.status.hasError) ||
(this.recipe.cycle_acrylicframe_enabled.status.visible && this.recipe.cycle_acrylicframe_enabled.status.hasError) ||
(this.recipe.cycle_acrylicframe_time.status.visible && this.recipe.cycle_acrylicframe_time.status.hasError) ||
(this.recipe.cycle_upperoverheating_enabled.status.visible && this.recipe.cycle_upperoverheating_enabled.status.hasError) ||
(this.recipe.cycle_upperoverheating_time.status.visible && this.recipe.cycle_upperoverheating_time.status.hasError) ||
(this.recipe.cycle_crystallisation_type.status.visible && this.recipe.cycle_crystallisation_type.status.hasError) ||
(this.recipe.cycle_crystallisation_time.status.visible && this.recipe.cycle_crystallisation_time.status.hasError);
}
get loaderHasErrors() {
return (this.recipe.cycle_loader_enable.status.visible && this.recipe.cycle_loader_enable.status.hasError) ||
(this.recipe.cycle_loader_lifter_lowerposition_delay.status.visible && this.recipe.cycle_loader_lifter_lowerposition_delay.status.hasError) ||
(this.recipe.cycle_loader_lifter_upperposition_delay.status.visible && this.recipe.cycle_loader_lifter_upperposition_delay.status.hasError) ||
(this.recipe.cycle_loader_split_sheet_time.status.visible && this.recipe.cycle_loader_split_sheet_time.status.hasError) ||
(this.recipe.cycle_loader_ejector_position.status.visible && this.recipe.cycle_loader_ejector_position.status.hasError) ||
(this.recipe.cycle_loader_pallet_height.status.visible && this.recipe.cycle_loader_pallet_height.status.hasError) ||
(this.recipe.cycle_loader_center_x.status.visible && this.recipe.cycle_loader_center_x.status.hasError) ||
(this.recipe.cycle_loader_center_y.status.visible && this.recipe.cycle_loader_center_y.status.hasError) ||
(this.recipe.cycle_loader_checktichness_enabled.status.visible && this.recipe.cycle_loader_checktichness_enabled.status.hasError) ||
(this.recipe.cycle_loader_suckers_vacuum.status.visible && this.recipe.cycle_loader_suckers_vacuum.status.hasError) ||
(this.recipe.cycle_loader_ionizer_enabled.status.visible && this.recipe.cycle_loader_ionizer_enabled.status.hasError) ||
(this.recipe.cycle_loader_manualunloading_enabled.status.visible && this.recipe.cycle_loader_manualunloading_enabled.status.hasError);
}
get payload() {
return {
cycle_forming_type: this.recipe.cycle_forming_type,
@@ -75,7 +104,7 @@ export default class ShowCicloInfo extends Vue {
debouncedRecipeSave = debounce(async () => await recipeService.Update(this.payload), 200);
hasErrors() {
let payload = this.recipe;
let errors = false;
@@ -107,9 +136,9 @@ export default class ShowCicloInfo extends Vue {
}
return result;
}
takeScreenshot() {
messageService.publishToChannel("take-screenshot");
messageService.publishToChannel("take-screenshot");
}
isLoaderEnabled() {
@@ -146,7 +175,7 @@ export default class ShowCicloInfo extends Vue {
async conferma() {
// recipeActions.setCurrent(store, this.recipe);
this.isLoading = true;
await recipeService.Confirm('Cycle');
this.isLoading = false;
@@ -3,11 +3,11 @@
<modal type="ciclo-info">
<div class="tab-header" slot="header-buttons">
<button
:class="{'active':show=='forming'}"
:class="{'active':show=='forming', error:formingHasErrors}"
@click="show='forming'"
>{{'cycle' | localize('Ciclo di formatura')}}</button>
<button
:class="{'active':show=='loader'}"
:class="{'active':show=='loader', error:loaderHasErrors}"
@click="show='loader'"
v-if="isLoaderEnabled()"
>{{'loader' | localize('Caricatore')}}</button>
@@ -23,7 +23,9 @@
<cicloformatura v-if="show=='forming'" :recipe="recipe"></cicloformatura>
<caricatore v-if="show=='loader'" :recipe="recipe"></caricatore>
<footer>
<div v-if="isLoading"><i class="loader fa fa-circle-o-notch fa-spin"></i></div>
<div v-if="isLoading">
<i class="loader fa fa-circle-o-notch fa-spin"></i>
</div>
<button
class="btn"
@click="annulla()"
@@ -40,7 +40,39 @@ export default class ShowQuoteVelocitaInfo extends Vue {
this.show = this.value;
}
get mouldHasErrors() {
return (this.recipe.positions_mould_lower_position.status.visible && this.recipe.positions_mould_lower_position.status.hasError) ||
(this.recipe.positions_mould_lower_speed.status.visible && this.recipe.positions_mould_lower_speed.status.hasError) ||
(this.recipe.positions_mould_intermediate_position.status.visible && this.recipe.positions_mould_intermediate_position.status.hasError) ||
(this.recipe.positions_mould_upper_position.status.visible && this.recipe.positions_mould_upper_position.status.hasError) ||
(this.recipe.positions_mould_upper_speed.status.visible && this.recipe.positions_mould_upper_speed.status.hasError) ||
(this.recipe.positions_mould_upperdeceleration_position.status.visible && this.recipe.positions_mould_upperdeceleration_position.status.hasError) ||
(this.recipe.positions_mould_upperdeceleration_speed.status.visible && this.recipe.positions_mould_upperdeceleration_speed.status.hasError) ||
(this.recipe.positions_mould_lowerdeceleration_position.status.visible && this.recipe.positions_mould_lowerdeceleration_position.status.hasError) ||
(this.recipe.positions_mould_lowerdeceleration_speed.status.visible && this.recipe.positions_mould_lowerdeceleration_speed.status.hasError)
}
get frameHasErrors() {
return (this.recipe.positions_frame_lower_position.status.visible && this.recipe.positions_frame_lower_position.status.hasError) ||
(this.recipe.positions_frame_lower_speed.status.visible && this.recipe.positions_frame_lower_speed.status.hasError) ||
(this.recipe.positions_frame_upper_position.status.visible && this.recipe.positions_frame_upper_position.status.hasError) ||
(this.recipe.positions_frame_upper_speed.status.visible && this.recipe.positions_frame_upper_speed.status.hasError) ||
(this.recipe.positions_frame_intermediate_position.status.visible && this.recipe.positions_frame_intermediate_position.status.hasError) ||
(this.recipe.positions_frame_intermediate_speed.status.visible && this.recipe.positions_frame_intermediate_speed.status.hasError) ||
(this.recipe.positions_frame_unload_position.status.visible && this.recipe.positions_frame_unload_position.status.hasError)
}
get upperplateHasErrors() {
return (this.recipe.positions_upperplate_lower_position.status.visible && this.recipe.positions_upperplate_lower_position.status.hasError) ||
(this.recipe.positions_upperplate_lower_speed.status.visible && this.recipe.positions_upperplate_lower_speed.status.hasError) ||
(this.recipe.positions_upperplate_upper_position.status.visible && this.recipe.positions_upperplate_upper_position.status.hasError) ||
(this.recipe.positions_upperplate_upper_speed.status.visible && this.recipe.positions_upperplate_upper_speed.status.hasError) ||
(this.recipe.positions_upperplate_upperdeceleration_position.status.visible && this.recipe.positions_upperplate_upperdeceleration_position.status.hasError) ||
(this.recipe.positions_upperplate_upperdeceleration_speed.status.visible && this.recipe.positions_upperplate_upperdeceleration_speed.status.hasError) ||
(this.recipe.positions_upperplate_lowerdeceleration_position.status.visible && this.recipe.positions_upperplate_lowerdeceleration_position.status.hasError) ||
(this.recipe.positions_upperplate_lowerdeceleration_speed.status.visible && this.recipe.positions_upperplate_lowerdeceleration_speed.status.hasError);
}
async annulla() {
this.isLoading = true;
@@ -103,7 +135,7 @@ export default class ShowQuoteVelocitaInfo extends Vue {
if (el.status.visible && el.status.enabled)
if (el.setpointHMI != el.setpointPLC) result = true;
}
return result;
}
@@ -115,11 +147,11 @@ export default class ShowQuoteVelocitaInfo extends Vue {
return result;
}
takeScreenshot() {
messageService.publishToChannel("take-screenshot");
messageService.publishToChannel("take-screenshot");
}
isMouldEnabled() {
return this.hasEnabledFields(
@@ -3,17 +3,17 @@
<modal type="quote-velocita-info">
<div class="tab-header" slot="header-buttons">
<button
:class="{'active':show == 'mould'}"
:class="{'active':show == 'mould', error:mouldHasErrors}"
@click="show='mould'"
v-if="isMouldEnabled()"
>{{'mould' | localize("Stampo")}}</button>
<button
:class="{'active':show == 'frame'}"
:class="{'active':show == 'frame',error:frameHasErrors}"
@click="show='frame'"
v-if="isFrameEnabled()"
>{{'frame' | localize("Cornice")}}</button>
<button
:class="{'active':show == 'upperplate'}"
:class="{'active':show == 'upperplate',error:upperplateHasErrors}"
@click="show='upperplate'"
v-if="isUpperplateEnabled()"
>{{'upperplate' | localize("Controstampo")}}</button>
@@ -26,11 +26,13 @@
<i class="fa fa-remove"></i>
</button>
</div>
<salita-stampo v-if="show=='mould'" :recipe="recipe"></salita-stampo>
<discesacornice v-if="show=='frame'" :recipe="recipe"></discesacornice>
<controstampo v-if="show=='upperplate'" :recipe="recipe"></controstampo>
<salita-stampo v-show="show=='mould'" :recipe="recipe"></salita-stampo>
<discesacornice v-show="show=='frame'" :recipe="recipe"></discesacornice>
<controstampo v-show="show=='upperplate'" :recipe="recipe"></controstampo>
<footer>
<div v-if="isLoading"><i class="loader fa fa-circle-o-notch fa-spin"></i></div>
<div v-if="isLoading">
<i class="loader fa fa-circle-o-notch fa-spin"></i>
</div>
<button
class="btn"
@click="annulla()"
@@ -11,7 +11,7 @@
transform: translateX(-36px) translateY(-12px);
}
.modal.prophetimages .measure > span {
font-size: 18px;
font-size: 14px;
font-weight: bold;
color: #002680;
position: absolute;
@@ -20,6 +20,7 @@
left: 6px;
right: 6px;
text-align: right;
line-height: 18px;
}
.modal.prophetimages header {
padding: 0 16px;
@@ -7,7 +7,7 @@
background-size: cover;
transform: translateX(-36px) translateY(-12px);
> span {
font-size: 18px;
font-size: 14px;
font-weight: bold;
color: #002680;
position: absolute;
@@ -16,6 +16,7 @@
left: 6px;
right: 6px;
text-align: right;
line-height: 18px;
}
}
@@ -60,11 +60,17 @@ export default class ThermoModal extends Vue {
await warmersService.SetMeasurePoints(x, y);
this.measurePoints.push({ x, y, temperature: 0 })
this.reloadMeasuresDelayed(this.images[this.selectedImage]);
this.reloadMeasuresDelayed(this.images[this.selectedImage], this.measurePoints);
}
@Watch("selectedImage")
reloadMeasuresDelayed = debounce(async (image) => this.measurePoints = await warmersService.GetMeasurePoints(image), 500);
reloadMeasuresDelayed = debounce(async (image, points) => {
let result = await warmersService.GetMeasurePoints(image);
for (const p of result) {
points[p.id].temperature = p.temperature;
}
}, 500);