release admin

Strides-Admin/package.json

@@ -25,6 +25,7 @@
     "js-cookie": "^2.2.0",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
+    "qrcodejs2": "^0.0.2",
     "screenfull": "^4.2.0",
     "script-loader": "^0.7.2",
     "vue": "^2.6.14",

Strides-Admin/src/layout/components/Sidebar/Logo.vue

@@ -54,6 +54,7 @@ export default {
       width: 80%;
       max-width: 167px;
       max-height: 52px;
+      object-fit: contain;
       vertical-align: middle;
     }
 

Strides-Admin/src/styles/index.scss

@@ -185,9 +185,11 @@ aside {
 .link-type:focus {
   color: #337ab7;
   cursor: pointer;
+  transition: all .3s;
 
   &:hover {
     color: rgb(32, 160, 255);
+    text-decoration: underline;
   }
 }
 
@@ -219,7 +221,7 @@ aside {
 }
 
 .el-table thead {
-  color: #444;
+  color: #333;
   th {
     background-color: #FFFAEA;
   }
@@ -295,15 +297,20 @@ aside {
   max-width: 420px;
 }
 
-.el-button.cancel-button {
+.el-button.cancel-button,
+.el-button.el-button--primary.cancel-button {
   color: #555;
   background: #FFFFFF;
-  border: 1px solid #001489;
+  border: 1px solid $--color-primary;
   box-sizing: border-box;
   border-radius: 4px;
   transition: all .3s;
+  span {
+    color: #555;
+  }
 }
 
-.el-button.cancel-button:hover {
+.el-button.cancel-button:hover,
+.el-button.el-button--primary.cancel-button:hover {
   background: #e0e0e0;
 }

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

@@ -117,15 +117,16 @@
             <span>{{ row.vendorErrorCode }}</span>
           </template>
       </el-table-column>
-      <!--el-table-column
+      <el-table-column
         label="Action"
         prop="sitePk"
         align="center"
-        width="240">
+        width="100">
         <template slot-scope="{row}">
-          <TableAction />
+          <!-- <TableAction /> -->
+          <span class="link-type" @click="showConnectorQR(row)">QRCode</span>
         </template>
-      </el-table-column-->
+      </el-table-column>
     </el-table>
     <div class="right">
       <pagination
@@ -135,15 +136,20 @@
         :limit.sync="listQuery.limit"
         @pagination="handlePageChange" />
     </div>
+    <ConnectorTags
+      :visible="printConnector.visible"
+      :qrCode="printConnector.qrCode"
+      @hide="hideConnectorQR"/>
   </div>
 </template>
 
 <script>
   import Pagination from '@/components/Pagination' 
   import TableAction from '@/components/TableAction.vue'
+  import ConnectorTags from './components/ConnectorTags.vue'
   import api from '../../http/api/charge'
   export default {
-    components: { Pagination, TableAction },
+    components: { Pagination, TableAction, ConnectorTags },
     data() {
       return {
         filter: {
@@ -161,6 +167,10 @@
           page: 1,
           limit: 10,
         },
+        printConnector: {
+          qrCode: "",
+          visible: false
+        }
       }
     },
     created() {
@@ -204,6 +214,14 @@
         }).catch(err => {
           this.listLoading = false;
         })
+      },
+      showConnectorQR(row) {
+        this.printConnector.visible = true;
+        this.printConnector.qrCode = row.chargeBoxId + "::" + row.connectorId
+      },
+      hideConnectorQR() {
+        console.log('hide');
+        this.printConnector.visible = false;
       }
     }
   }

Strides-Admin/src/views/charge/components/ConnectorTags.vue

@@ -0,0 +1,105 @@
+<template>
+  <el-dialog
+    title="Connector QR"
+    :visible="visible"
+    width="320px"
+    top="100px"
+    :before-close="dialogBeforeClose">
+    <div id="content" class="qrcode" ref="qrCodeUrl"></div>
+    <div class="footer">
+      <el-button @click="onPrint" type="primary">Print</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import QRCode from 'qrcodejs2'
+  export default {
+    name: "ConnectorTags",
+    props: {
+      visible: {
+        type: Boolean,
+        default: false
+      },
+      qrCode: {
+        type: String,
+        default: ""
+      }
+    },
+    data() {
+      return {
+        qrcode: ""
+      };
+    },
+    mounted() {
+      
+    },
+    watch: {
+      qrCode: {
+        immediate: true,
+        handler(value) {
+          if (value) {
+            this.$nextTick(() => {
+              this.getQRCode()
+            })
+          }
+        },
+      }
+    },
+    methods: {
+      dialogBeforeClose() {
+        this.$emit("hide")
+      },
+      getQRCode() {
+        if (this.qrcode) {
+          this.qrcode.clear()
+          this.qrcode.makeCode(this.qrCode)
+        } else {
+          this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
+            text: this.qrCode,
+            width: 200,
+            height: 200,
+            colorDark: '#000000',
+            colorLight: '#ffffff',
+            correctLevel: QRCode.CorrectLevel.H,
+          })
+        }
+      },
+      onPrint() {
+        const contentHtmlString = document.querySelector('#content').outerHTML
+        let iframe = document.getElementById('print-iframe')
+        if (!iframe) {
+          iframe = document.createElement('IFRAME')
+          iframe.setAttribute('id', 'print-iframe')
+          iframe.setAttribute(
+            'style',
+            'position:absolute;width:0px;height:0px;left:-500px;top:-500px;'
+          )
+          document.body.appendChild(iframe)
+        }
+        const doc = iframe.contentWindow.document
+        doc.write(contentHtmlString)
+        doc.close()
+        iframe.contentWindow.focus()
+        iframe.contentWindow.print()
+        if (navigator.userAgent.indexOf('MSIE') > 0) {
+          document.body.removeChild(iframe)
+        }
+        this.dialogBeforeClose()
+      }
+    }
+  }
+</script>
+
+<style scoped>
+.qrcode {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.footer {
+  text-align: center;
+  padding: 30px 0 0px;
+}
+</style>

Strides-Admin/src/views/dashboard/Maps.vue

@@ -432,7 +432,7 @@ export default {
 
   .in-user-card-flag {
     @extend %card-flag;
-    background: linear-gradient(270deg, rgba(255, 204, 44, 0.1) 0%, #001489 100%);
+    background: linear-gradient(270deg, rgba(255, 204, 44, 0.1) 0%, #F3B901 100%);
   }
 
   .reserved-card-flag {
@@ -447,7 +447,7 @@ export default {
 
   .avaliable-card-flag {
     @extend %card-flag;
-    background: linear-gradient(270deg, rgba(255, 204, 44, 0.1) 0%, #001489 100%);
+    background: linear-gradient(270deg, rgba(255, 204, 44, 0.1) 0%, #82CF08 100%);
   }
 
   .unavaliable-card-flag {

Strides-Admin/src/views/login/index.vue

@@ -67,7 +67,7 @@
       </el-button>
 
     </el-form>
-    <div class="copyinfo">©2021&nbsp; EV Charging Technology Pte. Ltd.</div>
+    <div class="copyinfo">©{{copyYear}}&nbsp; Strides YTL Pte. Ltd.</div>
   </div>
 </template>
 
@@ -89,6 +89,7 @@ export default {
       }
     }
     return {
+      year: 2023,
       appName: settings.title,
       loginForm: {
         username: '',
@@ -125,6 +126,16 @@ export default {
       immediate: true
     }
   },
+  computed: {
+    copyYear() {
+      const year = new Date().getFullYear();
+      if (year > this.year) {
+        return this.year + "-" + year;
+      } else {
+        return this.year;
+      }
+    }
+  },
   created() {
     // window.addEventListener('storage', this.afterQRScan)
   },