add

Strides-Admin/src/views/Administrator.vue

@@ -145,6 +145,19 @@
                 maxlength="50"/>
             </el-form-item>
           </el-col>
+          <el-col :xs="4" :sm="8" :md="4" :lg="6" :xl="6">
+            <p></p>
+          </el-col>
+          <el-col :xs="24" :sm="16" :md="10" :lg="9" :xl="9" v-if="featuresGroup >= 3" style="overflow: hidden;">
+            <el-checkbox-group v-model="settingsForm.enabledFeatures">
+              <template v-for="(item, index) in features">
+                <el-checkbox
+                  :key="index"
+                  v-if="index >= 6 && index < 8"
+                  :label="item.value">{{item.name}}</el-checkbox>
+              </template>
+            </el-checkbox-group>
+          </el-col>
         </el-row>
         <el-row :gutter="20">
           <el-col :xs="24" :sm="16" :md="10" :lg="9">
@@ -253,6 +266,7 @@
       return {
         loading: true,
         settingsForm: {
+          enabled: false,
           recipients: [],
           enabledFeatures: []
         },
@@ -568,4 +582,16 @@
       padding: 15px 40px;
     }
   }
+  .el-checkbox-group .el-checkbox {
+    display: flex;
+    align-items: center;
+  }
+  .el-checkbox >>> .el-checkbox__input {
+    height: 14px;
+    line-height: 14px;
+  }
+  .el-checkbox >>> .el-checkbox__label {
+    word-break: break-all;
+    white-space: normal;
+  }
 </style>

Strides-Admin/src/views/site/AddSite.vue

@@ -96,7 +96,76 @@
             </div>
           </el-col>
         </el-row>
-      <div class="sparator"></div>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item
+              prop="siteInformation.type"
+              label="Type:">
+              <div class="type-row" v-for="(item, index) in siteTypeTable">
+                <el-time-picker
+                  v-model="item.startTime"
+                  format="HH:mm"
+                  value-format="HH:mm"
+                  :placeholder="item.label"
+                  :disabled="isSiteTypeEnable(index)"/>
+                <el-time-picker
+                  v-model="item.endTime"
+                  format="HH:mm"
+                  value-format="HH:mm"
+                  placeholder="End Time"
+                  :disabled="isSiteTypeEnable(index)"/>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div class="sparator"></div>
+        <div class="section-title">
+          EMAIL
+        </div>
+        <el-form
+          :model="this"
+          :rules="rule"
+          ref="recipForm"
+          label-position="left"
+          label-width="150px">
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="16" :md="10" :lg="9">
+              <el-form-item
+                label="Recipients:"
+                prop="recipient">
+                <el-input
+                  class="add-text"
+                  v-model="recipient"
+                  placeholder="Add text"
+                  maxlength="50"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-button
+                type="primary"
+                icon="el-icon-plus"
+                @click="addRecipient">
+                Add
+              </el-button>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item
+                label="Added Recipients:">
+                <div class="receip-item" v-for="(item, index) in recipients" :key="index">
+                  <span>{{item}}</span>
+                  <i class="el-icon-close" @click="deleteRecipient(index)"></i>
+                </div>
+                <div
+                  class="link-button"
+                  v-if="recipients.length > 0"
+                  @click="clearAllRecipient">Clear All</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      <!-- <div class="sparator"></div>
       <div class="section-title">
         TIME CONFIGURATION
       </div>
@@ -138,7 +207,7 @@
             </el-time-picker>
           </template>
         </el-table-column>
-      </el-table>
+      </el-table> -->
         <!-- prop="siteInformation.type"
         label="Type">
         <el-select
