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

queue

Browse Source
This commit is contained in:
Alessandro Francia
2018-09-12 10:17:31 +02:00
parent 18d979c50c
commit 170df80d0a
14 changed files with 648 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step/wwwroot/assets/styles/base/card.less
+6
View File
@@ -841,6 +841,12 @@
border-radius: 2px;
background-color: @color-background-white;
box-shadow: 0 1px 2px 0 @color-black-40;
&.border-green{
border: solid 2px @color-apple-green;
}
&.border-blue{
border: solid 2px @color-clear-blue;
}
.card-element-queue-name{
width: 100%;
display: flex;
Step/wwwroot/assets/styles/base/modals.less
+4 -4
View File
@@ -798,7 +798,7 @@
}
}
.@{modal}.modal-load-program {
.@{modal}.modal-load-program, .@{modal}.modal-add-element-queue {
width: @modal-load-program-width;
height: @modal-load-program-height;
top: calc(~"50%" - @modal-load-program-height / 2);
@@ -830,7 +830,7 @@
color: #fff;
}
}
.modal-load-program-header {
.modal-load-program-header, .modal-add-element-queue-header {
height: 80px;
width: 100%;
display: flex;
@@ -878,7 +878,7 @@
}
}
}
.modal-load-program-body {
.modal-load-program-body, .modal-add-element-queue-body {
height: 631px;
width: 100%;
display: flex;
@@ -1134,7 +1134,7 @@
}
}
}
.modal-load-program-footer {
.modal-load-program-footer, .modal-add-element-queue-footer {
height: 79px;
width: 100%;
display: flex;
Step/wwwroot/assets/styles/style.css
+206 -52
View File
@@ -733,14 +733,16 @@
width: 100%;
border: none;
}
.modal.modal-load-program {
.modal.modal-load-program,
.modal.modal-add-element-queue {
width: 1808px;
height: 873px;
top: calc(50% - 436.5px);
left: calc(50% - 904px);
background-color: #fff;
}
.modal.modal-load-program header {
.modal.modal-load-program header,
.modal.modal-add-element-queue header {
display: flex;
align-items: center;
padding-left: 24px;
@@ -748,7 +750,8 @@
font-size: 20px;
color: #002680;
}
.modal.modal-load-program header button.close {
.modal.modal-load-program header button.close,
.modal.modal-add-element-queue header button.close {
position: absolute;
width: 28px;
height: 28px;
@@ -761,17 +764,24 @@
font-size: 16px;
cursor: pointer;
}
.modal.modal-load-program header button.close:active {
.modal.modal-load-program header button.close:active,
.modal.modal-add-element-queue header button.close:active {
background-color: #1791ff;
color: #fff;
}
.modal.modal-load-program .modal-load-program-header {
.modal.modal-load-program .modal-load-program-header,
.modal.modal-add-element-queue .modal-load-program-header,
.modal.modal-load-program .modal-add-element-queue-header,
.modal.modal-add-element-queue .modal-add-element-queue-header {
height: 80px;
width: 100%;
display: flex;
flex-flow: column;
}
.modal.modal-load-program .modal-load-program-header .box-search {
.modal.modal-load-program .modal-load-program-header .box-search,
.modal.modal-add-element-queue .modal-load-program-header .box-search,
.modal.modal-load-program .modal-add-element-queue-header .box-search,
.modal.modal-add-element-queue .modal-add-element-queue-header .box-search {
width: 100%;
height: 80px;
display: flex;
@@ -779,28 +789,46 @@
align-items: center;
background-color: #979797;
}
.modal.modal-load-program .modal-load-program-header .box-search .path {
.modal.modal-load-program .modal-load-program-header .box-search .path,
.modal.modal-add-element-queue .modal-load-program-header .box-search .path,
.modal.modal-load-program .modal-add-element-queue-header .box-search .path,
.modal.modal-add-element-queue .modal-add-element-queue-header .box-search .path {
display: flex;
flex-flow: row;
color: #fff;
margin-left: 20px;
}
.modal.modal-load-program .modal-load-program-header .box-search .path .child {
.modal.modal-load-program .modal-load-program-header .box-search .path .child,
.modal.modal-add-element-queue .modal-load-program-header .box-search .path .child,
.modal.modal-load-program .modal-add-element-queue-header .box-search .path .child,
.modal.modal-add-element-queue .modal-add-element-queue-header .box-search .path .child {
display: flex;
flex-flow: row;
}
.modal.modal-load-program .modal-load-program-header .box-search .path .child div + .fa.fa-chevron-right:first-child {
.modal.modal-load-program .modal-load-program-header .box-search .path .child div + .fa.fa-chevron-right:first-child,
.modal.modal-add-element-queue .modal-load-program-header .box-search .path .child div + .fa.fa-chevron-right:first-child,
.modal.modal-load-program .modal-add-element-queue-header .box-search .path .child div + .fa.fa-chevron-right:first-child,
.modal.modal-add-element-queue .modal-add-element-queue-header .box-search .path .child div + .fa.fa-chevron-right:first-child {
display: none;
}
.modal.modal-load-program .modal-load-program-header .box-search .path .child .fa {
.modal.modal-load-program .modal-load-program-header .box-search .path .child .fa,
.modal.modal-add-element-queue .modal-load-program-header .box-search .path .child .fa,
.modal.modal-load-program .modal-add-element-queue-header .box-search .path .child .fa,
.modal.modal-add-element-queue .modal-add-element-queue-header .box-search .path .child .fa {
margin: 0px 22px;
}
.modal.modal-load-program .modal-load-program-header .box-search .search {
.modal.modal-load-program .modal-load-program-header .box-search .search,
.modal.modal-add-element-queue .modal-load-program-header .box-search .search,
.modal.modal-load-program .modal-add-element-queue-header .box-search .search,
.modal.modal-add-element-queue .modal-add-element-queue-header .box-search .search {
display: flex;
width: 100%;
justify-content: flex-end;
}
.modal.modal-load-program .modal-load-program-header .box-search .search input {
.modal.modal-load-program .modal-load-program-header .box-search .search input,
.modal.modal-add-element-queue .modal-load-program-header .box-search .search input,
.modal.modal-load-program .modal-add-element-queue-header .box-search .search input,
.modal.modal-add-element-queue .modal-add-element-queue-header .box-search .search input {
width: 688px;
height: 48px;
border-radius: 2px;
@@ -808,28 +836,43 @@
border: solid 1px #dfdfdf;
background-color: #f8f8f8;
}
.modal.modal-load-program .modal-load-program-body {
.modal.modal-load-program .modal-load-program-body,
.modal.modal-add-element-queue .modal-load-program-body,
.modal.modal-load-program .modal-add-element-queue-body,
.modal.modal-add-element-queue .modal-add-element-queue-body {
height: 631px;
width: 100%;
display: flex;
flex-flow: row;
}
.modal.modal-load-program .modal-load-program-body hr {
.modal.modal-load-program .modal-load-program-body hr,
.modal.modal-add-element-queue .modal-load-program-body hr,
.modal.modal-load-program .modal-add-element-queue-body hr,
.modal.modal-add-element-queue .modal-add-element-queue-body hr {
width: 5%;
}
.modal.modal-load-program .modal-load-program-body .first-column {
.modal.modal-load-program .modal-load-program-body .first-column,
.modal.modal-add-element-queue .modal-load-program-body .first-column,
.modal.modal-load-program .modal-add-element-queue-body .first-column,
.modal.modal-add-element-queue .modal-add-element-queue-body .first-column {
min-width: 215px;
border-right: solid 2px #e7e7e7;
display: flex;
flex-flow: column;
padding-top: 19px;
}
.modal.modal-load-program .modal-load-program-body .first-column .card-folder-path {
.modal.modal-load-program .modal-load-program-body .first-column .card-folder-path,
.modal.modal-add-element-queue .modal-load-program-body .first-column .card-folder-path,
.modal.modal-load-program .modal-add-element-queue-body .first-column .card-folder-path,
.modal.modal-add-element-queue .modal-add-element-queue-body .first-column .card-folder-path {
width: 200px;
display: flex;
margin-top: 8px 0 8px 5px;
}
.modal.modal-load-program .modal-load-program-body .second-column {
.modal.modal-load-program .modal-load-program-body .second-column,
.modal.modal-add-element-queue .modal-load-program-body .second-column,
.modal.modal-load-program .modal-add-element-queue-body .second-column,
.modal.modal-add-element-queue .modal-add-element-queue-body .second-column {
height: calc(100% - 19px);
min-width: 445px;
border-right: solid 2px #e7e7e7;
@@ -837,22 +880,34 @@
flex-flow: column;
padding-top: 19px;
}
.modal.modal-load-program .modal-load-program-body .second-column .content {
.modal.modal-load-program .modal-load-program-body .second-column .content,
.modal.modal-add-element-queue .modal-load-program-body .second-column .content,
.modal.modal-load-program .modal-add-element-queue-body .second-column .content,
.modal.modal-add-element-queue .modal-add-element-queue-body .second-column .content {
width: 94%;
height: 100%;
}
.modal.modal-load-program .modal-load-program-body .second-column .content .card-folder-path {
.modal.modal-load-program .modal-load-program-body .second-column .content .card-folder-path,
.modal.modal-add-element-queue .modal-load-program-body .second-column .content .card-folder-path,
.modal.modal-load-program .modal-add-element-queue-body .second-column .content .card-folder-path,
.modal.modal-add-element-queue .modal-add-element-queue-body .second-column .content .card-folder-path {
width: 371px;
display: flex;
margin-top: 8px 0 8px 8px;
}
.modal.modal-load-program .modal-load-program-body .second-column .group-btn {
.modal.modal-load-program .modal-load-program-body .second-column .group-btn,
.modal.modal-add-element-queue .modal-load-program-body .second-column .group-btn,
.modal.modal-load-program .modal-add-element-queue-body .second-column .group-btn,
.modal.modal-add-element-queue .modal-add-element-queue-body .second-column .group-btn {
display: flex;
flex-flow: row;
justify-content: center;
margin-bottom: 16px;
}
.modal.modal-load-program .modal-load-program-body .second-column .group-btn input {
.modal.modal-load-program .modal-load-program-body .second-column .group-btn input,
.modal.modal-add-element-queue .modal-load-program-body .second-column .group-btn input,
.modal.modal-load-program .modal-add-element-queue-body .second-column .group-btn input,
.modal.modal-add-element-queue .modal-add-element-queue-body .second-column .group-btn input {
width: 360px;
height: 48px;
padding: 0;
@@ -861,22 +916,34 @@
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
.modal.modal-load-program .modal-load-program-body .second-column .group-btn input[type="text"] {
.modal.modal-load-program .modal-load-program-body .second-column .group-btn input[type="text"],
.modal.modal-add-element-queue .modal-load-program-body .second-column .group-btn input[type="text"],
.modal.modal-load-program .modal-add-element-queue-body .second-column .group-btn input[type="text"],
.modal.modal-add-element-queue .modal-add-element-queue-body .second-column .group-btn input[type="text"] {
padding-left: 5px;
outline: none ;
}
.modal.modal-load-program .modal-load-program-body .second-column .group-btn input:focus {
.modal.modal-load-program .modal-load-program-body .second-column .group-btn input:focus,
.modal.modal-add-element-queue .modal-load-program-body .second-column .group-btn input:focus,
.modal.modal-load-program .modal-add-element-queue-body .second-column .group-btn input:focus,
.modal.modal-add-element-queue .modal-add-element-queue-body .second-column .group-btn input:focus {
border-bottom: 1px solid #1791ff;
box-shadow: none;
}
.modal.modal-load-program .modal-load-program-body .second-column .group-btn i {
.modal.modal-load-program .modal-load-program-body .second-column .group-btn i,
.modal.modal-add-element-queue .modal-load-program-body .second-column .group-btn i,
.modal.modal-load-program .modal-add-element-queue-body .second-column .group-btn i,
.modal.modal-add-element-queue .modal-add-element-queue-body .second-column .group-btn i {
width: 44px;
height: 44px;
padding: 0;
margin-top: 4px;
color: #002680;
}
.modal.modal-load-program .modal-load-program-body .third-column {
.modal.modal-load-program .modal-load-program-body .third-column,
.modal.modal-add-element-queue .modal-load-program-body .third-column,
.modal.modal-load-program .modal-add-element-queue-body .third-column,
.modal.modal-add-element-queue .modal-add-element-queue-body .third-column {
height: calc(100% - 19px);
min-width: 447px;
border-right: solid 2px #e7e7e7;
@@ -884,16 +951,25 @@
flex-flow: column;
padding-top: 19px;
}
.modal.modal-load-program .modal-load-program-body .third-column .content {
.modal.modal-load-program .modal-load-program-body .third-column .content,
.modal.modal-add-element-queue .modal-load-program-body .third-column .content,
.modal.modal-load-program .modal-add-element-queue-body .third-column .content,
.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .content {
width: 94%;
height: 100%;
}
.modal.modal-load-program .modal-load-program-body .third-column .content .card-folder-path {
.modal.modal-load-program .modal-load-program-body .third-column .content .card-folder-path,
.modal.modal-add-element-queue .modal-load-program-body .third-column .content .card-folder-path,
.modal.modal-load-program .modal-add-element-queue-body .third-column .content .card-folder-path,
.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .content .card-folder-path {
width: 371px;
display: flex;
margin-top: 8px 0 8px 8px;
}
.modal.modal-load-program .modal-load-program-body .third-column .label-folder-empty {
.modal.modal-load-program .modal-load-program-body .third-column .label-folder-empty,
.modal.modal-add-element-queue .modal-load-program-body .third-column .label-folder-empty,
.modal.modal-load-program .modal-add-element-queue-body .third-column .label-folder-empty,
.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .label-folder-empty {
display: flex;
width: 100%;
height: 100%;
@@ -902,13 +978,19 @@
color: #4b4b4b;
font-size: 20px;
}
.modal.modal-load-program .modal-load-program-body .third-column .group-btn {
.modal.modal-load-program .modal-load-program-body .third-column .group-btn,
.modal.modal-add-element-queue .modal-load-program-body .third-column .group-btn,
.modal.modal-load-program .modal-add-element-queue-body .third-column .group-btn,
.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .group-btn {
display: flex;
flex-flow: row;
justify-content: center;
margin-bottom: 16px;
}
.modal.modal-load-program .modal-load-program-body .third-column .group-btn input {
.modal.modal-load-program .modal-load-program-body .third-column .group-btn input,
.modal.modal-add-element-queue .modal-load-program-body .third-column .group-btn input,
.modal.modal-load-program .modal-add-element-queue-body .third-column .group-btn input,
.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .group-btn input {
width: 360px;
height: 48px;
padding: 0;
@@ -917,22 +999,34 @@
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
.modal.modal-load-program .modal-load-program-body .third-column .group-btn input[type="text"] {
.modal.modal-load-program .modal-load-program-body .third-column .group-btn input[type="text"],
.modal.modal-add-element-queue .modal-load-program-body .third-column .group-btn input[type="text"],
.modal.modal-load-program .modal-add-element-queue-body .third-column .group-btn input[type="text"],
.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .group-btn input[type="text"] {
padding-left: 5px;
outline: none ;
}
.modal.modal-load-program .modal-load-program-body .third-column .group-btn input:focus {
.modal.modal-load-program .modal-load-program-body .third-column .group-btn input:focus,
.modal.modal-add-element-queue .modal-load-program-body .third-column .group-btn input:focus,
.modal.modal-load-program .modal-add-element-queue-body .third-column .group-btn input:focus,
.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .group-btn input:focus {
border-bottom: 1px solid #1791ff;
box-shadow: none;
}
.modal.modal-load-program .modal-load-program-body .third-column .group-btn i {
.modal.modal-load-program .modal-load-program-body .third-column .group-btn i,
.modal.modal-add-element-queue .modal-load-program-body .third-column .group-btn i,
.modal.modal-load-program .modal-add-element-queue-body .third-column .group-btn i,
.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .group-btn i {
width: 44px;
height: 44px;
padding: 0;
margin-top: 4px;
color: #002680;
}
.modal.modal-load-program .modal-load-program-body .selected-item {
.modal.modal-load-program .modal-load-program-body .selected-item,
.modal.modal-add-element-queue .modal-load-program-body .selected-item,
.modal.modal-load-program .modal-add-element-queue-body .selected-item,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item {
width: 660px;
height: 100%;
display: flex;
@@ -940,30 +1034,45 @@
justify-content: flex-end;
padding: 0 16px 0 22px;
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-header,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-header,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-header {
height: 78px;
width: 100%;
display: flex;
flex-flow: row;
align-items: center;
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .subtitle {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .subtitle,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-header .subtitle,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-header .subtitle,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-header .subtitle {
display: flex;
flex-flow: row;
font-size: 13px;
line-height: 4px;
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .subtitle .title {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .subtitle .title,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-header .subtitle .title,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-header .subtitle .title,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-header .subtitle .title {
width: 110px;
text-align: right;
color: #002680;
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .subtitle .text {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .subtitle .text,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-header .subtitle .text,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-header .subtitle .text,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-header .subtitle .text {
margin-right: 40px;
color: #4b4b4b;
margin-left: 5px;
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .selected-item-title {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .selected-item-title,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-header .selected-item-title,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-header .selected-item-title,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-header .selected-item-title {
height: 100%;
width: 100%;
display: flex;
@@ -973,17 +1082,26 @@
font-size: 26px;
line-height: 55px;
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .group-button {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .group-button,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-header .group-button,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-header .group-button,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-header .group-button {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .group-button i {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .group-button i,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-header .group-button i,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-header .group-button i,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-header .group-button i {
font-size: 24px;
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body {
width: 100%;
height: calc(100% - 78px);
position: relative;
@@ -991,20 +1109,29 @@
display: flex;
flex-flow: column;
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-image,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-image {
display: flex;
width: 100%;
margin-top: 10px;
height: 336px;
align-items: center;
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image img {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image img,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image img,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-image img,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-image img {
display: block;
margin: auto;
max-height: 336px;
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.4);
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image .noimage {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image .noimage,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image .noimage,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-image .noimage,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-image .noimage {
display: block;
margin: auto;
height: 290px;
@@ -1016,7 +1143,10 @@
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.4);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description {
display: flex;
width: 100%;
margin-top: 10px;
@@ -1024,7 +1154,10 @@
height: calc(100% - 380px);
flex-flow: column;
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row {
height: 32px;
min-height: 32px;
display: flex;
@@ -1034,18 +1167,30 @@
text-align: justify;
overflow: hidden;
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row label {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row label,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row label,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row label,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row label {
font-size: 18px;
margin-left: 5px;
white-space: nowrap;
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(odd) {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(odd),
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(odd),
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(odd),
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(odd) {
background-color: rgba(23, 145, 255, 0.3);
}
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(even) {
.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(even),
.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(even),
.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(even),
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(even) {
background-color: #f3f3f3;
}
.modal.modal-load-program .modal-load-program-body .selected-item .notselecteditem {
.modal.modal-load-program .modal-load-program-body .selected-item .notselecteditem,
.modal.modal-add-element-queue .modal-load-program-body .selected-item .notselecteditem,
.modal.modal-load-program .modal-add-element-queue-body .selected-item .notselecteditem,
.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .notselecteditem {
position: absolute;
right: 0;
width: 695px;
@@ -1058,7 +1203,10 @@
align-items: center;
justify-content: center;
}
.modal.modal-load-program .modal-load-program-footer {
.modal.modal-load-program .modal-load-program-footer,
.modal.modal-add-element-queue .modal-load-program-footer,
.modal.modal-load-program .modal-add-element-queue-footer,
.modal.modal-add-element-queue .modal-add-element-queue-footer {
height: 79px;
width: 100%;
display: flex;
@@ -5656,6 +5804,12 @@ footer .container button.big:before {
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
.card-element-queue.border-green {
border: solid 2px #7ed321;
}
.card-element-queue.border-blue {
border: solid 2px #1791ff;
}
.card-element-queue .card-element-queue-name {
width: 100%;
display: flex;
Step/wwwroot/src/@types/production.d.ts
Vendored
+10
View File
@@ -0,0 +1,10 @@
declare module server {
export interface PartProgramModel {
absolutePath: string,
id: number,
partProgramName: string,
remainingReps: number,
reps: number,
status: number
}
}
Step/wwwroot/src/modules/base-components/cards/card-element-queue.vue
+9 -3
View File
@@ -1,10 +1,15 @@
<template>
<!-- <div class="test-container"> -->
<div class="card-element-queue">
<div class="card-element-queue" :class="{'border-blue': status != 1, 'border-green': status == 1}">
<div class="card-element-queue-name">
<label>{{name}}</label>
</div>
<div class="card-element-queue-right">
<div class="card-element-queue-right" v-if="status == 1">
<div class="square-number">
<label>x{{number}}</label>
</div>
</div>
<div class="card-element-queue-right" v-if="status != 1">
<div class="square-number">
<label>x{{number}}</label>
</div>
@@ -17,7 +22,8 @@
export default {
props:{
name: {default: "Part program 01"},
number: { default: 2}
number: { default: 2},
status: { default: 0}
}
};
</script>
Step/wwwroot/src/modules/base-components/cards/card-job-production.vue
+1
View File
@@ -61,6 +61,7 @@ export default {
},
computed: {
currentProgram: function() {
console.log(this.$store.state.process.currentProgram);
return this.$store.state.process.currentProgram;
},
indexofActiveLine: function() {
Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue
+1 -1
View File
@@ -35,7 +35,7 @@ export default {
return {};
},
props: {
queue: { default: false }
queue: { default: true }
},
components: {
cardQueueProduction,
Step/wwwroot/src/modules/base-components/cards/card-queue-production.vue
+9 -10
View File
@@ -13,14 +13,8 @@
</div>
<div class="card-queue-production-body">
<div class="queue-body scrollable">
<div class="element-queue">
<label class="number">1</label><card-element-queue></card-element-queue>
</div>
<div class="element-queue">
<label class="number">2</label><card-element-queue></card-element-queue>
</div>
<div class="element-queue">
<label class="number">3</label><card-element-queue></card-element-queue>
<div v-for="(pp, key) in partPrograms" :key="key" class="element-queue">
<label class="number">{{key}}</label><card-element-queue :name="pp.partProgramName" :number="pp.reps" :status="pp.status"></card-element-queue>
</div>
</div>
<div class="queue-footer">
@@ -39,14 +33,19 @@
<script>
import cardElementQueue from "./card-element-queue.vue";
import {ModalHelper} from "src/modules/base-components";
import modalLoadProgram from "src/modules/base-components/modal-load-program.vue"
import modalAddElementQueue from "src/modules/base-components/modal-add-element-queue.vue"
export default {
components:{
cardElementQueue
},
computed: {
partPrograms: function(){
return this.$store.state.production.partProgram;
}
},
methods:{
openModal(){
ModalHelper.ShowModal(modalLoadProgram);
ModalHelper.ShowModal(modalAddElementQueue);
}
}
}
Step/wwwroot/src/modules/base-components/modal-add-element-queue.ts
+231
View File
@@ -0,0 +1,231 @@
import Vue from "vue";
import Component from "vue-class-component";
import Modal from "src/modules/base-components/modal.vue";
import { ModalHelper } from "src/modules/base-components/ModalHelper";
import { Factory, MessageService,awaiter } from "../../_base";
// import { MaintenanceService } from "../services/maintenanceService";
// import { store } from "src/store";
// import { maintenanceActions } from "../store/maintenance.store";
import moment from "moment";
import cardFolderPath from "./cards/card-folder-path.vue";
import cardElementQueue from "./cards/card-element-queue.vue";
import * as iziToast from "izitoast";
import { fileService } from "../../services/fileService";
declare var cmsClient: any;
interface PathInfo {
Name: string;
AbsolutePath: string;
Path: string;
IsDirectory: boolean;
}
interface FileInfo {
Name: string;
AbsolutePath: string;
CreationDate: string;
LastModDate: string;
Content: Array<any>;
PreviewBase64: any;
}
@Component({
components: {
modal: Modal,
cardFolderPath,
cardElementQueue
}
})
export default class ModalAddElementQueue extends Vue {
driveList: Array<PathInfo> = [];
currentPath: string = "";
currentDrive: string = null;
lastClickPath: string = "";
breadcrumbs: Array<any> = [];
firstColumnData: Array<PathInfo> = [];
secondColumnData: Array<PathInfo> = [];
isLocalNavigation: boolean = true;
selectedFile: FileInfo = null;
currentFilterFirst: string = "";
currentFilterSecond: string = "";
navigationDepth: number = 0;
mounted() {
if (typeof cmsClient != "undefined") {
this.driveList = JSON.parse(cmsClient.getOSdriveList());
}
}
async navigateTo(
path: string,
absolutePath: string,
local: boolean,
todepth: number,
fromdepth: number
) {
this.currentPath = absolutePath;
this.lastClickPath = absolutePath;
this.checkChangeNavigationType(local);
var files = await this.getFilesForPath(absolutePath, path, local);
// controlla se impostare il currentDrive
if (fromdepth == 0) this.currentDrive = absolutePath;
// controlla come organizzare le colonne.
if (this.navigationDepth == 2 && todepth == 2 && fromdepth == 2) {
this.fillArray(this.firstColumnData, this.secondColumnData);
}
this.navigationDepth = todepth;
if (todepth == 1) {
this.fillArray(this.firstColumnData, files);
this.secondColumnData.splice(0, this.secondColumnData.length);
this.currentFilterFirst = "";
this.selectedFile = null;
}
if (todepth == 2) {
this.fillArray(this.secondColumnData, files);
this.currentFilterSecond = "";
}
this.calcBreadCrumb(absolutePath);
}
fillArray(destinationArray: Array<any>, sourceArray: Array<any>) {
destinationArray.splice(0, destinationArray.length);
for (const key in sourceArray) {
if (sourceArray.hasOwnProperty(key)) {
const element = sourceArray[key];
destinationArray.push(element);
}
}
}
checkChangeNavigationType(local: boolean) {
if (this.isLocalNavigation != local) {
this.navigationDepth = 0;
this.firstColumnData.splice(0, this.firstColumnData.length);
this.secondColumnData.splice(0, this.secondColumnData.length);
}
}
async getFilesForPath(absolutePath: string, path: string, local: boolean): Promise<Array<any>> {
this.isLocalNavigation = local;
var result = null;
console.log(path);
if (local) result = JSON.parse(cmsClient.getFileList(absolutePath));
else result = await awaiter(fileService.getFiles(path));
return this.toUpperCaseModel(result).sort(this.compareDirectoriesFirst);
}
private compareDirectoriesFirst(x,y){
return (x.IsDirectory === y.IsDirectory)? 0 : x.IsDirectory? -1 : 1;
}
toUpperCaseModel(data: Array<any>): Array<PathInfo> {
console.log(data)
return data.map(i => {
return {
Name: i.name || i.Name,
AbsolutePath: i.absolutePath || i.AbsolutePath,
Path: i.path || i.Path,
IsDirectory: (i.isDirectory != null && i.isDirectory) || (i.IsDirectory != null && i.IsDirectory)
};
});
}
calcBreadCrumb(path: string) {
this.breadcrumbs.splice(0, this.breadcrumbs.length);
if (path.startsWith("\\\\")) {
this.breadcrumbs.push({
name: "CN",
path: "\\\\"
});}
if (path) {
var fragments = path.split("\\");
var __p = "";
fragments.forEach(element => {
__p = __p + element + "\\";
this.breadcrumbs.push({
name: element,
path: __p
});
});
}
}
isInPath(path) {
if (this.currentPath) return this.currentPath.startsWith(path);
return false;
}
toUpperCaseFileModel(data: any): FileInfo {
return {
AbsolutePath: data.absolutePath || data.AbsolutePath,
Path: data.path || data.Path,
Content: data.content || data.Content,
CreationDate: data.creationDate || data.CreationDate,
LastModDate: data.lastModDate || data.LastModDate,
Name: data.name || data.Name,
PreviewBase64: data.previewBase64 || data.PreviewBase64
} as FileInfo;
}
async fileInfo(str, fromdepth: number) {
this.lastClickPath = str;
if (fromdepth == 1)
this.secondColumnData.splice(0, this.secondColumnData.length);
if (this.isLocalNavigation && typeof cmsClient != "undefined")
this.selectedFile = this.toUpperCaseFileModel(
JSON.parse(cmsClient.getProgramInfo(str))
);
if (!this.isLocalNavigation)
this.selectedFile = this.toUpperCaseFileModel(
await awaiter(fileService.getFileInfo(str)));
}
close() {
Factory.Get(MessageService).deleteChannel("esc_pressed");
ModalHelper.HideModal();
}
reload() {
this.driveList = JSON.parse(cmsClient.getOSdriveList());
}
getDate(date) {
return moment(date).format("L");
}
async loadProgram(path: string) {
debugger
if (this.isLocalNavigation && typeof cmsClient != "undefined") {
var resp = cmsClient.uploadAndAddToQueue(path, 1);
if(resp != "")
(iziToast as any).error({
title: resp.split(";")[0],
message: resp.split(";")[1],
theme: "dark",
timeout: 10000,
class: "t-error",
transitionOut: "fadeOut",
})
else
this.close();
}
// if (!this.isLocalNavigation) {
// await awaiter(fileService.activateProgram(path));
// this.close();
// }
}
}
Step/wwwroot/src/modules/base-components/modal-add-element-queue.vue
+123
View File
@@ -0,0 +1,123 @@
<template>
<modal type="modal-add-element-queue" :title="'modal_add_element_queue_lbl_title_window' | localize('Aggiungere elemento in coda')">
<button class="close" slot="header-buttons" @click="close()"><i class="fa fa-remove"></i></button>
<div class="modal-add-element-queue-header">
<!-- <div class="title">
<i class="fa fa-chevron-left"></i>
Selezione programma da aggiungere in coda
</div> -->
<div class="box-search">
<div class="path">
<div class="child" v-for="(bread,key) in this.breadcrumbs" :key="key">
<div v-if="bread.name && key!=0"><i class="fa fa-chevron-right"></i></div>
<a href="#" @click="navigateTo(bread.path,bread.absolutePath,isLocalNavigation, 1,1)">{{bread.name}}</a>
</div>
<!-- <div class="root">PC</div>
<div v-if="true"><i class="fa fa-chevron-right"></i></div>
<div class="child">Cliente A</div>
<div v-if="true"><i class="fa fa-chevron-right"></i></div>
<div class="child">Part Program 01</div> -->
</div>
</div>
</div>
<div class="modal-add-element-queue-body">
<div class="first-column">
<card-folder-path v-for="(val, key) in this.driveList" :key="key" :name="val.Name" :iconType="val.Type"
:selected="val.Path == currentDrive" @click="navigateTo(val.Path,val.Path, true, 1,0)" ></card-folder-path>
</div>
<div class="second-column" v-if="navigationDepth <1"></div>
<div class="second-column" v-if="navigationDepth >=1">
<div class="group-btn">
<input type="text" v-model="currentFilterFirst" :placeholder="'modal_add_element_queue_search_placeholder' | localize('Cerca un programma per nome')">
<i class="fa fa-2x fa-search"></i>
</div>
<div class="content scrollable">
<card-folder-path v-for="(val,key) in this.firstColumnData.filter(t => t.Name.toLowerCase().indexOf(currentFilterFirst.toLowerCase()) >=0)"
:key="key"
:name="val.Name"
:disabled="!isCnReady() && !isLocalNavigation"
:class="{dark: val.AbsolutePath == lastClickPath}"
:selected="isInPath(val.AbsolutePath) || val.AbsolutePath == lastClickPath"
:withArrow="val.IsDirectory == true"
:iconType="val.IsDirectory? 'FOLDER':'FILE'"
@click="val.IsDirectory ? navigateTo(val.Path, val.AbsolutePath, isLocalNavigation, 2,1): fileInfo(val.AbsolutePath,1)"></card-folder-path>
</div>
</div>
<div class="third-column" v-if="navigationDepth <2"></div>
<div class="third-column" v-if="navigationDepth >=2">
<!-- !(this.arrayViewList[1] ? this.arrayViewList[1].length < 1 : false) -->
<div class="group-btn">
<input type="text" v-model="currentFilterSecond" :placeholder="'modal_add_element_queue_search_placeholder' | localize('Cerca un programma per nome')">
<i class="fa fa-2x fa-search"></i>
</div>
<div class="label-folder-empty" v-if="secondColumnData.length ==0">
<label>Cartella vuota</label>
</div>
<div class="content scrollable" v-if="secondColumnData.length >0">
<card-folder-path v-for="val in (this.secondColumnData.filter(t => t.Name.toLowerCase().indexOf(currentFilterSecond.toLowerCase()) >=0))"
:key="val.Name"
:name="val.Name"
:disabled="!isCnReady() && !isLocalNavigation"
:class="{dark: val.AbsolutePath == lastClickPath}"
:selected="isInPath(val.AbsolutePath) || val.AbsolutePath == lastClickPath"
:withArrow="val.IsDirectory == true"
:iconType="val.IsDirectory? 'FOLDER':'FILE'"
@click="val.IsDirectory? navigateTo(val.Path, val.AbsolutePath, isLocalNavigation, 2,2):fileInfo(val.AbsolutePath,2) "></card-folder-path>
<!-- <card-folder-path name="Cliente A" @click="selectItem()" :with-arrow="false"></card-folder-path>-->
</div>
</div>
<div class="selected-item" v-if="selectedFile">
<div class="selected-item-header">
<div>
<label class="selected-item-title">{{selectedFile.Name}}</label>
<div class="subtitle">
<label class="title">{{'modal_add_element_queue_creation_date' | localize("Creation Date:")}}</label>
<label class="text">{{getDate(selectedFile.CreationDate)}}</label>
<label class="title">{{'modal_add_element_queue_last_change_date' | localize("Last Change Date:")}}</label>
<label class="text">{{getDate(selectedFile.LastModDate)}}</label>
</div>
</div>
<div class="group-button">
<button class="btn" v-if="false"><i class="fa fa-clone"></i></button>
<button class="btn" disabled><i class="fa fa-pencil-square-o"></i></button>
</div>
</div>
<div class="selected-item-body">
<div class="selected-item-body-image">
<img v-if="selectedFile.PreviewBase64" :src="selectedFile.PreviewBase64">
<div v-if="!selectedFile.PreviewBase64" class="noimage">
{{'modal_add_element_queue_lbl_img_not_found' | localize('Preview non disponibile')}}
</div>
</div>
<div class="selected-item-body-description scrollable">
<div class="row" v-for="(item,index) in selectedFile.Content" :key="'line' + index">
<label>{{item}}</label>
</div>
</div>
</div>
</div>
<div class="selected-item" v-if="!selectedFile">
<div class="notselecteditem">
<label>{{'modal_add_element_queue_lbl_box_select_program' | localize('Seleziona programma')}}</label>
</div>
</div>
</div>
<div class="modal-add-element-queue-footer">
<!-- <button class="btn btn-success"
:disabled="!selectedFile || !isCnReady()"
v-if="!this.isLocalNavigation"
@click="loadProgram(selectedFile.AbsolutePath)">
{{'modal_add_element_queue_btn_load_program' | localize('Attiva programma')}}
</button> -->
<button class="btn btn-success"
:disabled="!selectedFile || !isCnReady()"
v-if="this.isLocalNavigation"
@click="loadProgram(selectedFile.AbsolutePath)">
{{'modal_add_element_queue_btn_upload_program' | localize('Aggiungi elemento')}}
</button>
</div>
</modal>
</template>
<script src="./modal-add-element-queue.ts" lang="ts"></script>
Step/wwwroot/src/modules/base-components/modal-load-program.ts
+1
View File
@@ -207,6 +207,7 @@ export default class ModalLoadProgram extends Vue {
}
async loadProgram(path: string) {
debugger
if (this.isLocalNavigation && typeof cmsClient != "undefined") {
var resp = cmsClient.uploadAndActivateProgram(path);
if(resp != "")
Step/wwwroot/src/services/hub.ts
+7
View File
@@ -13,6 +13,7 @@ import { SoftKeyModel } from "../store/machineStatus.store";
import { depotActions } from "../store/depot.store";
import { fileService } from "./fileService";
import { toolingActions } from "../store/tooling.store";
import { productionActions } from "../store/production.store";
declare let $: any;
declare let cmsClient: any;
@@ -70,6 +71,8 @@ export class Hub {
this._hub.client.activeProgramData = Hub.activeProgramData;
this._hub.client.magazineIsActive = Hub.magazineIsActive;
this._hub.client.partProgramQueue = Hub.partProgramQueue;
this._hub.client.logout = this.logout;
// Token per signalr agganciato in modo esplicito
@@ -134,6 +137,10 @@ export class Hub {
processModelActions.setValueAxisSelected(store, data);
}
private static partProgramQueue(data){
productionActions.updatePartPrograms(store, data);
}
private static magazineIsActive(data){
let newArrayMagazine = [];
let magazines = (store.state as AppModel).tooling.magazines;
Step/wwwroot/src/store/app.store.ts
+3
View File
@@ -11,6 +11,7 @@ import { depotStore, DepotStoreModel} from "./depot.store";
import { maintenanceStore, MaintenanceStoreModel} from "./maintenance.store";
import { LocalizationService, localizationService } from "src/services/localizationService";
import { ProductionStoreModel, productionStore } from "./production.store";
Vue.use(Vuex);
@@ -28,6 +29,7 @@ export interface AppModel {
process: RunningProcessModel;
tooling: ToolingStoreModel;
depot: DepotStoreModel;
production: ProductionStoreModel;
maintenance: MaintenanceStoreModel;
}
@@ -62,6 +64,7 @@ const _store = {
localization: localizationStore,
tooling: toolingStore,
depot: depotStore,
production: productionStore,
maintenance: maintenanceStore
},
Step/wwwroot/src/store/production.store.ts
+37
View File
@@ -0,0 +1,37 @@
export interface ProductionStoreModel {
partProgram: Array<server.PartProgramModel>
}
export interface ProductionGetters{
}
export interface ProductionActions {
updatePartPrograms(context, model: server.PartProgramModel[]);
}
export const productionStore = {
state: {
_partProgram: new Map<number, server.PartProgramModel>(),
partProgram: [],
} as ProductionStoreModel,
getters:{
},
mutations: {
UpdatePartProgram(store, model: server.PartProgramModel) {
store._partProgram.set(model.id, model);
store.partProgram = Array.from(store._partProgram.values());
}
},
actions: {
updatePartPrograms(context, model: server.PartProgramModel[]) {
for (const key in model) {
const element = model[key];
context.commit("UpdatePartProgram", element);
}
},
} as ProductionActions
}
export const productionActions = productionStore.actions as ProductionActions;