Merge pull request #1369 from SCADA-LTS/feature_rs23/#1359-Live-Alarm…

…s-as-the-component-on-graphical-view #1359 I added the possibility of placing the live-alarm component in …
SCADA-LTS · Sep 7, 2020 · 929bf4d · 929bf4d
2 parents bdbdb99 + 658afad
commit 929bf4d
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 29 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -37,7 +37,7 @@ branches:
   - "/^feature/#1342.*$/"
   - "/^f_1165_1183/#1198.*$/"
   - "/^feature_r23/#1349.*$/"
-  - "/^feature_r23/#1355.*$/"
+  - "/^feature_rs23/#1359.*$/"
 notifications:
   email: false
 env:

diff --git a/WebContent/WEB-INF/jsp/include/vue/vue-view.js.jsp b/WebContent/WEB-INF/jsp/include/vue/vue-view.js.jsp
@@ -2,3 +2,4 @@
 <script src="resources/js-ui/views/js/isalive-component.js"></script>
 <script src="resources/js-ui/views/js/simple-component-svg.js"></script>
 <script src="resources/js-ui/views/js/test-component.js"></script>
+<script src="resources/js-ui/liveAlarms/js/live-alarms-component.js"></script>
diff --git a/build.xml b/build.xml
@@ -233,24 +233,12 @@
 		</javac>
 	</target>
 
-<!--	<target name="new-ui-dependency">-->
-<!--		<exec dir="./ScadaLTS-UI-1" executable="npm">-->
-<!--			<arg value="install"/>-->
-<!--		</exec>-->
-<!--	</target>-->
 	<target name="new-ui-dependency">
 		<exec dir="./scadalts-ui" executable="npm">
 			<arg value="install"/>
 		</exec>
 	</target>
 
-<!--	<target name="new-ui" depends="new-ui-dependency">-->
-<!--		<exec dir="./ScadaLTS-UI-1" executable="npm">-->
-<!--			<arg value="run"/>-->
-<!--			<arg value="build"/>-->
-<!--		</exec>-->
-<!--	</target>-->
-
 	<target name="new-ui" depends="new-ui-dependency">
 		<exec dir="./scadalts-ui" executable="npm">
 			<arg value="run"/>
@@ -367,6 +355,11 @@
 			</fileset>
 		</copy>
 
+		<copy includeemptydirs="false" todir="${js-ui.dir}/views/js" taskname="copy for live-alarms js">
+			<fileset dir="${src-js-ui.dir}/js/">
+				<include name="live-alarms-component.js"/>
+			</fileset>
+		</copy>
 
 		<!-- font do zrobienia -->
 		<!-- img do zrobienia -->

diff --git a/.../src/views/components/AlarmsComponent.vue → ...nents/graphical_views/AlarmsComponent.vue b/.../src/views/components/AlarmsComponent.vue → ...nents/graphical_views/AlarmsComponent.vue
@@ -1,16 +1,16 @@
 <template>
     <div class="historical-alarms-components">
 
-        <SimplePanel class="panel_top">
+        <SimplePanel v-if="showMainToolbar=='true'" class="panel_top">
             To refresh {{toRefresh}}
             <div class="action">
-                <input type="checkbox" id="select_all"  v-on:click="toggleSelectAll()" name="Select_All" value="0" ref="selectAll" v-model="sellAll">
+                <input v-if="showSelectToAcknowledge=='true'" type="checkbox" id="select_all"  v-on:click="toggleSelectAll()" name="Select_All" value="0" ref="selectAll" v-model="sellAll">
                 &nbsp;<label class="selall" for="select_all" v-on:click="toggleSelectAll()">Select All</label><br>
             </div>
         </SimplePanel>
         <table>
             <tr>
-                <th></th>
+                <th v-if="showSelectToAcknowledge=='true'"></th>
                 <th>Activation Timestamp</th>
                 <th>Inactivation Timestamp</th>
                 <th>Variable name</th>
@@ -22,7 +22,7 @@
                         inactivation: isInactivation(item['activation-time'],item['inactivation-time'],item.level)
                     }"
             >
