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

Ending app-setup modal. WIP Retrieving machine from API

Browse Source
This commit is contained in:
Nicola Carminati
2019-06-26 08:34:53 +02:00
parent 7b7e72b14d
commit 8c708b3832
8 changed files with 101 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.ts
+17 -5
View File
@@ -2,7 +2,8 @@ import Vue from "vue";
import Component from "vue-class-component";
import { Watch } from "vue-property-decorator";
import Header from "./components/base/app-header.vue";
import footer from "./components/base/app-footer.vue";
import Footer from "./components/base/app-footer.vue";
import Setup from "./components/base/app-setup.vue";
import 'jquery';
import 'popper.js';
@@ -19,26 +20,31 @@ import { AppModel,appModelActions } from "./store/app.store";
name: "app",
components: {
AppHeader: Header,
appFooter: footer,
appFooter: Footer,
appSetup: Setup,
}
})
export default class app extends Vue {
loadingConfigurationRunning = true;
loadingConfigurationError = true;
_service: Service;
intervalHandle = null;
beforeMount() {
this._service = new Service();
}
mounted() {
this.setupPage()
}
setupPage(){
setupPage(){
if(this.intervalHandle != null)
clearInterval(this.intervalHandle);
this.loadingConfigurationRunning = true;
this.loadingConfigurationError = false;
new Service().getSetupConfiguration().then(this.loadingOk).catch(this.loadingError);
this._service.getSetupConfiguration().then(this.loadingOk).catch(this.loadingError);
}
loadingError(){
@@ -48,6 +54,12 @@ export default class app extends Vue {
loadingOk(){
this.loadingConfigurationRunning = false;
this.loadingConfigurationError = false;
this.intervalHandle = setInterval(this.loadMachineStatus,1000);
}
loadMachineStatus(){
//this._service.getMachineStatus();
console.log("Test");
}
};
src/App.vue
+3 -16
View File
@@ -1,24 +1,11 @@
<template>
<div id="app">
<app-header></app-header>
<!-- Page Content -->
<app-header></app-header>
<div class="container">
<router-view />
</div>
</div>
<app-footer></app-footer>
<div id="loader" v-if="loadingConfigurationRunning">
<span>
<i class="fas fa-spinner fa-spin" v-if="!loadingConfigurationError"></i>
<span v-else>
<i class="fas fa-exclamation"></i>
<h3>Error during Setup</h3>
<button type="button" class="btn btn-danger" @click="setupPage">Reload</button>
</span>
</span>
</div>
<app-setup :isLoading="loadingConfigurationRunning" :isInError="loadingConfigurationError" @reload-click="setupPage" ></app-setup>
</div>
</template>
<script src="./App.ts" lang="ts"></script>
src/assets/style/style.css
+11 -5
View File
@@ -214,7 +214,7 @@ body ::-webkit-scrollbar-track:active {
body ::-webkit-scrollbar-corner {
background: transparent;
}
body #loader {
body #setupContainer {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
@@ -227,7 +227,7 @@ body #loader {
align-items: center;
justify-content: center;
}
body #loader span {
body #setupContainer #setupModal {
background-color: #cccccc;
width: 20vw;
height: 30vh;
@@ -237,13 +237,19 @@ body #loader span {
justify-content: center;
border-radius: 5px;
}
body #loader span i {
body #setupContainer #setupModal .setupIcon {
font-size: 10vw;
}
body #loader span span i {
body #setupContainer #setupModal #errorPanel {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
body #setupContainer #setupModal #errorPanel .setupIcon {
font-size: 8vw;
}
body #loader span span h3 {
body #setupContainer #setupModal #errorPanel h3 {
margin-top: 1vw;
font-size: 2vw;
}
src/components/base/app-setup.ts
+33
View File
@@ -0,0 +1,33 @@
import Vue from "vue";
import Component from "vue-class-component";
@Component({
name: "app-setup",
components: { },
props:{
isLoading:
{
type: Boolean,
default: false
},
isInError:
{
type: Boolean,
default: false
},
}
})
export default class AppSetup extends Vue {
beforeMount() {
}
mounted() {
}
setupPage(){
this.$emit('reload-click')
}
};
src/components/base/app-setup.vue
+15
View File
@@ -0,0 +1,15 @@
<template>
<div id="setupContainer" v-if="isLoading">
<span id="setupModal" >
<i class="fas fa-spinner fa-spin setupIcon" v-if="!isInError"></i>
<span v-else id="errorPanel" >
<i class="fas fa-exclamation setupIcon"></i>
<h3>Error during Setup</h3>
<button type="button" class="btn btn-danger" @click="setupPage">Reload</button>
</span>
</span>
</div>
</template>
<script src="./app-setup.ts" lang="ts"></script>
src/less/colors.less
+2
View File
@@ -3,5 +3,7 @@
@color-black-100: #000;
@color-white-100: #FFF;
@color-grey-light: #5d5d5d;
@color-grey-light2: #cccccc;
@color-grey-dark-semi: rgba(61, 61, 61, 0.5);
@color-grey-dark-hover: rgba(0,0,0,0.8);
src/less/style.less
+12 -7
View File
@@ -52,9 +52,9 @@ body{
background: transparent;
}
#loader{
#setupContainer{
position: absolute;
background-color: rgba(0,0,0,0.8);
background-color: @color-grey-dark-hover;
top: 0;
left: 0;
width: 100%;
@@ -64,8 +64,8 @@ body{
flex-flow: wrap;
align-items: center;
justify-content: center;
span{
background-color: #cccccc;
#setupModal{
background-color: @color-grey-light2;
width: 20vw;
height: 30vh;
display: flex;
@@ -74,12 +74,17 @@ body{
justify-content: center;
border-radius: 5px;
i{
.setupIcon{
font-size: 10vw;
}
span{
i{
#errorPanel{
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
.setupIcon{
font-size: 8vw;
}
h3{
src/service/index.ts
+8 -1
View File
@@ -1,5 +1,5 @@
import { baseRestService } from "./baseRestService";
import { store,AppModel,appModelActions} from "../store/app.store";
import { store,AppModel,appModelActions,machineModel} from "../store/app.store";
export class Service extends baseRestService {
@@ -11,6 +11,13 @@ export class Service extends baseRestService {
if(result)
appModelActions.Setup(store,result);
}
async getMachineStatus() {
let result = await this.Get(this.DEVELOP_SERVER + "/MSE/Machines") as Array<machineModel>;
if(result)
appModelActions.Setup(store,{machines:result});
}
}