@@ -629,6 +698,8 @@ export default {
       companyOptions: [],
       chargingProfileOPtions: [],
       
+      recipient: '',
+      recipients: [],
       siteTypeTable: [{
         siteType: "",
         allDay: false,
@@ -660,7 +731,7 @@ export default {
           siteName: '',
           latitude: '',
           longitude: '',
-          type: '',
+          type: 'PUBLIC',
         },
         additionalInformation: {
           operatingHours: '',
@@ -705,7 +776,13 @@ export default {
           everyMinute: ''
         }
       },
-
+      rule: {
+        "recipient": {
+          pattern: /^[a-zA-Z0-9]+[\S]+@[a-zA-Z0-9_-]+[\.][\Sa-zA-Z]+$/,
+          trigger: 'blur',
+          message: 'Please type a correct recipient'
+        }
+      },
       rules: {
         siteInformation: {
           siteName: {
@@ -1044,6 +1121,28 @@ export default {
         }
       })
     },
+    addRecipient() {
+      if (this.recipient) {
+        this.$refs["recipForm"].validate(result => {
+          if (result) {
+            this.recipients.push(this.recipient);
+            this.recipient = "";
+          }
+        });
+      }
+    },
+    deleteRecipient(index) {
+      this.recipients.splice(index, 1);
+    },
+    clearAllRecipient() {
+      this.$confirm('Clear all recipients?', 'Prompt', {
+        confirmButtonText: 'Confirm',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      }).then(res => {
+        this.recipients = [];
+      })
+    },
     addSiteWithForm() {
       const {
         siteName,
@@ -1143,7 +1242,8 @@ export default {
         additionalNotes,
         loadBalancing: this.balancingForm.loadBalancing,
         staticMaxAmpere: this.balancingForm.staticMaxAmpere,
-        ...this.siteForm.idle
+        ...this.siteForm.idle,
+        emails: this.recipients
       };
 
       site.addSite(data)
@@ -1212,6 +1312,7 @@ export default {
 </script>
 
 <style scoped lang='scss'>
+  @import '../../styles/element-ui.scss';
   @import '../../styles/variables.scss';
 
   .view-container {
@@ -1284,19 +1385,14 @@ export default {
   .cancel-button {
     width: 94px;
     height: 40px;
-    color: #555;
-    background: #FFFFFF;
-    border: 1px solid #001489;
-    box-sizing: border-box;
-    border-radius: 4px;
   }
 
   .confirm-button {
     width: 94px;
     height: 40px;
     margin-left: 20px;
-    background: #001489;
-    border: 1px solid #001489;
+    background: $--color-primary;
+    border: 1px solid $--color-primary;
     box-sizing: border-box;
     border-radius: 4px;
   }
@@ -1311,4 +1407,39 @@ export default {
     margin-left: -5px;
     padding-right: 10px;
   }
+  .type-row {
+    display: flex;
+    align-items: center;
+    padding-bottom: 10px;
+  }
+  .type-row > div {
+    margin-right: 10px;
+  }
+  .link-button {
+    color: #3179E4;
+    font-size: 14px;
+    cursor: pointer;
+    margin: 0 -10px;
+    padding: 0 10px;
+    display: inline-block;
+    white-space: nowrap;
+    text-decoration: underline;
+  }
+  .receip-item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    line-height: 1em;
+    padding-top: 10px;
+  }
+  .receip-item i {
+    color: #666;
+    padding: 0 10px;
+    cursor: pointer;
+  }
+  .receip-item i:hover,
+  .receip-item i:active,
+  .link-button:hover {
+    color: #ff5500;
+  }
 </style>

Strides-Admin/src/views/site/UpdateSite.vue

@@ -121,6 +121,75 @@
             </div>
           </el-col>
         </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item
+              prop="siteInformation.type"
+              label="Type:">
+              <div class="type-row" v-for="(item, index) in siteTypeTable">
+                <el-time-picker
+                  v-model="item.startTime"
+                  format="HH:mm"
+                  value-format="HH:mm"
+                  :placeholder="item.label"
+                  :disabled="isSiteTypeEnable(index)"/>
+                <el-time-picker
+                  v-model="item.endTime"
+                  format="HH:mm"
+                  value-format="HH:mm"
+                  placeholder="End Time"
+                  :disabled="isSiteTypeEnable(index)"/>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div class="sparator"></div>
+        <div class="section-title">
+          EMAIL
+        </div>
+        <el-form
+          :model="this"
+          :rules="rule"
+          ref="recipForm"
+          label-position="left"
+          label-width="150px">
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="16" :md="10" :lg="9">
+              <el-form-item
+                label="Recipients:"
+                prop="recipient">
+                <el-input
+                  class="input-text"
+                  v-model="recipient"
+                  placeholder="Add text"
+                  maxlength="50"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-button
+                type="primary"
+                icon="el-icon-plus"
+                @click="addRecipient">
+                Add
+              </el-button>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item
+                label="Added Recipients:">
+                <div class="receip-item" v-for="(item, index) in recipients" :key="index">
+                  <span>{{item}}</span>
+                  <i class="el-icon-close" @click="deleteRecipient(index)"></i>
+                </div>
+                <div
+                  class="link-button"
+                  v-if="recipients.length > 0"
+                  @click="clearAllRecipient">Clear All</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
         <div class="sparator"></div>
         <div class="section-title">
           TIME CONFIGURATION
@@ -605,6 +674,9 @@ export default {
         maxRows: 6,
       },
       pageLoading: false,
+      
+      recipient: '',
+      recipients: [],
       siteTypeTable: [{
         siteType: "",
         allDay: false,
@@ -630,7 +702,7 @@ export default {
           siteName: '',
           latitude: '',
           longitude: '',
-          type: '',
+          type: 'PUBLIC',
         },
         additionalInformation: {
           operatingHours: '',
@@ -669,7 +741,13 @@ export default {
           everyMinute: ''
         }
       },
-
+      rule: {
+        "recipient": {
+          pattern: /^[a-zA-Z0-9]+[\S]+@[a-zA-Z0-9_-]+[\.][\Sa-zA-Z]+$/,
+          trigger: 'blur',
+          message: 'Please type a correct recipient'
+        }
+      },
       rules: {
         siteInformation: {
           siteName: {
@@ -932,7 +1010,7 @@ export default {
               endlessService,
               additionalNotes,
               operatingHours,
-
+              emails = [],
               siteName,
               //siteType,
               siteTypes,
@@ -976,7 +1054,8 @@ export default {
             this.updateSiteModel.idle.effectiveFrom = data.effectiveFrom
             this.updateSiteModel.idle.effectiveDate = data.effectiveDate
             this.updateSiteModel.idle.enableIdleFee = data.enableIdleFee
-
+            
+            if (emails) this.recipients = emails;
             chargeRates.forEach(item => {
               if (item.fleetCompanyId) {
                 const index = this.updateSiteModel.specialChargeRates.length - 1
@@ -1286,6 +1365,28 @@ export default {
         }
       })
     },
+    addRecipient() {
+      if (this.recipient) {
+        this.$refs["recipForm"].validate(result => {
+          if (result) {
+            this.recipients.push(this.recipient);
+            this.recipient = "";
+          }
+        });
+      }
+    },
+    deleteRecipient(index) {
+      this.recipients.splice(index, 1);
+    },
+    clearAllRecipient() {
+      this.$confirm('Clear all recipients?', 'Prompt', {
+        confirmButtonText: 'Confirm',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      }).then(res => {
+        this.recipients = [];
+      })
+    },
     handleClickCancleButton() {
       this.$router.go(-1)
     },
@@ -1394,7 +1495,8 @@ export default {
         siteChargingProfiles: chargeProfiles,
         loadBalancing: this.balancingForm.loadBalancing,
         staticMaxAmpere: this.balancingForm.staticMaxAmpere,
-        ...this.updateSiteModel.idle
+        ...this.updateSiteModel.idle,
+        emails: this.recipients
       };
 
       site.updateSite(data)
@@ -1456,6 +1558,7 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+  @import '../../styles/element-ui.scss';
   @import '../../styles/variables.scss';
 
   .view-container {
@@ -1466,7 +1569,7 @@ export default {
   }
 
   .view-content {
-    padding: 15px 80px;
+    padding: 15px 60px;
     border-radius: 6px;
     background-color: white;
   }
@@ -1528,19 +1631,14 @@ export default {
   .cancel-button {
     width: 94px;
     height: 40px;
-    color: #555;
-    background: #FFFFFF;
-    border: 1px solid #001489;
-    box-sizing: border-box;
-    border-radius: 4px;
   }
 
   .confirm-button {
     width: 94px;
     height: 40px;
     margin-left: 20px;
-    background: #001489;
-    border: 1px solid #001489;
+    background: $--color-primary;
+    border: 1px solid $--color-primary;
     box-sizing: border-box;
     border-radius: 4px;
   }
@@ -1556,4 +1654,39 @@ export default {
     margin-left: -5px;
     padding-right: 10px;
   }
+  .type-row {
+    display: flex;
+    align-items: center;
+    padding-bottom: 10px;
+  }
+  .type-row > div {
+    margin-right: 10px;
+  }
+  .link-button {
+    color: #3179E4;
+    font-size: 14px;
+    cursor: pointer;
+    margin: 0 -10px;
+    padding: 0 10px;
+    display: inline-block;
+    white-space: nowrap;
+    text-decoration: underline;
+  }
+  .receip-item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    line-height: 1em;
+    padding-top: 10px;
+  }
+  .receip-item i {
+    color: #666;
+    padding: 0 10px;
+    cursor: pointer;
+  }
+  .receip-item i:hover,
+  .receip-item i:active,
+  .link-button:hover {
+    color: #ff5500;
+  }
 </style>