From ae771d8df2405d955dabf79b349773694f34d05f Mon Sep 17 00:00:00 2001
From: "peggy.liu" <peggy.liu@brocas.com.tw>
Date: Fri, 4 Oct 2019 17:37:24 +0800
Subject: [PATCH 1/7] List, edit and delete project trip

---
 .../ProjectEdit/Trip/EditProjectTripBasic.vue |  52 ++-
 .../Trip/EditProjectTripCamera.vue            |  28 +-
 .../ProjectEdit/Trip/ListProjectTrip.vue      | 373 ++++++++++++++++++
 src/main.js                                   |   3 +-
 src/pages/Project/EditProject/Trip.vue        |  73 +++-
 src/sass/globals/_page.sass                   |  39 ++
 src/service/modules/trip.js                   |  17 +-
 src/store/modules/projects/trip.js            |  39 +-
 8 files changed, 574 insertions(+), 50 deletions(-)
 create mode 100644 src/components/ProjectEdit/Trip/ListProjectTrip.vue

diff --git a/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue b/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
index 8b0aaa12..a61b0692 100644
--- a/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
+++ b/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
@@ -190,7 +190,7 @@ export default {
     openEditProjectTripCamera: {
       type: Function,
     },
-    addProjectTripRequest: {
+    addEditProjectTripRequest: {
       type: Function,
     },
     setEditProjectTrip: {
@@ -301,9 +301,50 @@ export default {
               if (this.projectTripCameraLocations[value]) {
                 cameraLocations = this.projectTripCameraLocations[value].map(
                   cameraLocation => {
+                    let cameraLocationEven = undefined;
+                    let cameraLocationMark = undefined;
+                    let projectCameras = undefined;
+                    if (
+                      this.editProjectTripData.id &&
+                      this.editProjectTripData.studyAreas
+                    ) {
+                      this.editProjectTripData.studyAreas.some(
+                        studyAreaData => {
+                          if (
+                            studyAreaData.studyArea === value &&
+                            studyAreaData.cameraLocations
+                          ) {
+                            studyAreaData.cameraLocations.some(
+                              cameraLocationData => {
+                                if (
+                                  cameraLocationData.cameraLocation ===
+                                    cameraLocation.value &&
+                                  cameraLocationData.projectCameras &&
+                                  cameraLocationData.projectCameras.length > 0
+                                ) {
+                                  cameraLocationEven =
+                                    cameraLocationData.cameraLocationEven;
+                                  cameraLocationMark =
+                                    cameraLocationData.cameraLocationMark;
+                                  projectCameras =
+                                    cameraLocationData.projectCameras;
+                                  return true;
+                                }
+                              },
+                            );
+                          }
+                          if (projectCameras) {
+                            return true;
+                          }
+                        },
+                      );
+                    }
                     return {
                       cameraLocation: cameraLocation.value,
                       title: cameraLocation.label,
+                      cameraLocationEven: cameraLocationEven || '',
+                      cameraLocationMark: cameraLocationMark || '',
+                      projectCameras: projectCameras || [],
                     };
                   },
                 );
@@ -320,13 +361,16 @@ export default {
           }
 
           const { sn, member, mark } = this.projectTrip;
-          const body = {
+          let body = {
             sn,
             member,
             mark,
             studyAreas,
             date: this.projectTripDate,
           };
+          if (this.editProjectTripData.id)
+            body = { id: this.editProjectTripData.id, ...body };
+
           this.setEditProjectTrip(body);
 
           if (this.showNextStep) {
@@ -355,13 +399,13 @@ export default {
       this.showCheckCameraLocationsModal = false;
     },
     checkAddProjectTripRequest() {
-      this.addProjectTripRequest(true);
+      this.addEditProjectTripRequest(true);
       this.closeCheckStudyAreasModal();
       this.closeEditProjectTripBasic();
     },
     checkGoEditProjectTripCamera() {
       if (this.showNextStep) this.openEditProjectTripCamera();
-      else this.addProjectTripRequest(true);
+      else this.addEditProjectTripRequest(true);
 
       this.closeCheckCameraLocationsModal();
       this.closeEditProjectTripBasic();
diff --git a/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue b/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue
index 0cd3baeb..cad05758 100644
--- a/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue
+++ b/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue
@@ -117,7 +117,7 @@
             <label class="col-4">記憶卡檔案數:</label>
             <div class="col-6">
               <input
-                v-model="tripCamerasDetail[index].memoryCardNumber"
+                v-model="tripCamerasDetail[index].cameraMemoryCardNumber"
                 type="text"
                 placeholder="請輸入檔案數量"
                 class="form-control"
@@ -352,13 +352,6 @@ export default {
   },
   async mounted() {
     this.editProjectTripBasic = Object.assign({}, this.editProjectTripData);
-    if (
-      this.editProjectTripData.projectCameras &&
-      this.editProjectTripData.projectCameras.length > 0
-    ) {
-      this.cmaeraLocationEvenOptions = ['設置', '替換'];
-    } else this.cmaeraLocationEvenOptions = ['設置'];
-
     this.projectTrip.cameraLocationEven = this.cmaeraLocationEvenOptions[0];
 
     await this.getProjectCameras({ projectId: this.projectId });
@@ -378,6 +371,7 @@ export default {
       const nextProjectTrip = this.editProjectTripBasic.studyAreas[
         this.selectedStudyAreaIndex
       ].cameraLocations[this.selectedCameraLocationIndex];
+
       const projectCameras = nextProjectTrip.projectCameras
         ? {
             projectCameras: nextProjectTrip.projectCameras.map(
@@ -391,8 +385,11 @@ export default {
         this.selectedStudyAreaIndex
       ].cameraLocations[this.selectedCameraLocationIndex].projectCameras;
 
+      this.cmaeraLocationEvenOptions = ['設置'];
+
       if (nextTripCamerasDetail && nextTripCamerasDetail.length > 0) {
         this.tripCamerasDetail = nextTripCamerasDetail;
+
         if (
           this.projectTrip.projectCameras &&
           this.projectTrip.projectCameras.length === 1
@@ -417,6 +414,9 @@ export default {
             };
           } else this.endActiveTime = { HH: '00', mm: '00' };
         }
+
+        if (this.editProjectTripBasic.id)
+          this.cmaeraLocationEvenOptions = ['設置', '替換'];
       } else {
         this.tripCamerasDetail = [{}, {}];
         this.startActiveTime = { HH: '00', mm: '00' };
@@ -466,6 +466,7 @@ export default {
                 startActiveDate,
                 endActiveDate,
               );
+
               return { cameraSn: value, ...currentTripCamera };
             },
           );
@@ -473,13 +474,12 @@ export default {
         }
 
         if (Object.keys(currentProjectTrip).length > 0) {
-          Object.assign(
-            this.editProjectTripBasic.studyAreas[this.selectedStudyAreaIndex]
-              .cameraLocations[this.selectedCameraLocationIndex],
-            currentProjectTrip,
-          );
+          this.editProjectTripBasic.studyAreas[
+            this.selectedStudyAreaIndex
+          ].cameraLocations[this.selectedCameraLocationIndex] = {
+            ...currentProjectTrip,
+          };
         }
-
         this.setEditProjectTrip(this.editProjectTripBasic);
       }
     },
diff --git a/src/components/ProjectEdit/Trip/ListProjectTrip.vue b/src/components/ProjectEdit/Trip/ListProjectTrip.vue
new file mode 100644
index 00000000..7dce295c
--- /dev/null
+++ b/src/components/ProjectEdit/Trip/ListProjectTrip.vue
@@ -0,0 +1,373 @@
+<template>
+  <div class="list-project-trip">
+    <div>
+      <el-table :data="projectTripsData" stripe style="width: 100%">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-row :gutter="10">
+              <el-col :span="4">
+                <div class="trip-detail">
+                  <h5>樣區</h5>
+                  <div class="project-trip-sidebar">
+                    <div
+                      v-for="studyArea in props.row.studyAreas"
+                      :key="studyArea.studyArea"
+                    >
+                      <div
+                        v-text="studyArea.title"
+                        class="project-trip-sidebar-item"
+                        :class="{
+                          'is-active':
+                            selectedTrip[props.row.sn] &&
+                            selectedTrip[props.row.sn].studyArea.studyArea ===
+                              studyArea.studyArea,
+                        }"
+                        @click="selectStudyArea(props.row.sn, studyArea)"
+                      ></div>
+                    </div>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="10">
+                <div class="trip-detail">
+                  <h5>
+                    相機位置{{
+                      selectedTrip[props.row.sn] &&
+                      selectedTrip[props.row.sn].studyArea.title
+                        ? '-' + selectedTrip[props.row.sn].studyArea.title
+                        : ''
+                    }}
+                  </h5>
+                  <div
+                    style="padding: 0 20px;"
+                    v-show="
+                      selectedTrip[props.row.sn] &&
+                        selectedTrip[props.row.sn].studyArea.title
+                    "
+                  >
+                    <el-table
+                      :data="
+                        selectedTrip[props.row.sn] &&
+                          selectedTrip[props.row.sn].studyArea.cameraLocations
+                      "
+                      :row-class-name="selectedCameraLocationStyle"
+                      @row-click="selectCameraLocation($event, props.row.sn)"
+                      style="width: 100%"
+                    >
+                      <el-table-column label="位置" prop="cameraLocation" />
+                      <el-table-column label="事件" prop="cameraLocationEven" />
+                      <el-table-column label="註記" width="120">
+                        <template slot-scope="props">
+                          <div :title="props.row.cameraLocationMark">
+                            {{ props.row.cameraLocationMark }}
+                          </div>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="10">
+                <div class="trip-detail">
+                  <h5>
+                    相機資訊{{
+                      selectedTrip[props.row.sn] &&
+                      selectedTrip[props.row.sn].cameraLocation.cameraLocation
+                        ? '-' +
+                          selectedTrip[props.row.sn].cameraLocation
+                            .cameraLocation
+                        : ''
+                    }}
+                  </h5>
+                  <div
+                    style="padding: 0 20px;"
+                    v-show="
+                      selectedTrip[props.row.sn] &&
+                        selectedTrip[props.row.sn].studyArea.title
+                    "
+                    class="trip-camera-detail"
+                  >
+                    <el-table
+                      :data="
+                        selectedTrip[props.row.sn] &&
+                          selectedTrip[props.row.sn].cameraLocation
+                            .projectCameras
+                      "
+                      style="width: 100%"
+                    >
+                      <el-table-column type="expand" width="30">
+                        <template slot-scope="tripCamera">
+                          <el-row>
+                            <el-col :span="12">
+                              <div class="mb-1 camera-setting-title">
+                                相機設定
+                              </div>
+                              <div
+                                v-for="(cameraSettingKey,
+                                index) in cameraSettingKeys"
+                                :key="index"
+                              >
+                                <el-row>
+                                  <el-col :span="12">
+                                    <span>
+                                      {{ cameraSettingKey.keyName }}
+                                    </span>
+                                  </el-col>
+                                  <el-col :span="12">
+                                    <span>
+                                      {{ tripCamera.row[cameraSettingKey.key] }}
+                                      {{
+                                        tripCamera.row[cameraSettingKey.key]
+                                          ? cameraSettingKey.unit || ''
+                                          : ''
+                                      }}
+                                    </span>
+                                  </el-col>
+                                </el-row>
+                              </div>
+                            </el-col>
+                            <el-col :span="12">
+                              <div class="mb-1 camera-setting-title">
+                                拍攝設定
+                              </div>
+                              <div
+                                v-for="(shotSettingKey,
+                                index) in shotSettingKeys"
+                                :key="index"
+                              >
+                                <el-row>
+                                  <el-col :span="12">
+                                    <span>
+                                      {{ shotSettingKey.keyName }}
+                                    </span>
+                                  </el-col>
+                                  <el-col :span="12">
+                                    <span>
+                                      {{ tripCamera.row[shotSettingKey.key] }}
+                                      {{
+                                        tripCamera.row[shotSettingKey.key]
+                                          ? shotSettingKey.unit || ''
+                                          : ''
+                                      }}
+                                    </span>
+                                  </el-col>
+                                </el-row>
+                              </div>
+                            </el-col>
+                          </el-row>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="相機編號" prop="cameraSn" />
+                      <el-table-column
+                        label="相機狀態"
+                        prop="cameraState"
+                        width="80"
+                      />
+                      <el-table-column label="註記" prop="cameraMark">
+                        <template slot-scope="tripCamera">
+                          <div :title="tripCamera.row.cameraMark">
+                            {{ tripCamera.row.cameraMark }}
+                          </div>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+            <div class="float-right mt-3">
+              <button
+                class="btn btn-green-border mr-3"
+                @click="openCheckModal(props.row.sn, props.row.id)"
+              >
+                刪除行程
+              </button>
+              <button
+                class="btn btn-orange"
+                @click="editProjectTrip(props.row)"
+              >
+                更改行程
+              </button>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="行程編號"
+          prop="sn"
+          width="120"
+        ></el-table-column>
+        <el-table-column label="日期" width="120">
+          <template slot-scope="props">
+            {{ formatDate(props.row.date) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="人員"
+          prop="member"
+          width="120"
+        ></el-table-column>
+        <el-table-column label="樣區">
+          <template slot-scope="props">
+            <div class="study-area-row">
+              {{
+                props.row.studyAreas.reduce((pre, curr) => {
+                  if (pre === '') return curr.title;
+                  else return pre + '、' + curr.title;
+                }, '')
+              }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="行程註記" prop="mark"
+          ><template slot-scope="props">
+            <div :title="props.row.mark" class="float-left" style="width: 80%">
+              {{ props.row.mark }}
+            </div>
+            <div class="float-right">
+              <i
+                class="el-icon-delete"
+                @click="openCheckModal(props.row.sn, props.row.id)"
+              ></i></div
+          ></template>
+        </el-table-column>
+      </el-table>
+      <double-check-modal-with-style
+        :open="showCheckModal"
+        :title="`您確定要刪除${selectedProjectTripSn}嗎？`"
+        @summit="checkDeleteProjectTrip"
+        @close="closeCheckModal"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+
+import DoubleCheckModalWithStyle from '@/components/Modal/DoubleCheckModalWithStyle.vue';
+
+const cameraSettingKeys = [
+  {
+    keyName: '記憶卡檔案數',
+    key: 'cameraMemoryCardNumber',
+  },
+  {
+    keyName: '電池類型',
+    key: 'cameraBatteryType',
+  },
+  {
+    keyName: '電池電量',
+    key: 'cameraBatteryRemainingCapacity',
+  },
+];
+const shotSettingKeys = [
+  {
+    keyName: '光強度',
+    key: 'cameraBrightness',
+  },
+  {
+    keyName: '敏感度',
+    key: 'cameraSensitivity',
+  },
+  {
+    keyName: '影片長度',
+    key: 'cameraVideoLength',
+    unit: '分鐘',
+  },
+  {
+    keyName: '連拍張數',
+    key: 'cameraContinuousShots',
+    unit: '張',
+  },
+  {
+    keyName: '相機方位',
+    key: 'cameraPosition',
+    unit: '度',
+  },
+  {
+    keyName: '相機俯角',
+    key: 'cameraDepressionAngle',
+    unit: '度',
+  },
+  {
+    keyName: '感應距離',
+    key: 'cameraSensingDistance',
+    unit: '公尺',
+  },
+];
+
+export default {
+  name: 'ListProjectTrip',
+  props: {
+    projectId: {
+      type: String,
+    },
+    projectTripsData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {
+    DoubleCheckModalWithStyle,
+  },
+  data() {
+    return {
+      showCheckModal: false,
+      selectedProjectTripSn: '',
+      selectedProjectTripId: '',
+      selectedTrip: {},
+      cameraSettingKeys,
+      shotSettingKeys,
+    };
+  },
+  methods: {
+    openCheckModal(sn, id) {
+      this.selectedProjectTripSn = sn;
+      this.selectedProjectTripId = id;
+      this.showCheckModal = true;
+    },
+    closeCheckModal() {
+      this.showCheckModal = false;
+    },
+    checkDeleteProjectTrip() {
+      this.$emit('deleteProjectTrip', {
+        projectId: this.projectId,
+        tripId: this.selectedProjectTripId,
+      });
+      this.showCheckModal = false;
+    },
+    formatDate(date) {
+      return moment(date).format('YYYY/MM/DD');
+    },
+    selectStudyArea(sn, studyArea) {
+      this.selectedTrip = {
+        ...this.selectedTrip,
+        [sn]: {
+          studyArea,
+          cameraLocation: {},
+        },
+      };
+    },
+    selectCameraLocation(cameraLocation, sn) {
+      const currentTrip = { ...this.selectedTrip[sn], cameraLocation };
+      this.selectedTrip = {
+        ...this.selectedTrip,
+        [sn]: currentTrip,
+      };
+    },
+    selectedCameraLocationStyle({ row }) {
+      let result = '';
+      Object.values(this.selectedTrip).some(({ cameraLocation }) => {
+        if (cameraLocation._id === row._id) {
+          result = 'is-active';
+          return true;
+        }
+      });
+      return result;
+    },
+    editProjectTrip(currentTrip) {
+      this.$emit('openEditProjectTripBasic', currentTrip);
+    },
+  },
+};
+</script>
diff --git a/src/main.js b/src/main.js
index b372280b..2cb8600b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,7 @@ import App from './App';
 import router from './router';
 import store from './store';
 
+import locale from 'element-ui/lib/locale/lang/zh-TW';
 import './sass/app.sass';
 import 'bootstrap';
 import 'element-ui/lib/theme-chalk/index.css';
@@ -15,7 +16,7 @@ import 'vue2-dropzone/dist/vue2Dropzone.min.css';
 
 Vue.use(VeeValidate);
 Vue.use(VTooltip);
-Vue.use(ElementUI);
+Vue.use(ElementUI, { locale });
 
 Vue.config.productionTip = false;
 
diff --git a/src/pages/Project/EditProject/Trip.vue b/src/pages/Project/EditProject/Trip.vue
index c97bef8f..a2fb0374 100644
--- a/src/pages/Project/EditProject/Trip.vue
+++ b/src/pages/Project/EditProject/Trip.vue
@@ -8,13 +8,24 @@
           </h4>
           <button
             class="float-right btn btn-light-green btn-sm"
-            @click="openEditProjectTripBasic"
+            @click="openAddProjectTripBasic"
             v-show="showListTrip"
           >
             新增行程
           </button>
         </div>
       </div>
+      <div
+        class="project-trip-list"
+        v-if="!showEditProjectTripBasic && !showEditProjectTripCamera"
+      >
+        <list-project-trip
+          :projectId="projectId"
+          :projectTripsData="projectTrips"
+          @deleteProjectTrip="deleteProjectTrip"
+          @openEditProjectTripBasic="openEditProjectTripBasic"
+        />
+      </div>
       <div class="project-trip-edit-basic" v-if="showEditProjectTripBasic">
         <edit-project-trip-basic
           :projectId="projectId"
@@ -23,18 +34,18 @@
           :getProjectCameraLocations="getProjectCameraLocations"
           :closeEditProjectTripBasic="closeEditProjectTripBasic"
           :openEditProjectTripCamera="openEditProjectTripCamera"
-          :addProjectTripRequest="addProjectTripRequest"
-          :setEditProjectTrip="setEditProjectTrip"
-          :editProjectTripData="editProjectTrip"
+          :addEditProjectTripRequest="addEditProjectTripRequest"
+          :setEditProjectTrip="setEditProjectTripData"
+          :editProjectTripData="editProjectTripData"
         ></edit-project-trip-basic>
       </div>
       <div class="project-trip-edit-camera" v-if="showEditProjectTripCamera">
         <edit-project-trip-camera
-          :editProjectTripData="editProjectTrip"
+          :editProjectTripData="editProjectTripData"
           :projectCameras="projectCameras"
           :getProjectCameras="getProjectCameras"
           :projectId="projectId"
-          :setEditProjectTrip="setEditProjectTrip"
+          :setEditProjectTrip="setEditProjectTripData"
         ></edit-project-trip-camera>
       </div>
     </div>
@@ -59,7 +70,7 @@
       :open="showCheckCameraDetailModal"
       title="您確定不填入相機資料嗎？"
       description="不填寫相機位置內的相機資料，往後將無法依據行程篩選資料．"
-      @summit="addProjectTripRequest(true)"
+      @summit="addEditProjectTripRequest(true)"
       @close="closeCheckCameraDetailModal"
     />
   </div>
@@ -70,6 +81,7 @@ import { createNamespacedHelpers } from 'vuex';
 import DoubleCheckModalWithStyle from '@/components/Modal/DoubleCheckModalWithStyle.vue';
 import EditProjectTripBasic from '@/components/ProjectEdit/Trip/EditProjectTripBasic.vue';
 import EditProjectTripCamera from '@/components/ProjectEdit/Trip/EditProjectTripCamera.vue';
+import ListProjectTrip from '@/components/ProjectEdit/Trip/ListProjectTrip.vue';
 
 const projectCamera = createNamespacedHelpers('projectCamera');
 const studyAreas = createNamespacedHelpers('studyAreas');
@@ -80,6 +92,7 @@ export default {
     EditProjectTripBasic,
     EditProjectTripCamera,
     DoubleCheckModalWithStyle,
+    ListProjectTrip,
   },
   data: function() {
     return {
@@ -93,7 +106,7 @@ export default {
   computed: {
     ...projectCamera.mapState(['projectCameras']),
     ...studyAreas.mapGetters(['studyAreas', 'cameraLocations']),
-    ...trip.mapState(['editProjectTrip']),
+    ...trip.mapState(['projectTrips', 'editProjectTripData']),
   },
   methods: {
     ...projectCamera.mapActions(['getProjectCameras']),
@@ -101,9 +114,21 @@ export default {
       'getProjectStudyAreas',
       'getProjectCameraLocations',
     ]),
-    ...trip.mapActions(['addProjectTrip', 'setEditProjectTrip']),
-    openEditProjectTripBasic: function() {
-      this.setEditProjectTrip({});
+    ...trip.mapActions([
+      'getProjectTrips',
+      'addProjectTrip',
+      'setEditProjectTripData',
+      'editProjectTrip',
+      'deleteProjectTrip',
+    ]),
+    openAddProjectTripBasic: async function() {
+      await this.getProjectStudyAreas(this.projectId);
+      this.setEditProjectTripData({});
+      this.showEditProjectTripBasic = true;
+    },
+    openEditProjectTripBasic: async function(currentTrip) {
+      await this.getProjectStudyAreas(this.projectId);
+      this.setEditProjectTripData(currentTrip);
       this.showEditProjectTripBasic = true;
     },
     closeEditProjectTripBasic: function() {
@@ -119,12 +144,20 @@ export default {
       this.showEditProjectTripBasic = true;
       this.closeEditProjectTripCamera();
     },
-    addProjectTripRequest: async function(reGetProjectTrip) {
-      await this.addProjectTrip({
-        projectId: this.projectId,
-        body: this.editProjectTrip,
-        reGetProjectTrip,
-      });
+    addEditProjectTripRequest: async function(reGetProjectTrip) {
+      if (this.editProjectTripData.id) {
+        await this.editProjectTrip({
+          projectId: this.projectId,
+          tripId: this.editProjectTripData.id,
+          body: this.editProjectTripData,
+        });
+      } else {
+        await this.addProjectTrip({
+          projectId: this.projectId,
+          body: this.editProjectTripData,
+          reGetProjectTrip,
+        });
+      }
       this.closeEditProjectTripCamera();
       this.closeCheckCameraDetailModal();
     },
@@ -136,7 +169,7 @@ export default {
     },
     async checkAddProjectTripRequest() {
       await this.$emit('setEditProjectTripReduest');
-      const emptyCameraDetail = this.editProjectTrip.studyAreas.reduce(
+      const emptyCameraDetail = this.editProjectTripData.studyAreas.reduce(
         (previous, current) => {
           let result = current.cameraLocations.reduce((pre, curr) => {
             if (curr.projectCameras && curr.projectCameras[0]) {
@@ -154,7 +187,7 @@ export default {
       );
 
       if (emptyCameraDetail) this.openCheckCameraDetailModal();
-      else this.addProjectTripRequest(true);
+      else this.addEditProjectTripRequest(true);
     },
   },
   watch: {
@@ -166,7 +199,7 @@ export default {
     },
   },
   mounted() {
-    this.getProjectStudyAreas(this.projectId);
+    this.getProjectTrips(this.projectId);
   },
 };
 </script>
diff --git a/src/sass/globals/_page.sass b/src/sass/globals/_page.sass
index 28853a0d..8ea2ff52 100644
--- a/src/sass/globals/_page.sass
+++ b/src/sass/globals/_page.sass
@@ -493,6 +493,45 @@
         .form-group
             line-height: 38px
 
+    .list-project-trip
+        .trip-detail
+            border: 2px solid #979797
+            line-height: 40px
+            width: 100%
+            height: 200px
+            overflow: scroll
+            h5
+                margin: 0px
+                line-height: 40px
+                padding-left: 20px
+            .el-table__row:hover > td
+                background: none
+        .trip-camera-detail
+            .camera-setting-title
+                color: $gray
+            .el-table__expanded-cell
+                padding: 10px 0
+            div
+                line-height: 20px
+            span
+                font-size: 5px
+        .study-area-row,
+        .el-table .cell,
+        .el-table .cell div
+            white-space: nowrap
+            text-overflow: ellipsis
+            overflow: hidden
+        .el-table__expanded-cell
+            padding: 20px
+        .is-active
+            background: $bg-green
+            color: $green
+        .project-trip-sidebar-item
+            border-bottom: 1px solid #E6E7E8
+            line-height: 38px
+            cursor: pointer
+            padding-left: 20px
+
     .edit-project-trip-basic
         .edit-project-trip-basic-content
             min-height: 455px
diff --git a/src/service/modules/trip.js b/src/service/modules/trip.js
index 5eaf30e7..4c8610cd 100644
--- a/src/service/modules/trip.js
+++ b/src/service/modules/trip.js
@@ -13,4 +13,19 @@ const addProjectTrip = async (projectId, body) =>
     body,
   });
 
-export { getProjectTrips, addProjectTrip };
+const editProjectTrip = async (projectId, tripId, body) =>
+  await fetchWrap({
+    url: `/api/v1/projects/${projectId}/trips/${tripId}`,
+    method: 'PUT',
+    body,
+  });
+
+const deleteProjectTrip = async (projectId, tripId) => {
+  const data = await fetchWrap({
+    url: `/api/v1/projects/${projectId}/trips/${tripId}`,
+    method: 'DELETE',
+  });
+  return data;
+};
+
+export { getProjectTrips, addProjectTrip, editProjectTrip, deleteProjectTrip };
diff --git a/src/store/modules/projects/trip.js b/src/store/modules/projects/trip.js
index 1b9d19cf..950f701d 100644
--- a/src/store/modules/projects/trip.js
+++ b/src/store/modules/projects/trip.js
@@ -1,24 +1,29 @@
-import { addProjectTrip, getProjectTrips } from '@/service';
+import {
+  addProjectTrip,
+  deleteProjectTrip,
+  editProjectTrip,
+  getProjectTrips,
+} from '@/service';
 import idx from 'idx';
 
 const state = {
-  trips: [],
-  editProjectTrip: {},
+  projectTrips: [],
+  editProjectTripData: {},
 };
 
 const mutations = {
-  setTrips(state, payload) {
-    state.trips = payload;
+  setProjectTrips(state, payload) {
+    state.projectTrips = payload;
   },
-  setEditProjectTrip(state, payload) {
-    state.editProjectTrip = payload;
+  setEditProjectTripData(state, payload) {
+    state.editProjectTripData = payload;
   },
 };
 
 const actions = {
   async getProjectTrips({ commit }, projectId) {
     const data = await getProjectTrips(projectId);
-    commit('setTrips', idx(data, _ => _.items) || []);
+    commit('setProjectTrips', idx(data, _ => _.items) || []);
   },
   async addProjectTrip({ dispatch }, { projectId, body, reGetProjectTrip }) {
     await addProjectTrip(projectId, body);
@@ -26,8 +31,22 @@ const actions = {
       dispatch('getProjectTrips', projectId);
     }
   },
-  async setEditProjectTrip({ commit }, payload) {
-    commit('setEditProjectTrip', payload);
+  async setEditProjectTripData({ commit }, payload) {
+    commit('setEditProjectTripData', payload);
+  },
+  async editProjectTrip(
+    { dispatch },
+    { projectId, tripId, body, reGetProjectTrip = true },
+  ) {
+    await editProjectTrip(projectId, tripId, body);
+    if (reGetProjectTrip) dispatch('getProjectTrips', projectId);
+  },
+  async deleteProjectTrip(
+    { dispatch },
+    { projectId, tripId, reGetProjectTrip = true },
+  ) {
+    await deleteProjectTrip(projectId, tripId);
+    if (reGetProjectTrip) dispatch('getProjectTrips', projectId);
   },
 };
 

From 17a84b78aa8751f7d0f640f4d869c229405589df Mon Sep 17 00:00:00 2001
From: "peggy.liu" <peggy.liu@brocas.com.tw>
Date: Sat, 5 Oct 2019 10:17:48 +0800
Subject: [PATCH 2/7] Add search trip

---
 .../ProjectEdit/Trip/ListProjectTrip.vue      | 39 ++++++++++++++++++-
 src/pages/Project/EditProject/Trip.vue        | 24 ++++++++----
 src/sass/globals/_page.sass                   | 14 +++++++
 3 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/src/components/ProjectEdit/Trip/ListProjectTrip.vue b/src/components/ProjectEdit/Trip/ListProjectTrip.vue
index 7dce295c..66b35a05 100644
--- a/src/components/ProjectEdit/Trip/ListProjectTrip.vue
+++ b/src/components/ProjectEdit/Trip/ListProjectTrip.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="list-project-trip">
     <div>
-      <el-table :data="projectTripsData" stripe style="width: 100%">
+      <el-table :data="projectTripsDataFilter" stripe style="width: 100%">
         <el-table-column type="expand">
           <template slot-scope="props">
             <el-row :gutter="10">
@@ -302,6 +302,9 @@ export default {
     projectId: {
       type: String,
     },
+    searchTrip: {
+      type: String,
+    },
     projectTripsData: {
       type: Array,
       default: () => [],
@@ -318,8 +321,42 @@ export default {
       selectedTrip: {},
       cameraSettingKeys,
       shotSettingKeys,
+      projectTripsDataFilter: [],
     };
   },
+  mounted() {
+    this.projectTripsDataFilter = this.projectTripsData;
+  },
+  watch: {
+    projectTripsData: function() {
+      this.projectTripsDataFilter = this.projectTripsData;
+    },
+    searchTrip: function() {
+      this.projectTripsDataFilter = this.projectTripsData.filter(data => {
+        return (
+          !this.searchTrip ||
+          (data.sn &&
+            data.sn.toLowerCase().includes(this.searchTrip.toLowerCase())) ||
+          (data.date &&
+            this.formatDate(data.date)
+              .toLowerCase()
+              .includes(this.searchTrip.toLowerCase())) ||
+          (data.member &&
+            data.member
+              .toLowerCase()
+              .includes(this.searchTrip.toLowerCase())) ||
+          (data.studyAreas &&
+            data.studyAreas.some(studyArea => {
+              return studyArea.title
+                .toLowerCase()
+                .includes(this.searchTrip.toLowerCase());
+            })) ||
+          (data.mark &&
+            data.mark.toLowerCase().includes(this.searchTrip.toLowerCase()))
+        );
+      });
+    },
+  },
   methods: {
     openCheckModal(sn, id) {
       this.selectedProjectTripSn = sn;
diff --git a/src/pages/Project/EditProject/Trip.vue b/src/pages/Project/EditProject/Trip.vue
index a2fb0374..1351d50d 100644
--- a/src/pages/Project/EditProject/Trip.vue
+++ b/src/pages/Project/EditProject/Trip.vue
@@ -6,13 +6,19 @@
           <h4>
             行程管理
           </h4>
-          <button
-            class="float-right btn btn-light-green btn-sm"
-            @click="openAddProjectTripBasic"
-            v-show="showListTrip"
-          >
-            新增行程
-          </button>
+          <span class="float-right" v-show="showListTrip">
+            <button
+              class=" btn btn-light-green btn-sm"
+              @click="openAddProjectTripBasic"
+            >
+              新增行程
+            </button>
+            <el-input
+              placeholder="搜尋..."
+              suffix-icon="el-icon-search"
+              v-model="searchTrip"
+            ></el-input>
+          </span>
         </div>
       </div>
       <div
@@ -22,6 +28,7 @@
         <list-project-trip
           :projectId="projectId"
           :projectTripsData="projectTrips"
+          :searchTrip="searchTrip"
           @deleteProjectTrip="deleteProjectTrip"
           @openEditProjectTripBasic="openEditProjectTripBasic"
         />
@@ -101,6 +108,7 @@ export default {
       showEditProjectTripCamera: false,
       projectId: this.$route.params.projectId,
       showCheckCameraDetailModal: false,
+      searchTrip: '',
     };
   },
   computed: {
@@ -193,9 +201,11 @@ export default {
   watch: {
     showEditProjectTripBasic: function(value) {
       this.showListTrip = !value;
+      this.searchTrip = '';
     },
     showEditProjectTripCamera: function(value) {
       this.showListTrip = !value;
+      this.searchTrip = '';
     },
   },
   mounted() {
diff --git a/src/sass/globals/_page.sass b/src/sass/globals/_page.sass
index 8ea2ff52..1b7d715d 100644
--- a/src/sass/globals/_page.sass
+++ b/src/sass/globals/_page.sass
@@ -493,6 +493,20 @@
         .form-group
             line-height: 38px
 
+    .project-trip
+        .panel-heading
+            .el-input
+                width: 100px
+                height: 20px
+                input
+                    height: 20px
+                    margin-left: 10px
+                    margin-right: 10px
+                    &:focus
+                        border: none
+                .el-input__icon
+                    line-height: 20px
+
     .list-project-trip
         .trip-detail
             border: 2px solid #979797

From 2307bf1523fa9085d492c747dd38ade9af331297 Mon Sep 17 00:00:00 2001
From: "peggy.liu" <peggy.liu@brocas.com.tw>
Date: Fri, 11 Oct 2019 01:02:24 +0800
Subject: [PATCH 3/7] Modify drowdown options and data transformation when fill
 in camera location form

---
 .../ProjectEdit/Trip/EditProjectTripBasic.vue |  4 +-
 .../Trip/EditProjectTripCamera.vue            | 94 ++++++++++++++-----
 .../ProjectEdit/Trip/ListProjectTrip.vue      | 38 ++++++--
 src/pages/Project/EditProject/Trip.vue        | 19 +++-
 4 files changed, 124 insertions(+), 31 deletions(-)

diff --git a/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue b/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
index a61b0692..3366ae3f 100644
--- a/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
+++ b/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
@@ -193,7 +193,7 @@ export default {
     addEditProjectTripRequest: {
       type: Function,
     },
-    setEditProjectTrip: {
+    setEditProjectTripData: {
       type: Function,
     },
     editProjectTripData: {
@@ -371,7 +371,7 @@ export default {
           if (this.editProjectTripData.id)
             body = { id: this.editProjectTripData.id, ...body };
 
-          this.setEditProjectTrip(body);
+          this.setEditProjectTripData(body);
 
           if (this.showNextStep) {
             if (emptyCameraLocation) this.openCheckCameraLocationsModal();
diff --git a/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue b/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue
index cad05758..eea4d184 100644
--- a/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue
+++ b/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue
@@ -96,7 +96,7 @@
             <div class="col-6">
               <v-select
                 v-model="tripCamerasDetail[index].cameraState"
-                :options="stateOptions"
+                :options="cameraStateOptions"
                 placeholder="請選擇相機狀態"
                 @change="changeLimit"
               ></v-select>
@@ -293,7 +293,6 @@ import vSelect from 'vue-select';
 const batteryTypeOptions = ['鹼性電池', '充電電池'];
 const brightnessOptions = ['自動'];
 const sensitivityOptions = ['自動'];
-const stateOptions = ['active'];
 
 const getDateAndTime = (day, time, second = 0, millisecond = 0) => {
   return moment(day)
@@ -325,9 +324,15 @@ export default {
     projectId: {
       type: String,
     },
-    setEditProjectTrip: {
+    setEditProjectTripData: {
       type: Function,
     },
+    cmaeraLocationEvenString: {
+      type: Object,
+    },
+    cameraStateString: {
+      type: Object,
+    },
   },
   data: function() {
     return {
@@ -336,11 +341,13 @@ export default {
       tripCamerasDetail: [{}, {}],
       startActiveTime: { HH: '00', mm: '00' },
       endActiveTime: { HH: '00', mm: '00' },
+      cmaeraLocationEvenOptionsAll: [],
+      cameraStateOptionsAll: [],
       cmaeraLocationEvenOptions: [],
+      cameraStateOptions: [],
       batteryTypeOptions,
       brightnessOptions,
       sensitivityOptions,
-      stateOptions,
       projectCameraOptions: [],
       selectedStudyAreaIndex: null,
       selectedCameraLocationIndex: null,
@@ -352,7 +359,18 @@ export default {
   },
   async mounted() {
     this.editProjectTripBasic = Object.assign({}, this.editProjectTripData);
-    this.projectTrip.cameraLocationEven = this.cmaeraLocationEvenOptions[0];
+    // 所有相機位置事件選項，對照顯示文字(label)及值(value)
+    this.cmaeraLocationEvenOptionsAll = Object.keys(
+      this.cmaeraLocationEvenString,
+    ).map(value => ({ label: this.cmaeraLocationEvenString[value], value }));
+    // 所有相機狀態選項，對照顯示文字(label)及值(value)
+    this.cameraStateOptionsAll = Object.keys(this.cameraStateString).map(
+      value => ({ label: this.cameraStateString[value], value }),
+    );
+
+    // 預設選項只有 事件: 設置 狀態: 正常
+    this.cmaeraLocationEvenOptions = [this.cmaeraLocationEvenOptionsAll[0]];
+    this.cameraStateOptions = [this.cameraStateOptionsAll[0]];
 
     await this.getProjectCameras({ projectId: this.projectId });
     this.projectCameraOptions = this.projectCameras.map(({ sn }) => sn);
@@ -372,20 +390,38 @@ export default {
         this.selectedStudyAreaIndex
       ].cameraLocations[this.selectedCameraLocationIndex];
 
-      const projectCameras = nextProjectTrip.projectCameras
+      // 從資料轉換成表單用格式 相機位置事件
+      const cameraLocationEven = nextProjectTrip.cameraLocationEven
         ? {
-            projectCameras: nextProjectTrip.projectCameras.map(
-              ({ cameraSn }) => cameraSn,
-            ),
+            label: this.cmaeraLocationEvenString[
+              nextProjectTrip.cameraLocationEven
+            ],
+            value: nextProjectTrip.cameraLocationEven,
           }
-        : {};
-      this.projectTrip = Object.assign({}, nextProjectTrip, projectCameras);
-
-      const nextTripCamerasDetail = this.editProjectTripBasic.studyAreas[
-        this.selectedStudyAreaIndex
-      ].cameraLocations[this.selectedCameraLocationIndex].projectCameras;
+        : undefined;
+      // 從資料轉換成表單用格式 相機編號
+      const projectCameras = nextProjectTrip.projectCameras
+        ? nextProjectTrip.projectCameras.map(({ cameraSn }) => cameraSn)
+        : [];
+      this.projectTrip = {
+        ...nextProjectTrip,
+        cameraLocationEven,
+        projectCameras,
+      };
 
-      this.cmaeraLocationEvenOptions = ['設置'];
+      let nextTripCamerasDetail = Array.from(
+        this.editProjectTripBasic.studyAreas[this.selectedStudyAreaIndex]
+          .cameraLocations[this.selectedCameraLocationIndex].projectCameras,
+      ).map(nextTripCameraDetail => {
+        // 從資料轉換成表單用格式 相機狀態
+        const cameraState = nextTripCameraDetail.cameraState
+          ? {
+              label: this.cameraStateString[nextTripCameraDetail.cameraState],
+              value: nextTripCameraDetail.cameraState,
+            }
+          : {};
+        return { ...nextTripCameraDetail, cameraState };
+      });
 
       if (nextTripCamerasDetail && nextTripCamerasDetail.length > 0) {
         this.tripCamerasDetail = nextTripCamerasDetail;
@@ -414,9 +450,6 @@ export default {
             };
           } else this.endActiveTime = { HH: '00', mm: '00' };
         }
-
-        if (this.editProjectTripBasic.id)
-          this.cmaeraLocationEvenOptions = ['設置', '替換'];
       } else {
         this.tripCamerasDetail = [{}, {}];
         this.startActiveTime = { HH: '00', mm: '00' };
@@ -427,11 +460,24 @@ export default {
       if (this.selectedCameraLocationIndex !== null) {
         let currentProjectTrip = Object.assign({}, this.projectTrip);
         if (currentProjectTrip.projectCameras !== undefined) {
+          // 從表單用格式轉換成資料 相機位置事件
+          let cameraLocationEven = {};
+          if (this.projectTrip.cameraLocationEven)
+            cameraLocationEven = this.projectTrip.cameraLocationEven.value;
+          // 從表單用格式轉換成資料 相機編號
           const projectCameras = currentProjectTrip.projectCameras.map(
             (value, index) => {
+              let cameraState = {};
               let startActiveDate = {};
               let endActiveDate = {};
 
+              if (this.tripCamerasDetail[index].cameraState) {
+                // 從表單用格式轉換成資料 相機狀態
+                cameraState = {
+                  cameraState: this.tripCamerasDetail[index].cameraState.value,
+                };
+              }
+
               if (
                 this.tripCamerasDetail[index].startActiveDate &&
                 this.tripCamerasDetail[index].startActiveDate !== 'Invalid date'
@@ -463,6 +509,7 @@ export default {
               const currentTripCamera = Object.assign(
                 {},
                 this.tripCamerasDetail[index],
+                cameraState,
                 startActiveDate,
                 endActiveDate,
               );
@@ -470,7 +517,12 @@ export default {
               return { cameraSn: value, ...currentTripCamera };
             },
           );
-          currentProjectTrip.projectCameras = projectCameras;
+
+          currentProjectTrip = {
+            ...currentProjectTrip,
+            cameraLocationEven,
+            projectCameras,
+          };
         }
 
         if (Object.keys(currentProjectTrip).length > 0) {
@@ -480,7 +532,7 @@ export default {
             ...currentProjectTrip,
           };
         }
-        this.setEditProjectTrip(this.editProjectTripBasic);
+        this.setEditProjectTripData(this.editProjectTripBasic);
       }
     },
     changeLimit(value) {
diff --git a/src/components/ProjectEdit/Trip/ListProjectTrip.vue b/src/components/ProjectEdit/Trip/ListProjectTrip.vue
index 66b35a05..fb5ad750 100644
--- a/src/components/ProjectEdit/Trip/ListProjectTrip.vue
+++ b/src/components/ProjectEdit/Trip/ListProjectTrip.vue
@@ -55,7 +55,17 @@
                       style="width: 100%"
                     >
                       <el-table-column label="位置" prop="cameraLocation" />
-                      <el-table-column label="事件" prop="cameraLocationEven" />
+                      <el-table-column label="事件" prop="cameraLocationEven">
+                        <template slot-scope="props">
+                          <div :title="props.row.cameraLocationMark">
+                            {{
+                              cmaeraLocationEvenString[
+                                props.row.cameraLocationMark
+                              ] || ''
+                            }}
+                          </div>
+                        </template>
+                      </el-table-column>
                       <el-table-column label="註記" width="120">
                         <template slot-scope="props">
                           <div :title="props.row.cameraLocationMark">
@@ -158,11 +168,21 @@
                         </template>
                       </el-table-column>
                       <el-table-column label="相機編號" prop="cameraSn" />
-                      <el-table-column
-                        label="相機狀態"
-                        prop="cameraState"
-                        width="80"
-                      />
+                      <el-table-column label="相機狀態" width="80">
+                        <template slot-scope="tripCamera">
+                          <div
+                            :title="
+                              cameraStateString[tripCamera.row.cameraState] ||
+                                ''
+                            "
+                          >
+                            {{
+                              cameraStateString[tripCamera.row.cameraState] ||
+                                ''
+                            }}
+                          </div>
+                        </template>
+                      </el-table-column>
                       <el-table-column label="註記" prop="cameraMark">
                         <template slot-scope="tripCamera">
                           <div :title="tripCamera.row.cameraMark">
@@ -309,6 +329,12 @@ export default {
       type: Array,
       default: () => [],
     },
+    cmaeraLocationEvenString: {
+      type: Object,
+    },
+    cameraStateString: {
+      type: Object,
+    },
   },
   components: {
     DoubleCheckModalWithStyle,
diff --git a/src/pages/Project/EditProject/Trip.vue b/src/pages/Project/EditProject/Trip.vue
index 1351d50d..3a8f569e 100644
--- a/src/pages/Project/EditProject/Trip.vue
+++ b/src/pages/Project/EditProject/Trip.vue
@@ -29,6 +29,8 @@
           :projectId="projectId"
           :projectTripsData="projectTrips"
           :searchTrip="searchTrip"
+          :cmaeraLocationEvenString="cmaeraLocationEvenString"
+          :cameraStateString="cameraStateString"
           @deleteProjectTrip="deleteProjectTrip"
           @openEditProjectTripBasic="openEditProjectTripBasic"
         />
@@ -42,7 +44,7 @@
           :closeEditProjectTripBasic="closeEditProjectTripBasic"
           :openEditProjectTripCamera="openEditProjectTripCamera"
           :addEditProjectTripRequest="addEditProjectTripRequest"
-          :setEditProjectTrip="setEditProjectTripData"
+          :setEditProjectTripData="setEditProjectTripData"
           :editProjectTripData="editProjectTripData"
         ></edit-project-trip-basic>
       </div>
@@ -52,7 +54,9 @@
           :projectCameras="projectCameras"
           :getProjectCameras="getProjectCameras"
           :projectId="projectId"
-          :setEditProjectTrip="setEditProjectTripData"
+          :setEditProjectTripData="setEditProjectTripData"
+          :cmaeraLocationEvenString="cmaeraLocationEvenString"
+          :cameraStateString="cameraStateString"
         ></edit-project-trip-camera>
       </div>
     </div>
@@ -94,6 +98,15 @@ const projectCamera = createNamespacedHelpers('projectCamera');
 const studyAreas = createNamespacedHelpers('studyAreas');
 const trip = createNamespacedHelpers('trip');
 
+const cmaeraLocationEvenString = {
+  設置: '設置',
+  替換: '替換',
+};
+const cameraStateString = {
+  active: '正常',
+  broken: '毀損',
+};
+
 export default {
   components: {
     EditProjectTripBasic,
@@ -109,6 +122,8 @@ export default {
       projectId: this.$route.params.projectId,
       showCheckCameraDetailModal: false,
       searchTrip: '',
+      cmaeraLocationEvenString,
+      cameraStateString,
     };
   },
   computed: {

From 203ab30753a06fdf32dd493ed0663ef5800a71ae Mon Sep 17 00:00:00 2001
From: "peggy.liu" <peggy.liu@brocas.com.tw>
Date: Fri, 11 Oct 2019 15:09:21 +0800
Subject: [PATCH 4/7] Fix no cameraLocationEven and cameraLocationMark bug when
 edit trip

---
 .../ProjectEdit/Trip/EditProjectTripBasic.vue       | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue b/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
index 3366ae3f..876b005b 100644
--- a/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
+++ b/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
@@ -318,16 +318,19 @@ export default {
                               cameraLocationData => {
                                 if (
                                   cameraLocationData.cameraLocation ===
-                                    cameraLocation.value &&
-                                  cameraLocationData.projectCameras &&
-                                  cameraLocationData.projectCameras.length > 0
+                                  cameraLocation.value
                                 ) {
                                   cameraLocationEven =
                                     cameraLocationData.cameraLocationEven;
                                   cameraLocationMark =
                                     cameraLocationData.cameraLocationMark;
-                                  projectCameras =
-                                    cameraLocationData.projectCameras;
+                                  if (
+                                    cameraLocationData.projectCameras &&
+                                    cameraLocationData.projectCameras.length > 0
+                                  )
+                                    projectCameras =
+                                      cameraLocationData.projectCameras;
+
                                   return true;
                                 }
                               },

From 8ffc7881686cdef06b1669e00170ba64d5feda59 Mon Sep 17 00:00:00 2001
From: "peggy.liu" <peggy.liu@brocas.com.tw>
Date: Fri, 11 Oct 2019 22:41:07 +0800
Subject: [PATCH 5/7] Modify edit trip camera data and style

---
 .../ProjectEdit/Trip/EditProjectTripBasic.vue |   2 +-
 .../Trip/EditProjectTripCamera.vue            | 170 ++++++++++++++----
 2 files changed, 135 insertions(+), 37 deletions(-)

diff --git a/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue b/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
index 876b005b..997d995c 100644
--- a/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
+++ b/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
@@ -128,7 +128,7 @@
         </div>
       </form>
     </div>
-    <div class="edit-project-trip-basic-footer float-right mt-3">
+    <div class="edit-project-trip-basic-footer float-right mt-3 mb-3">
       <button
         class="btn btn-green-border mr-3"
         @click="closeEditProjectTripBasic"
diff --git a/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue b/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue
index eea4d184..3ca5981d 100644
--- a/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue
+++ b/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue
@@ -77,9 +77,7 @@
         <div
           class="trip-camera-detail"
           :class="{
-            half:
-              projectTrip.projectCameras &&
-              projectTrip.projectCameras.length > 1,
+            half: tripCameraDetailHalf,
           }"
           v-show="
             projectTrip.projectCameras && projectTrip.projectCameras.length > 0
@@ -98,7 +96,6 @@
                 v-model="tripCamerasDetail[index].cameraState"
                 :options="cameraStateOptions"
                 placeholder="請選擇相機狀態"
-                @change="changeLimit"
               ></v-select>
             </div>
           </div>
@@ -127,11 +124,14 @@
           <div class="form-group row">
             <label class="col-4">電池類型:</label>
             <div class="col-6">
+              <span v-if="tripCameraDetailHalf && index == 0"
+                >{{ tripCamerasDetail[index].cameraBatteryType }}
+              </span>
               <v-select
+                v-else
                 v-model="tripCamerasDetail[index].cameraBatteryType"
                 :options="batteryTypeOptions"
                 placeholder="請選擇電池類型"
-                @change="changeLimit"
               ></v-select>
             </div>
           </div>
@@ -151,28 +151,37 @@
           <div class="form-group row">
             <label class="col-4">光強度:</label>
             <div class="col-6">
+              <span v-if="tripCameraDetailHalf && index == 0"
+                >{{ tripCamerasDetail[index].cameraBrightness }}
+              </span>
               <v-select
+                v-else
                 v-model="tripCamerasDetail[index].cameraBrightness"
                 :options="brightnessOptions"
                 placeholder="請選擇光強度"
-                @change="changeLimit"
               ></v-select>
             </div>
           </div>
           <div class="form-group row">
             <label class="col-4">敏感度:</label>
             <div class="col-6">
+              <span v-if="tripCameraDetailHalf && index == 0"
+                >{{ tripCamerasDetail[index].cameraSensitivity }}
+              </span>
               <v-select
+                v-else
                 v-model="tripCamerasDetail[index].cameraSensitivity"
                 :options="sensitivityOptions"
                 placeholder="請選擇敏感度"
-                @change="changeLimit"
               ></v-select>
             </div>
           </div>
           <div class="form-group row">
             <label class="col-4">影片長度:</label>
-            <div class="col-6">
+            <span v-if="tripCameraDetailHalf && index == 0"
+              >{{ tripCamerasDetail[index].cameraVideoLength }}
+            </span>
+            <div v-else class="col-6">
               <input
                 v-model="tripCamerasDetail[index].cameraVideoLength"
                 type="text"
@@ -184,7 +193,10 @@
           </div>
           <div class="form-group row">
             <label class="col-4">連拍張數:</label>
-            <div class="col-6">
+            <span v-if="tripCameraDetailHalf && index == 0"
+              >{{ tripCamerasDetail[index].cameraContinuousShots }}
+            </span>
+            <div v-else class="col-6">
               <input
                 v-model="tripCamerasDetail[index].cameraContinuousShots"
                 type="text"
@@ -192,10 +204,14 @@
                 class="form-control"
               />
             </div>
+            <span>張</span>
           </div>
           <div class="form-group row">
             <label class="col-4">相機方位:</label>
-            <div class="col-6">
+            <span v-if="tripCameraDetailHalf && index == 0"
+              >{{ tripCamerasDetail[index].cameraPosition }}
+            </span>
+            <div v-else class="col-6">
               <input
                 v-model="tripCamerasDetail[index].cameraPosition"
                 type="text"
@@ -207,7 +223,10 @@
           </div>
           <div class="form-group row">
             <label class="col-4">相機俯角:</label>
-            <div class="col-6">
+            <span v-if="tripCameraDetailHalf && index == 0"
+              >{{ tripCamerasDetail[index].cameraDepressionAngle }}
+            </span>
+            <div v-else class="col-6">
               <input
                 v-model="tripCamerasDetail[index].cameraDepressionAngle"
                 type="text"
@@ -219,7 +238,10 @@
           </div>
           <div class="form-group row">
             <label class="col-4">感應距離:</label>
-            <div class="col-6">
+            <span v-if="tripCameraDetailHalf && index == 0"
+              >{{ tripCamerasDetail[index].cameraSensingDistance }}
+            </span>
+            <div v-else class="col-6">
               <input
                 v-model="tripCamerasDetail[index].cameraSensingDistance"
                 type="text"
@@ -339,6 +361,7 @@ export default {
       activeName: '',
       projectTrip: {},
       tripCamerasDetail: [{}, {}],
+      tripCamerasDetailOld: [],
       startActiveTime: { HH: '00', mm: '00' },
       endActiveTime: { HH: '00', mm: '00' },
       cmaeraLocationEvenOptionsAll: [],
@@ -355,6 +378,7 @@ export default {
       projectCameraLimit: 1,
       projectCameraNoDrop: false,
       endActiveDate: '',
+      tripCameraDetailHalf: false,
     };
   },
   async mounted() {
@@ -379,6 +403,13 @@ export default {
       this.setEditProjectTripReduest,
     );
   },
+  watch: {
+    'projectTrip.projectCameras': function() {
+      this.tripCameraDetailHalf =
+        this.projectTrip.projectCameras &&
+        this.projectTrip.projectCameras.length > 1;
+    },
+  },
   methods: {
     async selectCameraLocation(studyAreaIndex, cameraLocationIndex) {
       await this.setEditProjectTripReduest();
@@ -399,33 +430,84 @@ export default {
             value: nextProjectTrip.cameraLocationEven,
           }
         : undefined;
-      // 從資料轉換成表單用格式 相機編號
-      const projectCameras = nextProjectTrip.projectCameras
-        ? nextProjectTrip.projectCameras.map(({ cameraSn }) => cameraSn)
-        : [];
-      this.projectTrip = {
-        ...nextProjectTrip,
-        cameraLocationEven,
-        projectCameras,
-      };
 
-      let nextTripCamerasDetail = Array.from(
-        this.editProjectTripBasic.studyAreas[this.selectedStudyAreaIndex]
-          .cameraLocations[this.selectedCameraLocationIndex].projectCameras,
-      ).map(nextTripCameraDetail => {
+      let projectCameras = [];
+      let nextTripCameraDetail = {};
+      let nextTripCamerasDetail = [];
+      this.tripCamerasDetailOld = [];
+
+      if (
+        nextProjectTrip.projectCameras &&
+        nextProjectTrip.projectCameras.length > 0
+      ) {
+        nextTripCameraDetail =
+          nextProjectTrip.projectCameras[
+            nextProjectTrip.projectCameras.length - 1
+          ];
         // 從資料轉換成表單用格式 相機狀態
-        const cameraState = nextTripCameraDetail.cameraState
+        let cameraState = nextTripCameraDetail.cameraState
           ? {
-              label: this.cameraStateString[nextTripCameraDetail.cameraState],
-              value: nextTripCameraDetail.cameraState,
+              cameraState: {
+                label: this.cameraStateString[nextTripCameraDetail.cameraState],
+                value: nextTripCameraDetail.cameraState,
+              },
             }
           : {};
-        return { ...nextTripCameraDetail, cameraState };
-      });
+        nextTripCamerasDetail = [{ ...nextTripCameraDetail, ...cameraState }];
 
-      if (nextTripCamerasDetail && nextTripCamerasDetail.length > 0) {
-        this.tripCamerasDetail = nextTripCamerasDetail;
+        // 從資料轉換成表單用格式 相機編號
+        projectCameras = [nextTripCamerasDetail[0].cameraSn];
 
+        if (
+          !nextProjectTrip.projectCameras[
+            nextProjectTrip.projectCameras.length - 1
+          ]._id
+        ) {
+          nextTripCameraDetail =
+            nextProjectTrip.projectCameras[
+              nextProjectTrip.projectCameras.length - 2
+            ];
+          // 從資料轉換成表單用格式 相機狀態
+          cameraState = nextTripCameraDetail.cameraState
+            ? {
+                cameraState: {
+                  label: this.cameraStateString[
+                    nextTripCameraDetail.cameraState
+                  ],
+                  value: nextTripCameraDetail.cameraState,
+                },
+              }
+            : {};
+          nextTripCamerasDetail = [
+            { ...nextTripCameraDetail, ...cameraState },
+            ...nextTripCamerasDetail,
+          ];
+
+          // 從資料轉換成表單用格式 相機編號
+          projectCameras = [
+            nextTripCamerasDetail[0].cameraSn,
+            ...projectCameras,
+          ];
+        }
+
+        // 保留舊的行程相機
+        const tripCamerasDetailOldCount =
+          nextProjectTrip.projectCameras.length - projectCameras.length;
+        if (tripCamerasDetailOldCount > 0) {
+          this.tripCamerasDetailOld = nextProjectTrip.projectCameras.slice(
+            0,
+            tripCamerasDetailOldCount,
+          );
+        }
+      }
+
+      this.projectTrip = {
+        ...nextProjectTrip,
+        cameraLocationEven,
+        projectCameras,
+      };
+
+      if (nextTripCamerasDetail && nextTripCamerasDetail.length > 0) {
         if (
           this.projectTrip.projectCameras &&
           this.projectTrip.projectCameras.length === 1
@@ -450,11 +532,24 @@ export default {
             };
           } else this.endActiveTime = { HH: '00', mm: '00' };
         }
+
+        this.tripCamerasDetail = nextTripCamerasDetail;
+        if (this.tripCamerasDetail.length === 1) {
+          this.tripCamerasDetail[1] = {};
+        }
+
+        this.cmaeraLocationEvenOptions = [...this.cmaeraLocationEvenOptionsAll];
+        this.cameraStateOptions = [...this.cameraStateOptionsAll];
       } else {
         this.tripCamerasDetail = [{}, {}];
         this.startActiveTime = { HH: '00', mm: '00' };
         this.endActiveTime = { HH: '00', mm: '00' };
+
+        this.cmaeraLocationEvenOptions = [this.cmaeraLocationEvenOptionsAll[0]];
+        this.cameraStateOptions = [this.cameraStateOptionsAll[0]];
       }
+
+      this.changeLimit();
     },
     async setEditProjectTripReduest() {
       if (this.selectedCameraLocationIndex !== null) {
@@ -517,11 +612,10 @@ export default {
               return { cameraSn: value, ...currentTripCamera };
             },
           );
-
           currentProjectTrip = {
             ...currentProjectTrip,
             cameraLocationEven,
-            projectCameras,
+            projectCameras: [...this.tripCamerasDetailOld, ...projectCameras],
           };
         }
 
@@ -535,9 +629,13 @@ export default {
         this.setEditProjectTripData(this.editProjectTripBasic);
       }
     },
-    changeLimit(value) {
+    changeLimit() {
       this.projectCameraLimit =
-        value === this.cmaeraLocationEvenOptions[1] ? 2 : 1;
+        this.projectTrip.cameraLocationEven &&
+        this.projectTrip.cameraLocationEven.value ==
+          this.cmaeraLocationEvenOptionsAll[1].value
+          ? 2
+          : 1;
 
       if (this.projectTrip.projectCameras && this.projectCameraLimit === 1)
         this.projectTrip.projectCameras.splice(1, 1);

From 3745dee561edc9775c0a5d71731f2a92200d68ea Mon Sep 17 00:00:00 2001
From: "peggy.liu" <peggy.liu@brocas.com.tw>
Date: Wed, 16 Oct 2019 18:35:34 +0800
Subject: [PATCH 6/7] Modify cameraLocationEvent

---
 .../ProjectEdit/Trip/EditProjectTripBasic.vue |  8 +++----
 .../Trip/EditProjectTripCamera.vue            | 22 +++++++++----------
 .../ProjectEdit/Trip/ListProjectTrip.vue      |  6 ++---
 src/pages/Project/EditProject/Trip.vue        |  4 ++--
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue b/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
index 997d995c..5967731f 100644
--- a/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
+++ b/src/components/ProjectEdit/Trip/EditProjectTripBasic.vue
@@ -301,7 +301,7 @@ export default {
               if (this.projectTripCameraLocations[value]) {
                 cameraLocations = this.projectTripCameraLocations[value].map(
                   cameraLocation => {
-                    let cameraLocationEven = undefined;
+                    let cameraLocationEvent = undefined;
                     let cameraLocationMark = undefined;
                     let projectCameras = undefined;
                     if (
@@ -320,8 +320,8 @@ export default {
                                   cameraLocationData.cameraLocation ===
                                   cameraLocation.value
                                 ) {
-                                  cameraLocationEven =
-                                    cameraLocationData.cameraLocationEven;
+                                  cameraLocationEvent =
+                                    cameraLocationData.cameraLocationEvent;
                                   cameraLocationMark =
                                     cameraLocationData.cameraLocationMark;
                                   if (
@@ -345,7 +345,7 @@ export default {
                     return {
                       cameraLocation: cameraLocation.value,
                       title: cameraLocation.label,
-                      cameraLocationEven: cameraLocationEven || '',
+                      cameraLocationEvent: cameraLocationEvent || '',
                       cameraLocationMark: cameraLocationMark || '',
                       projectCameras: projectCameras || [],
                     };
diff --git a/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue b/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue
index 3ca5981d..7dc5654b 100644
--- a/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue
+++ b/src/components/ProjectEdit/Trip/EditProjectTripCamera.vue
@@ -39,7 +39,7 @@
           <div class="col-6">
             <div class="select">
               <v-select
-                v-model="projectTrip.cameraLocationEven"
+                v-model="projectTrip.cameraLocationEvent"
                 :options="cmaeraLocationEvenOptions"
                 placeholder="請選擇相機位置事件"
                 @change="changeLimit"
@@ -422,12 +422,12 @@ export default {
       ].cameraLocations[this.selectedCameraLocationIndex];
 
       // 從資料轉換成表單用格式 相機位置事件
-      const cameraLocationEven = nextProjectTrip.cameraLocationEven
+      const cameraLocationEvent = nextProjectTrip.cameraLocationEvent
         ? {
             label: this.cmaeraLocationEvenString[
-              nextProjectTrip.cameraLocationEven
+              nextProjectTrip.cameraLocationEvent
             ],
-            value: nextProjectTrip.cameraLocationEven,
+            value: nextProjectTrip.cameraLocationEvent,
           }
         : undefined;
 
@@ -503,7 +503,7 @@ export default {
 
       this.projectTrip = {
         ...nextProjectTrip,
-        cameraLocationEven,
+        cameraLocationEvent,
         projectCameras,
       };
 
@@ -556,9 +556,9 @@ export default {
         let currentProjectTrip = Object.assign({}, this.projectTrip);
         if (currentProjectTrip.projectCameras !== undefined) {
           // 從表單用格式轉換成資料 相機位置事件
-          let cameraLocationEven = {};
-          if (this.projectTrip.cameraLocationEven)
-            cameraLocationEven = this.projectTrip.cameraLocationEven.value;
+          let cameraLocationEvent = {};
+          if (this.projectTrip.cameraLocationEvent)
+            cameraLocationEvent = this.projectTrip.cameraLocationEvent.value;
           // 從表單用格式轉換成資料 相機編號
           const projectCameras = currentProjectTrip.projectCameras.map(
             (value, index) => {
@@ -614,7 +614,7 @@ export default {
           );
           currentProjectTrip = {
             ...currentProjectTrip,
-            cameraLocationEven,
+            cameraLocationEvent,
             projectCameras: [...this.tripCamerasDetailOld, ...projectCameras],
           };
         }
@@ -631,8 +631,8 @@ export default {
     },
     changeLimit() {
       this.projectCameraLimit =
-        this.projectTrip.cameraLocationEven &&
-        this.projectTrip.cameraLocationEven.value ==
+        this.projectTrip.cameraLocationEvent &&
+        this.projectTrip.cameraLocationEvent.value ==
           this.cmaeraLocationEvenOptionsAll[1].value
           ? 2
           : 1;
diff --git a/src/components/ProjectEdit/Trip/ListProjectTrip.vue b/src/components/ProjectEdit/Trip/ListProjectTrip.vue
index fb5ad750..61041f73 100644
--- a/src/components/ProjectEdit/Trip/ListProjectTrip.vue
+++ b/src/components/ProjectEdit/Trip/ListProjectTrip.vue
@@ -55,12 +55,12 @@
                       style="width: 100%"
                     >
                       <el-table-column label="位置" prop="cameraLocation" />
-                      <el-table-column label="事件" prop="cameraLocationEven">
+                      <el-table-column label="事件" prop="cameraLocationEvent">
                         <template slot-scope="props">
-                          <div :title="props.row.cameraLocationMark">
+                          <div :title="props.row.cameraLocationEvent">
                             {{
                               cmaeraLocationEvenString[
-                                props.row.cameraLocationMark
+                                props.row.cameraLocationEvent
                               ] || ''
                             }}
                           </div>
diff --git a/src/pages/Project/EditProject/Trip.vue b/src/pages/Project/EditProject/Trip.vue
index 3a8f569e..0731e31a 100644
--- a/src/pages/Project/EditProject/Trip.vue
+++ b/src/pages/Project/EditProject/Trip.vue
@@ -99,8 +99,8 @@ const studyAreas = createNamespacedHelpers('studyAreas');
 const trip = createNamespacedHelpers('trip');
 
 const cmaeraLocationEvenString = {
-  設置: '設置',
-  替換: '替換',
+  setting: '設置',
+  exchange: '替換',
 };
 const cameraStateString = {
   active: '正常',

From c01c28fa0159e5da333561eb0a91bdc29c0ff0ac Mon Sep 17 00:00:00 2001
From: "peggy.liu" <peggy.liu@brocas.com.tw>
Date: Thu, 17 Oct 2019 09:01:43 +0800
Subject: [PATCH 7/7] Modify cameraLocation title

---
 src/components/ProjectEdit/Trip/ListProjectTrip.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/ProjectEdit/Trip/ListProjectTrip.vue b/src/components/ProjectEdit/Trip/ListProjectTrip.vue
index 61041f73..1fa19c1f 100644
--- a/src/components/ProjectEdit/Trip/ListProjectTrip.vue
+++ b/src/components/ProjectEdit/Trip/ListProjectTrip.vue
@@ -54,7 +54,7 @@
                       @row-click="selectCameraLocation($event, props.row.sn)"
                       style="width: 100%"
                     >
-                      <el-table-column label="位置" prop="cameraLocation" />
+                      <el-table-column label="位置" prop="title" />
                       <el-table-column label="事件" prop="cameraLocationEvent">
                         <template slot-scope="props">
                           <div :title="props.row.cameraLocationEvent">
@@ -82,10 +82,8 @@
                   <h5>
                     相機資訊{{
                       selectedTrip[props.row.sn] &&
-                      selectedTrip[props.row.sn].cameraLocation.cameraLocation
-                        ? '-' +
-                          selectedTrip[props.row.sn].cameraLocation
-                            .cameraLocation
+                      selectedTrip[props.row.sn].cameraLocation.title
+                        ? '-' + selectedTrip[props.row.sn].cameraLocation.title
                         : ''
                     }}
                   </h5>