Fix Load Programs modal

This commit is contained in:
Nicola Carminati
2018-11-23 10:28:13 +01:00
parent 49181f150a
commit f5b8ca64c0
4 changed files with 150 additions and 15 deletions
@@ -1336,6 +1336,58 @@
justify-content: flex-end;
border-top: solid 2px @color-whitethree;
}
.box-description{
box-sizing: border-box;
padding-top: 10px;
height: 120px;
width: 100%;
border-top: solid 2px #e7e7e7;
}
.box-image{
display: flex;
justify-content: flex-start;
flex-flow: column;
min-height: 415px;
width: 100%;
margin-top: 16px;
.box-image-container{
display: flex;
justify-content: center;
align-items: center;
min-height: 329px;
width: 100%;
margin: 25px auto 23px auto;
img{
max-width: 577px;
max-height: 329px;
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.4);
}
}
.linenumber{
display: flex;
justify-content: center;
align-items: center;
div{
width: 32px;
height: 18px;
button{
margin: auto 4px;
border: none;
padding: 0;
background: none;
font-size: 18px;
line-height: 1;
color: @color-greyish-brown;
}
.target{
color: @color-clear-blue;
font-weight: 600;
}
}
}
}
}
.@{modal}.modal-job-add-parameter {
+61 -3
View File
@@ -1417,6 +1417,64 @@
justify-content: flex-end;
border-top: solid 2px #e7e7e7;
}
.modal.modal-load-program .box-description,
.modal.modal-add-element-queue .box-description {
box-sizing: border-box;
padding-top: 10px;
height: 120px;
width: 100%;
border-top: solid 2px #e7e7e7;
}
.modal.modal-load-program .box-image,
.modal.modal-add-element-queue .box-image {
display: flex;
justify-content: flex-start;
flex-flow: column;
min-height: 415px;
width: 100%;
margin-top: 16px;
}
.modal.modal-load-program .box-image .box-image-container,
.modal.modal-add-element-queue .box-image .box-image-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 329px;
width: 100%;
margin: 25px auto 23px auto;
}
.modal.modal-load-program .box-image .box-image-container img,
.modal.modal-add-element-queue .box-image .box-image-container img {
max-width: 577px;
max-height: 329px;
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.4);
}
.modal.modal-load-program .box-image .linenumber,
.modal.modal-add-element-queue .box-image .linenumber {
display: flex;
justify-content: center;
align-items: center;
}
.modal.modal-load-program .box-image .linenumber div,
.modal.modal-add-element-queue .box-image .linenumber div {
width: 32px;
height: 18px;
}
.modal.modal-load-program .box-image .linenumber div button,
.modal.modal-add-element-queue .box-image .linenumber div button {
margin: auto 4px;
border: none;
padding: 0;
background: none;
font-size: 18px;
line-height: 1;
color: #4b4b4b;
}
.modal.modal-load-program .box-image .linenumber div .target,
.modal.modal-add-element-queue .box-image .linenumber div .target {
color: #1791ff;
font-weight: 600;
}
.modal.modal-job-add-parameter {
width: 704px;
height: 608px;
@@ -13840,13 +13898,13 @@ body {
height: calc(100vh - 80px);
background-color: #d8d8d8;
z-index: 100;
transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: transform 0.5s ease-out;
}
#main-view .handle {
display: none;
}
#main-view.liftedUp {
transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.1s ease-out 1s;
transition: transform 0.5s ease-out, box-shadow 0.1s ease-out 0.5s;
box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.2);
}
#main-view.turn-up,
@@ -13860,7 +13918,7 @@ body {
width: 100vw;
box-shadow: none;
z-index: 250;
transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: transform 0.5s ease-out;
}
#main-view-handler .handle {
background-color: #d8d8d8;
@@ -60,6 +60,7 @@ export default class ModalLoadProgram extends Vue {
currentFilterSecond: string = "";
navigationDepth: number = 0;
selectedNumberImage: number = 0;
mounted() {
if (typeof cmsClient != "undefined") {
@@ -141,7 +142,8 @@ export default class ModalLoadProgram extends Vue {
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)
IsDirectory: (i.isDirectory != null && i.isDirectory) || (i.IsDirectory != null && i.IsDirectory),
IsJob: i.isJob || i.IsJob
};
});
}
@@ -185,7 +187,7 @@ export default class ModalLoadProgram extends Vue {
} as FileInfo;
}
async fileInfo(str, fromdepth: number) {
async fileInfo(str,isJob, fromdepth: number) {
this.lastClickPath = str;
if (fromdepth == 1)
this.secondColumnData.splice(0, this.secondColumnData.length);
@@ -194,15 +196,16 @@ export default class ModalLoadProgram extends Vue {
this.selectedFile = this.toUpperCaseFileModel(
JSON.parse(cmsClient.getProgramInfo(str))
);
this.selectedFileMetadata = JSON.parse(cmsClient.readJobMetadata(str)).metadata;
console.log(this.selectedFileMetadata);
this.selectedFile.IsJob = isJob;
if(isJob){
this.selectedFileMetadata = JSON.parse(cmsClient.readJobMetadata(str)).metadata;
this.selectedNumberImage = 0;
}
}
if (!this.isLocalNavigation)
this.selectedFile = this.toUpperCaseFileModel(
await awaiter(fileService.getFileInfo(str)));
}
close() {
Factory.Get(MessageService).deleteChannel("esc_pressed");
@@ -252,5 +255,9 @@ export default class ModalLoadProgram extends Vue {
// var result = await ModalHelper.ShowModalAsync(, jobMetadata);
}
selectNumberImage(value) {
this.selectedNumberImage = value;
}
}
@@ -46,7 +46,7 @@
: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>
@click="val.IsDirectory ? navigateTo(val.Path, val.AbsolutePath, isLocalNavigation, 2,1): fileInfo(val.AbsolutePath,val.IsJob,1)"></card-folder-path>
</div>
</div>
<div class="third-column" v-if="navigationDepth <2"></div>
@@ -68,7 +68,7 @@
: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>
@click="val.IsDirectory? navigateTo(val.Path, val.AbsolutePath, isLocalNavigation, 2,2):fileInfo(val.AbsolutePath,val.IsJob,2) "></card-folder-path>
<!-- <card-folder-path name="Cliente A" @click="selectItem()" :with-arrow="false"></card-folder-path>-->
</div>
</div>
@@ -89,19 +89,37 @@
<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" v-if="!selectedFile.IsJob">
<div class="selected-item-body-image">
<img v-if="selectedFileMetadata.generics && selectedFileMetadata.generics.images[0]" :src="selectedFileMetadata.generics.images[0].base64">
<img v-if="selectedFile.PreviewBase64" :src="selectedFile.PreviewBase64">
<div v-else class="noimage">
{{'modal_load_program_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 selectedFileMetadata" :key="'line' + index">
<div class="row" v-for="(item,index) in selectedFile.Content" :key="'line' + index">
<label>{{item}}</label>
</div>
</div>
</div>
<div class="selected-item-body" v-if="selectedFile.IsJob">
<div class="box-image" v-if="selectedFileMetadata.generics.images.length > 0">
<div class="box-image-container">
<img :src="selectedFileMetadata.generics.images[selectedNumberImage].base64">
</div>
<div class="linenumber">
<div v-for="(n,i) in selectedFileMetadata.generics.images" :key="i"><button :class="{'target': i == selectedNumberImage}" @click="selectNumberImage(i)">{{i+1}}</button></div>
</div>
</div>
<div v-else class="selected-item-body-image">
<div class="noimage">
{{'modal_load_program_lbl_img_not_found' | localize('Preview non disponibile')}}
</div>
</div>
<div class="box-description" v-if="selectedFileMetadata.generics.description">
{{selectedFileMetadata.generics.description}}
</div>
</div>
</div>
<div class="selected-item" v-if="!selectedFile">
<div class="notselecteditem">