-                <td>
+                <td v-if="showSelectToAcknowledge=='true'">
                     <input v-if=" item != undefined && item['inactivation-time'] != undefined && item['inactivation-time'].trim().length>0"
                            type="checkbox" name="ActivationAction"
                            :value="item.id" v-model="to_acknowledges">
@@ -33,7 +33,7 @@
             </tr>
         </table>
 
-        <SimplePanel>
+        <SimplePanel v-if="showPagination=='true'">
 
             <div class="pagination">
                 <SimplePagination
@@ -47,7 +47,8 @@
             </div>
 
         </SimplePanel>
-        <div class="action_bottom">
+
+        <div v-if="showAcknowledgeBtn=='true'" class="action_bottom" >
             <button v-on:click="acknowledge()">Acknowledge Störung/Alarms</button>
         </div>
     </div>
@@ -63,6 +64,7 @@
         components: {
             ...Components,
         },
+      props: ['pShowAcknowledgeBtn', 'pShowMainToolbar', 'pShowSelectToAcknowledge', 'pShowPagination', 'pMaximumNumbersOfRows'],
         data() {
             return {
                 LEVEL_FAULT: 1,
@@ -72,21 +74,35 @@
                 pageCount: 10,
                 toRefresh: 5,
                 to_acknowledges: [],
-                sellAll: false
-
+                sellAll: false,
+                showAcknowledgeBtn: this.pShowAcknowledgeBtn,
+                showMainToolbar: this.pShowMainToolbar,
+                showSelectToAcknowledge: this.pShowSelectToAcknowledge,
+                showPagination: this.pShowPagination,
+                maximumNumbersOfRows: this.pMaximumNumbersOfRows,
+                hidePagination: false
             }
         },
         methods: {
             getAlarms(page) {
 
-                let recordsCount = 20
+                let recordsCount = this.maximumNumbersOfRows
                 let loffset = String(recordsCount * (page - 1))
                 let llimit = String(recordsCount)
 
                 //store.dispatch('fakeGetLiveAlarms
                 store.dispatch('getLiveAlarms', {'offset': loffset, 'limit': llimit}).then((ret) => {
                     this.alarms = ret
-                    //console.log(JSON.stringify(this.data))
+                  if (this.alarms.length >= this.maximumNumbersOfRows || page > 1) {
+                    if (this.showPagination=='false') {
+                      this.hidePagination = true
+                    }
+                    this.showPagination = 'true'
+                  } else {
+                    if (this.hidePagination == true) {
+                      this.showPagination = 'false'
+                    }
+                  }
                 })
             },
             acknowledge() {
@@ -109,8 +125,6 @@
             toggleSelectAll() {
                 const checkboxes = document.getElementsByName('ActivationAction')
 
-                //console.log(`toRemoveCheck:${JSON.stringify(this.sellAll)}`)
-
                 if (this.sellAll) {
                     this.to_acknowledges = []
                 } else if (checkboxes != null && checkboxes != undefined) {
@@ -177,7 +191,23 @@
             },
         },
         created() {
-            this.getAlarms(1);
+          if (this.showAcknowledgeBtn === undefined) {
+             this.showAcknowledgeBtn = 'true'
+          }
+
+          if (this.showMainToolbar === undefined) {
+            this.showMainToolbar = 'true'
+          }
+          if (this.showSelectToAcknowledge === undefined) {
+            this.showSelectToAcknowledge = 'true'
+          }
+          if (this.showPagination === undefined) {
+            this.showPagination = 'true'
+          }
+          if (this.maximumNumbersOfRows == undefined) {
+            this.maximumNumbersOfRows = 20
+          }
+          this.getAlarms(1);
         },
         mounted() {
             setInterval(

diff --git a/scadalts-ui/src/main.js b/scadalts-ui/src/main.js
@@ -13,7 +13,6 @@ import CMP from './components/graphical_views/cmp/CMP'
 import SimpleComponentSVG from './components/graphical_views/SimpleComponentSVG'
 import ExportImportPointHierarchy from './components/point_hierarchy/ExportImportPointHierarchy'
 import SleepAndReactivationDS from './components/forms/SleepAndReactivationDS'
-// import ExampleChartCmp from './views/components/ExampleChartCmp'
 import WatchListChartWidget from './components/watch_list/WatchListChartWidget'
 import VueLodash from 'vue-lodash'
 
@@ -24,6 +23,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {faCoffee, faTimes, faBars, faBell, faFileMedicalAlt, faInfo, faListAlt} from '@fortawesome/free-solid-svg-icons'
 import i18n from './i18n'
+import LiveAlarms from './components/graphical_views/AlarmsComponent'
 
 library.add(faCoffee, faTimes, faBars, faBell, faFileMedicalAlt, faInfo, faListAlt)
 
@@ -194,3 +194,24 @@ for (let x = 0; x < 10; x++) {
     }).$mount(`#${chartId}`)
   }
 }
+
+if (window.document.getElementById('live-alarms') != undefined) {
+
+  console.log(`test+ ${window.document.getElementById('live-alarms').getAttribute('show-acknowledge-btn')}`)
+
+  new Vue({
+    store,
+    render: h => h(LiveAlarms, {
+      props:
+          {
+            pShowAcknowledgeBtn: window.document.getElementById('live-alarms').getAttribute('show-acknowledge-btn'),
+            pShowMainToolbar: window.document.getElementById('live-alarms').getAttribute('show-main-toolbar'),
+            pShowSelectToAcknowledge: window.document.getElementById('live-alarms').getAttribute('show-select-to-acknowledge'),
+            pShowPagination: window.document.getElementById('live-alarms').getAttribute('show-pagination'),
+            pMaximumNumbersOfRows: window.document.getElementById('live-alarms').getAttribute('max-number-of-rows')
+          }
+    })
+  }).$mount('#live-alarms')
+
+}
+
diff --git a/scadalts-ui/src/router.js b/scadalts-ui/src/router.js
@@ -69,6 +69,11 @@ export default new Router({
       path: '/example-step-line-chart-cmp',
       name: 'example-step-line-chart-cmp',
       component: () => import(/* webpackChunkName: "step-line-chart-component" */ './views/components/ExampleStepLineChartCmp.vue')
-    }
+    },
+    {
+      path: '/example-live-alarms',
+      name: 'example-live-alarms',
+      component: () => import(/* webpackChunkName: "live-alarms-component" */ './views/components/ExampleLiveAlarms.vue')
+    },
   ]
 })
