add label color

Strides-Admin/src/views/charge/RegisteredChargeStations.vue

@@ -197,7 +197,7 @@ export default {
           criteria: '',
           dataStatus: '',
           providerPk: '',
-          heartbeatPeriod: 'ALL'
+          heartbeatPeriod: ''
         }
       },
       listLoading: true,

Strides-Admin/src/views/report/ReportV2.vue

@@ -30,7 +30,7 @@
           clearable
           @change="changeDateRange"
           class="filter-input"
-          v-if="filter.pageVo.reportType === 'APENDIXF'"/>
+          v-if="filter.pageVo.reportType === 'APENDIXF' || filter.pageVo.reportType === 'APENDIXH'"/>
         <el-date-picker
           v-model="filter.pageVo.year"
           type="year"
@@ -39,9 +39,9 @@
           :clearable="false"
           class="filter-input half"
           placeholder="Filter Year"
-          v-show="filter.pageVo.reportType != 'APENDIXF'"/>
+          v-show="filter.pageVo.reportType != 'APENDIXF' && filter.pageVo.reportType != 'APENDIXH'"/>
         <el-select
-          v-show="filter.pageVo.reportType != 'APENDIXF'"
+          v-show="filter.pageVo.reportType != 'APENDIXF' && filter.pageVo.reportType != 'APENDIXH'"
           v-model="filter.pageVo.month"
           class="filter-input half"
           placeholder="Filter Month"
@@ -69,7 +69,7 @@
         <el-select
           clearable
           filterable multiple
-          v-show="filter.pageVo.reportType == 'MNTHSITE' || filter.pageVo.reportType == 'APENDIXF'"
+          v-show="filter.pageVo.reportType == 'MNTHSITE' || filter.pageVo.reportType == 'APENDIXF' || filter.pageVo.reportType === 'APENDIXH'"
           v-model="filter.pageVo.sitePks"
           class="filter-input"
           placeholder="Sites">

Strides-Admin/src/views/site-label/detail.vue

@@ -21,7 +21,26 @@
             maxlength="30"/>
         </el-form-item>
       </div>
-      <div class="flexcc" style="margin-top: 80px;">
+      <div class="form-row">
+        <el-form-item
+          prop="siteLabelBackground"
+          class="form-item colorPanel"
+          label="Color:">
+          <el-radio-group
+            v-model="form.siteLabelBackground"
+            class="label-color-view">
+            <el-radio-button
+              v-for="(item,index) in labelColors"
+              :label="item"
+              :key="index"
+              class="label-color-item"
+              :style='"background-color:" + item + ";"'>
+              {{index}}
+            </el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+      </div>
+      <div class="flexcc" style="margin-top: 50px;">
         <el-button
           class="button"
           type="primary"
@@ -59,15 +78,28 @@ export default {
       loading: false,
       form: {
         siteLabelId: "",
-        siteLabelName: ""
+        siteLabelName: "",
+        siteLabelBackground: ""
       },
       rules: {
         siteLabelName: {
           required: true,
           message: "Label name is required",
           trigger: "blur"
+        }, 
+        siteLabelBackground: {
+          required: true,
+          trigger: "change",
+          message: "Please select a color"
         }
-      }
+      },
+      labelColors: [
+        "#001489", "#0025f9", "#417df5", "#24B4F3", "#74E1FE",
+        "#127946", "#009E81", "#14CE14", "#15e815", "#ABDC00",  
+        "#bf3f00", "#df3700", "#ff5500", "#ef9801", "#F9B70D", 
+        "#9F0511", "#B41519", "#C92A17", "#E63726", "#EB725F",
+        "#542038", "#A73EA7", "#CE4DCE", "#AC7EEB", "#CAA9DC"
+      ]
     };
   },
   watch: {
@@ -83,7 +115,8 @@ export default {
     init() {
       this.form = {
         siteLabelId: "",
-        siteLabelName: ""
+        siteLabelName: "",
+        siteLabelBackground: ""
       }
       this.loading = false;
       this.$nextTick(() => {
@@ -172,8 +205,24 @@ export default {
   margin-left: 10px;
   margin-bottom: 10px;
 }
-.form-item >>> label {
+.form-item.colorPanel {
+  overflow-x: auto;
+}
+.form-item.colorPanel >>> .el-form-item__label {
+  left: 0;
   padding: 0;
+  position: sticky;
+}
+.form-item.colorPanel >>> .el-form-item__error {
+  top: 0 !important;
+  display: flex;
+  text-align: left;
+  line-height: normal;
+  position: relative !important;
+  margin-left: 0px !important;
+}
+.form-item >>> .el-form-item__content {
+  text-align: center;
 }
 .flex-item {
   min-width: 200px;
@@ -189,4 +238,33 @@ export default {
     max-width: none;
   }
 }
+.label-color-view {
+  width: 410px;
+}
+.label-color-item {
+  margin: 1px;
+  border: none !important;
+  border-radius: 2px;
+}
+.label-color-item >>> .el-radio-button__inner {
+  width: 80px;
+  height: 40px;
+  user-select: none;
+  border: none !important;
+  color: transparent !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+.label-color-item.is-active::before {
+  color: #fff;
+  width: 80px;
+  height: 40px;
+  content: "\e6da";
+  font-size: 22px;
+  font-weight: bold;
+  text-align: center;
+  line-height: 40px;
+  position: absolute;
+  font-family: element-icons;
+}
 </style>

Strides-Admin/src/views/site-label/index.vue

@@ -50,7 +50,11 @@
         align="center"
         label="Label Name"
         prop="siteLabelName"
-        min-width="120"/>
+        min-width="120">
+        <template slot-scope="{row}">
+          <div class="site-label-name" :style='"background-color:" + row.siteLabelBackground + ";"'>{{row.siteLabelName}}</div>
+        </template>
+      </el-table-column>
       <el-table-column
         align="center"
         label="No. of Sites"
@@ -236,9 +240,18 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '../../styles/element-ui.scss';
 .filter-input {
   min-width: 100px;
   max-width: 300px;
 }
+.site-label-name {
+  color: #fff;
+  display: inline-block;
+  font-size: 14px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  background: $--color-primary;
+}
 </style>

Strides-Admin/src/views/transaction/view_transaction.vue

@@ -304,7 +304,7 @@
         })
       },
       onClickEnd() {
-        this.$confirm('This operation only settle to abnormal transactions and will not end charging. Confirm do this?', 'Warning', {
+        this.$confirm('This operation only for settling abnormal transactions and will not end charging. Select Confirm to proceed.', 'Warning', {
           confirmButtonText: 'Confirm',
           cancelButtonText: 'Cancel',
           type: 'warning'