| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more contributor |
| license agreements. See the NOTICE.txt file distributed with this work for |
| additional information regarding copyright ownership. The ASF licenses this |
| file to you under the Apache License, Version 2.0 (the "License"); you may not |
| use this file except in compliance with the License. You may obtain a copy of |
| the License at |
| http://www.apache.org/licenses/LICENSE-2.0 |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, WITHOUT |
| WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the |
| License for the specific language governing permissions and limitations under |
| the License. |
| --> |
| <template> |
| <div id="app"> |
| <v-app > |
| |
| <controllbar /> |
| <v-navigation-drawer |
| :mini-variant.sync="mini" |
| v-model="drawer" |
| hide-overlay |
| absolute |
| stateless |
| > |
| |
| <v-toolbar flat class="transparent"> |
| |
| <v-list class="pa-0"> |
| <v-list-tile avatar> |
| <v-list-tile-avatar> |
| <img width=10px height=10px src="leaf-logo.png"> |
| </v-list-tile-avatar> |
| |
| <v-list-tile-content> |
| <v-list-tile-title>Proteus</v-list-tile-title> |
| </v-list-tile-content> |
| |
| <v-list-tile-action> |
| <v-btn |
| icon |
| @click.stop="mini = !mini" |
| > |
| <v-icon>chevron_left</v-icon> |
| </v-btn> |
| </v-list-tile-action> |
| </v-list-tile> |
| </v-list> |
| </v-toolbar> |
| <v-spacer/> |
| <v-list class="pt-0" dense> |
| <v-divider></v-divider> |
| |
| <v-list-tile |
| v-for="item in items" |
| :key="item.title" |
| @click="selectmenu(item)" |
| > |
| <v-list-tile-action> |
| <v-icon>{{ item.icon }}</v-icon> |
| </v-list-tile-action> |
| |
| <v-list-tile-content> |
| <v-list-tile-title>{{ item.title }}</v-list-tile-title> |
| </v-list-tile-content> |
| </v-list-tile> |
| </v-list> |
| </v-navigation-drawer> |
| <div id="contentpane" > |
| |
| <v-layout row wrap v-if="progress"> |
| <v-flex xs3> |
| <filelistcomp/> |
| </v-flex> |
| |
| <v-flex xs3> |
| <progresscomp/> |
| <statisticscomp/> |
| </v-flex> |
| <v-flex xs6> |
| <section > |
| <barchartcomp /> |
| <piechart/> |
| </section> |
| </v-flex> |
| |
| </v-layout> |
| <section v-else-if="stateView=='summary'"> |
| <projectstable /> |
| <v-flex xs12> |
| <section> |
| <bublechartcomp/> |
| </section> |
| </v-flex> |
| <v-spacer /> |
| |
| <v-layout row> |
| |
| <licensepiecomp/> |
| <v-spacer/> |
| <topmimepiecomp/> |
| |
| </v-layout> |
| |
| </section> |
| <auditsummarycomp v-else/> |
| <v-snackbar |
| v-model="snackbar" |
| top |
| right |
| :timeout="6000" |
| |
| > |
| <v-badge left center> |
| <span slot="badge">{{snackbarmessageindex}}</span> |
| |
| </v-badge> |
| <v-icon |
| @click="snackbarmessageindex--" |
| color="grey lighten-1" |
| > |
| navigate_before |
| </v-icon> |
| {{snackbarmessages[snackbarmessageindex]}} |
| |
| <v-icon |
| color="grey lighten-1" |
| @click="snackbarmessageindex++; |
| if(snackbarmessageindex>=snackbarmessages.length)snackbarmessageindex=snackbarmessages.length-1" |
| > |
| navigate_next |
| </v-icon> |
| <v-icon |
| color="red lighten-1" |
| @click="removeelement(snackbarmessageindex);" |
| > |
| clear |
| </v-icon> |
| <v-btn |
| color="pink" |
| flat |
| @click="snackbar = false" |
| > |
| Close |
| </v-btn> |
| </v-snackbar> |
| </div> |
| |
| <v-spacer/> |
| <v-card id="footercard"> |
| <img height="80px" src="logo.png"> |
| </v-card> |
| |
| </v-app> |
| </div> |
| </template> |
| <script> |
| |
| |
| import controllbar from './components/controll_bar.vue' |
| import projectstable from './components/projectstable.vue' |
| import barchartcomp from './components/barchartcomp.vue' |
| import piechart from './components/piechart.vue' |
| import filelistcomp from './components/filelistcomp.vue' |
| import statisticscomp from './components/statisticscomp.vue' |
| import progresscomp from './components/progresscomp.vue' |
| import bublechartcomp from './components/bublechartcomp.vue' |
| import licensepiecomp from './components/licensepiecomp.vue' |
| import topmimepiecomp from './components/topmimepiecomp.vue' |
| import auditsummarycomp from './components/auditsummarycomp.vue' |
| import store from './store/store' |
| export default { |
| name: 'app', |
| store, |
| components: { |
| |
| controllbar, |
| projectstable, |
| barchartcomp, |
| filelistcomp, |
| statisticscomp, |
| piechart, |
| progresscomp, |
| bublechartcomp, |
| licensepiecomp, |
| topmimepiecomp, |
| auditsummarycomp |
| }, |
| data(){ |
| return{ |
| snackbar:false, |
| snackbarmessage:'', |
| snackbarmessageindex:0, |
| snackbarmessages:[], |
| drawer: true, |
| items: [ |
| { title: 'Summary', icon: 'dashboard' }, |
| { title: 'Audit', icon: 'question_answer' }, |
| |
| ], |
| mini: true, |
| right: null |
| } |
| }, |
| methods:{ |
| setHost(){ |
| this.$log.info(location.origin) |
| store.commit("setOrigin",location.origin); |
| }, |
| selectmenu(menu){ |
| let options = { |
| html: false, // set to true if your message contains HTML tags. eg: "Delete <b>Foo</b> ?" |
| loader: false, // set to true if you want the dailog to show a loader after click on "proceed" |
| reverse: false, // switch the button positions (left to right, and vise versa) |
| okText: 'Yes', |
| cancelText: 'No', |
| animation: 'zoom', // Available: "zoom", "bounce", "fade" |
| type: 'basic', // coming soon: 'soft', 'hard' |
| verification: 'continue', // for hard confirm, user will be prompted to type this to enable the proceed button |
| verificationHelp: 'Type "[+:verification]" below to confirm', // Verification help text. [+:verification] will be matched with 'options.verification' (i.e 'Type "continue" below to confirm') |
| clicksCount: 3, // for soft confirm, user will be asked to click on "proceed" btn 3 times before actually proceeding |
| backdropClose: false // set to true to close the dialog when clicking outside of the dialog window, i.e. click landing on the mask |
| }; |
| if(menu.title=="Summary"){ |
| if(this.progress){ |
| |
| this.$dialog.confirm({title:"Confirm",body:'Currently on progress, do you want to close ?'},options) |
| .then(function () { |
| store.commit("setprogress",false); |
| }) |
| .catch(function () { |
| |
| }); |
| } |
| store.commit("setView","summary"); |
| }else if(menu.title=="Audit"){ |
| if(this.progress){ |
| |
| this.$dialog.confirm({title:"Confirm",body:'Currently on progress, do you want to close ?'},options) |
| .then(function () { |
| store.commit("setprogress",false); |
| }) |
| .catch(function () { |
| |
| }); |
| } |
| store.commit("setView","audit"); |
| } |
| this.showsnackbar(); |
| }, |
| showsnackbar(){ |
| this.snackbarmessageindex = this.snackbarmessages.length-1; |
| if(this.snackbarmessageindex>-1) this.snackbar=true; |
| }, |
| addsnackbarmessage(message){ |
| if(this.snackbarmessages.length==10){ |
| this.snackbarmessages.shift(); |
| } |
| this.snackbarmessages.push(message); |
| |
| }, |
| removeelement(position){ |
| this.snackbarmessages.splice(position,1); |
| if(this.snackbarmessageindex!=0)this.snackbarmessageindex--; |
| } |
| |
| }, |
| computed:{ |
| progress (){ |
| return store.state.progress; |
| }, |
| stateView(){ |
| return store.state.view; |
| }, |
| }, |
| mounted(){ |
| this.setHost(); |
| } |
| } |
| </script> |
| |
| <style> |
| #app { |
| font-family: 'Avenir', Helvetica, Arial, sans-serif; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| text-align: center; |
| color: #2c3e50; |
| margin-top: 0px; |
| } |
| |
| #contentpane{ |
| padding-left: 10%; |
| padding-right: 10%; |
| margin-bottom: 80px; |
| } |
| #footercard{ |
| background-color: #2c3e50; |
| width: 100%; |
| height: auto; |
| position: fixed; |
| bottom: 0%; |
| z-index: 900; |
| } |
| |
| #logospace{ |
| width: 80%; |
| } |
| </style> |