diff --git a/scadalts-ui/src/views/Alarms.vue b/scadalts-ui/src/views/Alarms.vue
@@ -10,7 +10,7 @@
 <script>
 
     import Components from '@min-gb/vuejs-components'
-    import AlarmsComponent from "./components/AlarmsComponent"
+    import AlarmsComponent from "../components/graphical_views/AlarmsComponent"
 
     export default {
         el: '#alarms',

diff --git a/scadalts-ui/src/views/Components.vue b/scadalts-ui/src/views/Components.vue
@@ -12,6 +12,7 @@
                     <li class="list-group-item"><router-link to="/example-export-import-point-hierarchy">Tests of the ExportImportPointHierarchy component</router-link></li>
                     <li class="list-group-item"><router-link to="/example-chart-cmp">Tests of the AmCharts component</router-link></li>
                     <li class="list-group-item"><router-link to="/example-step-line-chart-cmp">Tests of the StepLine Chart component</router-link></li>
+                    <li class="list-group-item"><router-link to="/example-live-alarms">Test of the Alarms component</router-link></li>
                 </ul>
             </div>
         </div>

diff --git a/scadalts-ui/src/views/components/ExampleLiveAlarms.vue b/scadalts-ui/src/views/components/ExampleLiveAlarms.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h4>Example of the use of the live alarms component</h4>
+
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-4">
+          Describe: <br/>A simple test to see if the value of the component is displayed.
+        </div>
+        <div class="col-xs-8">
+          <LiveAlarms/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+import LiveAlarms from "../../components/graphical_views/AlarmsComponent"
+
+export default {
+  name: 'example-live-alarms',
+  components: {
+    LiveAlarms,
+  }
+}
+</script>
+
+<style scoped>
+
+</style>