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

Fix UI Modals

Browse Source
This commit is contained in:
Samuele E. Locatelli
2020-10-24 11:50:52 +02:00
parent bf6510c149
commit 36ef955bb6
13 changed files with 238 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Thermo.Active/wwwroot/assets/styles/base/input.less
+3
View File
@@ -55,6 +55,9 @@
padding-right: 0;
width: 100%;
padding: 10px 5px;
&:focus {
outline: 5px #1791ff auto;
}
}
select {
Thermo.Active/wwwroot/assets/styles/base/modals.less
+7 -1
View File
@@ -12,6 +12,7 @@
@modal-confirm-delete-width: 500px;
@modal-confirm-delete-height: 300px;
@modal-header-height: 64px;
@modal-header-height-half: 33px;
@modal-login-height: 560px;
@modal-login-width: 600px;
@modal-load-depot-height: 462px;
@@ -373,7 +374,7 @@
}
.body {
height: calc(~"100%"- ((@modal-header-height/2)+1));
height: calc(~"100% - " @modal-header-height-half);
display: flex;
width: 100%;
@@ -597,6 +598,7 @@
}
label {
margin-top: 10px;
margin-bottom: 5px;
}
}
@@ -633,6 +635,10 @@
}
}
}
.message-container{
width: 93%;
margin-top: 15px;
}
}
.@{modal}.machine-info {
Thermo.Active/wwwroot/assets/styles/base/saveas.less
+12 -25
View File
@@ -3,34 +3,21 @@
width: 600px;
height: 400px;
top: calc(~'50% - 250px');
section{
display: block !important;
.body{
display: flex;
flex-flow: row;
justify-content: center;
}
label{
margin-top: 22px;
font-size: 14px;
color: #878787;
margin-bottom: 4px;
}
.form-group{
margin-top: 20px;
width: 95%;
article {
input {
padding: 5px;
font-size: 18px;
font-weight: 500;
color: #6d6d6d;
height: 48px;
border-radius: 2px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
border: none;
display: flex;
flex-flow: row nowrap;
padding: 0 20px;
align-items: center;
justify-content: stretch;
label {
margin-top: 10px;
margin-bottom: 5px;
}
}
}
Thermo.Active/wwwroot/assets/styles/base/setup.less
+15 -5
View File
@@ -13,13 +13,23 @@
height: 100vh;
.notes_textarea{
border-radius: 2px;
height: 97px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
border: solid 1px #bbbcbc;
padding: 10px;
box-sizing: border-box;
resize: none;
display: block;
border-radius: 2px;
border: solid 1px #dfdfdf;
height: 120px;
font-family: 'Work Sans', sans-serif;
color: #4b4b4b;
font-size: 16px;
background-color: #f8f8f8;
margin: 0 0px;
padding-right: 0;
width: 100%;
padding: 10px 5px;
&:focus {
outline: 5px #1791ff auto;
}
}
.select_folder{
Thermo.Active/wwwroot/assets/styles/style.css
+35 -28
View File
@@ -11,13 +11,23 @@
height: 100vh;
}
.setup .notes_textarea {
border-radius: 2px;
height: 97px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
border: solid 1px #bbbcbc;
padding: 10px;
box-sizing: border-box;
resize: none;
display: block;
border-radius: 2px;
border: solid 1px #dfdfdf;
height: 120px;
font-family: 'Work Sans', sans-serif;
color: #4b4b4b;
font-size: 16px;
background-color: #f8f8f8;
margin: 0 0px;
padding-right: 0;
width: 100%;
padding: 10px 5px;
}
.setup .notes_textarea:focus {
outline: 5px #1791ff auto;
}
.setup .select_folder {
height: 48px;
@@ -732,7 +742,7 @@ article .box .body {
padding: 0px 23px;
}
.modal.cmsconnect-info .body {
height: calc(100%-((64px/2)+1));
height: calc(100% - 33px);
display: flex;
width: 100%;
}
@@ -923,6 +933,7 @@ article .box .body {
align-items: center;
}
.modal.cmsconnect-info .body .container .network .form-group-row .form-group label {
margin-top: 10px;
margin-bottom: 5px;
}
.modal.cmsconnect-info .body .container .network .form-group-row .break {
@@ -949,6 +960,10 @@ article .box .body {
align-items: center;
color: #7ed321;
}
.modal.cmsconnect-info .message-container {
width: 93%;
margin-top: 15px;
}
.modal.machine-info {
width: 600px;
height: 730px;
@@ -5593,6 +5608,9 @@ article .box .body {
width: 100%;
padding: 10px 5px;
}
.form-group textarea:focus {
outline: 5px #1791ff auto;
}
.form-group select {
padding: 0;
width: 100%;
@@ -24022,29 +24040,18 @@ footer .container button.big:before {
height: 400px;
top: calc(50% - 250px);
}
.modal.save-as section {
display: block !important;
}
.modal.save-as label {
margin-top: 22px;
font-size: 14px;
color: #878787;
margin-bottom: 4px;
}
.modal.save-as article input {
padding: 5px;
font-size: 18px;
font-weight: 500;
color: #6d6d6d;
height: 48px;
border-radius: 2px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
border: none;
.modal.save-as .body {
display: flex;
flex-flow: row nowrap;
padding: 0 20px;
align-items: center;
justify-content: stretch;
flex-flow: row;
justify-content: center;
}
.modal.save-as .form-group {
margin-top: 20px;
width: 95%;
}
.modal.save-as .form-group label {
margin-top: 10px;
margin-bottom: 5px;
}
a,
a:visited,
Thermo.Active/wwwroot/src/app_modules/machine/components/cmsconnect-info-activation.vue
+86
View File
@@ -0,0 +1,86 @@
<template>
<div>
<div class="box_content" v-if="!isEnrolled">
<div class="qrcode-container">
<span>{{'connect_qrcode_activation_title' | localize("Scan the QRCode")}}</span>
<div class="image">
<img v-if="qrCode" :src="QRCodeImageSrc" height="250" width="250"/>
</div>
</div>
<div class="code-container">
<span>{{'connect_link_activation_title' | localize("Or click on the")}}
<a class="link" @click="openCmsConnectPage">link</a>
{{'connect_link_activation_title' | localize("and type the code:")}}
</span>
<input class="code" type="text" id="code" @click="copyToClipboard" :value="userCode" readonly/>
</div>
</div>
<div class="box_content" v-if="isEnrolled">
<img class="success" src="assets/icons/thenounproject/noun_check.svg">
<span>{{'connect_qrcode_activation_success' | localize("The machine is already active")}}</span>
</div>
</div>
</template>
<script>
import QRCode from "qrcode";
export default {
props: {
qrCode: {default: ""},
userCode: {default: ""},
hasAuth: { default: false},
isEnrolled: { default: false},
},
components: {
},
data() {
return {
QRCodeImageSrc: "",
errorMessage: "",
QRCodeOptions: {
errorCorrectionLevel: 'H',
type: 'image/png',
quality: 1,
margin: 1,
width: 300,
color: {
dark:"#000000ff",
light:"#FFFFFF00"
}
}
};
},
mounted: async function() {
// Call api to get initial val
await this.updateQRCodeSrc(this.qrCode)
},
methods: {
async updateQRCodeSrc(link) {
if(link)
this.QRCodeImageSrc = await QRCode.toDataURL(link, this.QRCodeOption)
else
this.QRCodeImageSrc = ""
},
openCmsConnectPage() {
if(this.qrCode)
cmsClient.openExternalBrowser(this.qrCode)
},
copyToClipboard(txt){
/* Get the text field */
var copyText = document.getElementById('code')
/* Select the text field */
copyText.select();
/* Copy the text inside the text field */
document.execCommand("copy");
}
},
watch: {
qrCode: async function (n, o) {
await this.updateQRCodeSrc(n)
}
}
};
</script>
Thermo.Active/wwwroot/src/app_modules/machine/components/cmsconnect-info-dialog.ts
+4 -4
View File
@@ -6,14 +6,14 @@ import moment from "moment";
import Component from "vue-class-component";
import { CmsConnectService } from "src/services";
import { Watch } from "vue-property-decorator";
//import activationTab from "./cmsconnect-info-activation.vue"
//import messagesTab from "./cmsconnect-info-messages.vue"
import activationTab from "./cmsconnect-info-activation.vue"
import messagesTab from "./cmsconnect-info-messages.vue"
@Component({
components: {
modal: Modal,
//activationTab: activationTab,
//messagesTab: messagesTab
activationTab: activationTab,
messagesTab: messagesTab
}
})
export default class CmsconnectInfoDialog extends Vue {
Thermo.Active/wwwroot/src/app_modules/machine/components/cmsconnect-info-dialog.vue
+2 -4
View File
@@ -204,19 +204,17 @@
</div>
<!-- ACTIVATION TAB -->
<!--
<activationTab v-if="selectedTab=='activation'"
:qrCode="cmsConnectActivationData().qrCode"
:userCode="cmsConnectActivationData().userCode"
:hasAuth="cmsConnectActivationData().hasAuth"
:isEnrolled="cmsConnectActivationData().isEnrolled">
</activationTab>-->
</activationTab>
<!-- ACTIVATION TAB -->
<!--
<messagesTab v-if="selectedTab=='messages'"
@click="sendMessage">
</messagesTab>-->
</messagesTab>
</div>
</div>
</modal>
Thermo.Active/wwwroot/src/app_modules/machine/components/cmsconnect-info-messages.vue
+54
View File
@@ -0,0 +1,54 @@
<template>
<div class="message-container">
<!-- <div class="title">
<span>{{'connect_messagex_title' | localize("Insert Message")}}</span>
</div> -->
<div class="form-group">
<label class="subtitle">{{'messages_lbl_create_message' | localize("Message:")}}</label>
<textarea v-model="message"></textarea>
</div>
<div class="form-group">
<label class="subtitle" >{{'cmsconnect_info_messages_duration' | localize('Duration:')}}</label>
<input type="number" v-model="estimateTime" autocomplete="false">
</div>
<div class="form-group">
<label>{{'cmsconnect_info_messages_department' | localize("Department:")}}</label>
<select class="form-control" v-model="department" name="department">
<option :value="'MAINTENANCE'" :key="'MAINTENANCE'">{{'cmsconnect_info_messages_department_maintenance' | localize("Maintenance")}}</option>
<option :value="'PRODUCTION'" :key="'PRODUCTION'">{{'cmsconnect_info_messages_department_production' | localize("Production")}}</option>
</select>
</div>
<div class="btn-container">
<button class="btn btn-success" @click="sendMessage()" :disabled="!(message && estimateTime > 0 && department)">
{{'cmsconnect_info_btn_send_message' | localize('Send Message')}}
</button>
</div>
</div>
</template>
<script>
export default {
props: {
},
components: {
},
data() {
return {
message: "",
estimateTime: 0,
department: ""
};
},
mounted: function() {
},
methods: {
sendMessage(){
console.log(this.department);
this.$emit("click", this.message, this.estimateTime, this.department);
}
},
watch: {
}
};
</script>
Thermo.Active/wwwroot/src/app_modules_thermo/save/changeNotes.vue
+4 -6
View File
@@ -6,17 +6,15 @@
<i class="fa fa-remove"></i>
</button>
</div>
<section>
<article>
<label class="description_lbl">{{'modal_recipe_note' | localize('Note della ricetta')}}</label>
<textarea
<div class="form-group">
<label>{{'modal_recipe_note' | localize('Note della ricetta')}}</label>
<textarea
rows="3"
v-model="Note"
class="notes_textarea"
:placeholder="'modal_recipe_note' | localize('Note della ricetta')"
/>
</article>
</section>
</div>
<footer>
<button class="btn" @click="close()">{{'cancel' | localize("Annulla")}}</button>
<button class="btn btn-success" @click="save()">{{'confirm' | localize("Conferma")}}</button>
Thermo.Active/wwwroot/src/app_modules_thermo/save/duplicate.vue
+8 -12
View File
@@ -5,19 +5,15 @@
<button class="modal-close" @click="close()">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="form-group">
<label>{{'folder_name' | localize('Nuova Cartella')}}</label>
<select v-model="folder" :placeholder="'folder_name' | localize('Nuova Cartella')" >
<option v-for="folder in folderlist">{{folder}}</option>
</select>
<label>{{'recipe_name' | localize('Nome della nuova ricetta')}}</label>
<input v-model="name" :placeholder="'recipe_name' | localize('Nome della ricetta')" @keyup.enter="save()" />
</div>
<section>
<article>
<label>{{'folder_name' | localize('Nuova Cartella')}}</label>
<select v-model="folder" class="select_folder" :placeholder="'folder_name' | localize('Nuova Cartella')" >
<option v-for="folder in folderlist">{{folder}}</option>
</select>
</article>
<article>
<label>{{'recipe_name' | localize('Nome della nuova ricetta')}}</label>
<input v-model="name" :placeholder="'recipe_name' | localize('Nome della ricetta')" @keyup.enter="save()" />
</article>
</section>
<footer>
<button class="btn" @click="close()">{{'cancel' | localize("Annulla")}}</button>
<button class="btn btn-success" @click="save()" :disabled="!canDo">{{'confirm' | localize("Conferma")}}</button>
Thermo.Active/wwwroot/src/app_modules_thermo/save/save.vue
+4 -6
View File
@@ -5,13 +5,11 @@
<button class="modal-close" @click="close()">
<i class="fa fa-remove"></i>
</button>
</div>
<section>
<article>
<label>{{'recipe_name' | localize('Nome della ricetta')}}</label>
</div>
<div class="form-group">
<label>{{'recipe_name' | localize('Nome della ricetta')}}</label>
<input v-model="RecipeName" :placeholder="'recipe_name' | localize('Nome della ricetta')" @keyup.enter="save()" />
</article>
</section>
</div>
<footer>
<button class="btn" @click="close()">{{'cancel' | localize("Annulla")}}</button>
<button class="btn btn-success" @click="save()" :disabled="!canSave">{{'confirm' | localize("Conferma")}}</button>
Thermo.Active/wwwroot/src/modules/base-components/cards/modalAskName.vue
+4 -6
View File
@@ -5,13 +5,11 @@
<button class="modal-close" @click="close()">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="form-group">
<label>{{'modal_folder_create_name' | localize("Nome della cartella:")}}</label>
<input v-model="FinalName" @keyup.enter="save()" />
</div>
<section>
<article>
<label>{{'modal_folder_create_name' | localize("Nome della cartella:")}}</label>
<input v-model="FinalName" @keyup.enter="save()" />
</article>
</section>
<footer>
<button class="btn" @click="close()">{{'cancel' | localize("Annulla")}}</button>
<button class="btn btn-success" @click="save()" :disabled="!canSave">{{'confirm' | localize("Conferma")}}</button>