Add orientation on marker

package.json

@@ -21,6 +21,7 @@
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vue2-leaflet": "^1.0.2",
+    "vue2-leaflet-rotatedmarker": "^1.0.1",
     "vuetify": "^1.0.19",
     "vuex": "^3.0.1",
     "vuex-router-sync": "^5.0.0"

src/components/Spark.vue

@@ -15,8 +15,8 @@
                   <v-flex>
                     <v-card>
                       <v-card-text>
-                        <v-text-field ref='campaignId' label='Campaign id'></v-text-field>
-                        <v-text-field ref='maletteId' label='Malette id'></v-text-field>
+                        <v-text-field ref='campaignId' label='Campaign id' :value="id_campaign"></v-text-field>
+                        <v-text-field ref='maletteId' label='Malette id' :value="id_malette"></v-text-field>
                         <v-text-field ref='customLaunchScript' label='Custom launch script'></v-text-field>
                       </v-card-text>
                     </v-card>
@@ -114,12 +114,6 @@ export default {
       number: 0
     }
   },
-  mounted () {
-    if (this.id_campaign != null && this.id_malette != null) {
-      this.$refs.campaignId.$refs.input.value = this.id_campaign
-      this.$refs.maletteId.$refs.input.value = this.id_malette
-    }
-  },
   methods: {
     launchSpark () {
       var args = {

src/components/campaign/Campaign.vue

@@ -6,17 +6,15 @@
           <v-card class="elevation-12">
             <CampaignInfo v-bind:lots="lots" v-bind:campaign="campaign"></CampaignInfo>
             <v-card-text>
-              <v-container fluid grid-list-sm>
                 <v-layout row wrap>
-                  <v-flex style="height: 80vh">
+                  <v-flex style="height: 86vh">
                     <MapCampaign ref="map" v-bind:lots="lots" style="height: 60vh"></MapCampaign>
-                    <LotInfo class="mt-1" ref="lotInfo" style="height: 20vh"></LotInfo>
+                    <LotInfo class="mt-1" ref="lotInfo" style="height: 26vh"></LotInfo>
                   </v-flex>
                   <v-flex xs1>
-                    <LotList ref="lotList" v-bind:lots="lots"></LotList>
+                    <LotList class="ml-1" style="height: 86.5vh" ref="lotList" v-bind:lots="lots"></LotList>
                   </v-flex>
                 </v-layout>
-              </v-container>
             </v-card-text>
           </v-card>
         </v-flex>

src/components/campaign/LotInfo.vue

@@ -1,31 +1,29 @@
 <template>
    <v-card v-if="lot !== null">
-     <v-card-text>
-       <v-layout row wrap>
-         <v-flex>
-           <img v-for="i in img" v-bind:key="i" v-bind:src="i" class="apn">
-         </v-flex>
-         <v-flex>
-           <v-card>
-             <v-toolbar dark color="primary">
-               <v-toolbar-title>Lot : {{lot.id_lot}}</v-toolbar-title>
-               <v-spacer></v-spacer>
-               <router-link v-if="lot.tile.id_tile !== null" :to="'/viewer/' + lot.tile.id_tile + '/' + lot.id_malette"><v-icon>panorama_horizontal</v-icon></router-link>
-             </v-toolbar>
-             <v-list>
-               <v-list-tile>
-                 <v-list-tile-content>Date :</v-list-tile-content>
-                 <v-list-tile-content class="align-end">{{lot.takenDate}}</v-list-tile-content>
-               </v-list-tile>
-               <v-list-tile>
-                 <v-list-tile-content>Gps cord :</v-list-tile-content>
-                 <v-list-tile-content class="align-end">{{lot.sensors.gps_pos.coordinates}}</v-list-tile-content>
-               </v-list-tile>
-             </v-list>
-           </v-card>
-         </v-flex>
-       </v-layout>
-     </v-card-text>
+       <v-card-text>
+         <v-layout row wrap>
+         <v-layout row wrap class="mr-1">
+           <img v-for="i in img" :key="i" :src="i" class="apn">
+         </v-layout>
+         <v-card>
+           <v-toolbar dark color="primary">
+             <v-toolbar-title>Lot : {{lot.id_lot}}</v-toolbar-title>
+             <v-spacer></v-spacer>
+             <router-link v-if="lot.tile.id_tile !== null" :to="'/viewer/' + lot.tile.id_tile + '/' + lot.id_malette"><v-icon>panorama_horizontal</v-icon></router-link>
+           </v-toolbar>
+           <v-list>
+             <v-list-tile>
+               <v-list-tile-content>Date :</v-list-tile-content>
+               <v-list-tile-content class="align-end">{{lot.takenDate}}</v-list-tile-content>
+             </v-list-tile>
+             <v-list-tile>
+               <v-list-tile-content>Gps cord :</v-list-tile-content>
+               <v-list-tile-content class="align-end">{{lot.sensors.gps_pos.coordinates}}</v-list-tile-content>
+             </v-list-tile>
+           </v-list>
+         </v-card>
+         </v-layout>
+       </v-card-text>
    </v-card>
 </template>
 
@@ -54,8 +52,9 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .apn{
-  height: 17vh;
+  max-height: 23vh;
+  max-width: calc(45vw / 6)
 }
 </style>

src/components/campaign/LotList.vue

@@ -1,5 +1,5 @@
 <template>
-   <v-card style="height: 80.5vh" class="scroll-y">
+   <v-card class="scroll-y">
      <v-toolbar dark color="primary">
        <v-toolbar-title>Lot list</v-toolbar-title>
      </v-toolbar>

src/components/campaign/MapCampaign.vue

@@ -2,14 +2,15 @@
   <v-card style="height: 100%">
     <l-map ref='map' :zoom='zoom' :center='center' style="height: 100%">
       <l-tile-layer ref="test" :url='url' :options='tileOption' :attribution='attribution'></l-tile-layer>
-      <l-marker v-for='lot in lots' :options='{sensors: lot.sensors}' :draggable="true" :key='lot.id_lot' :icon='genIcon(lot)' :lat-lng='genCord(lot.sensors)' v-on:click='clicked(lot)' @dragend='markerMove'></l-marker>
+      <l-rotated-marker :rotationAngle="180 + lot.sensors.degrees + 90" v-for="lot in lots" :key="lot.id_lot"  :options='{sensors: lot.sensors}' :draggable="true" :icon='genIcon(lot)' :lat-lng='genCord(lot.sensors)' v-on:click='clicked(lot)' @dragend='markerMove'></l-rotated-marker>
     </l-map>
   </v-card>
 </template>
 
 <script>
 import '@/../node_modules/leaflet/dist/leaflet.css'
-import { LMap, LMarker, LPopup, LTileLayer } from 'vue2-leaflet'
+import { LMap, LPopup, LTileLayer, LPolyline } from 'vue2-leaflet'
+import LRotatedMarker from 'vue2-leaflet-rotatedmarker'
 import L from 'leaflet'
 import ApiManager from '@/apiManager'
 
@@ -19,8 +20,9 @@ export default {
   components: {
     LMap,
     LTileLayer,
-    LMarker,
-    LPopup
+    LPopup,
+    LPolyline,
+    LRotatedMarker
   },
   data () {
     return {

yarn.lock

@@ -4833,6 +4833,10 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+material-design-icons-iconfont@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/material-design-icons-iconfont/-/material-design-icons-iconfont-3.0.3.tgz#154a1084047d4e27237fa7f5a37e1075ceea6df2"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
@@ -7618,6 +7622,13 @@ vue-template-es2015-compiler@^1.5.3, vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
+vue2-leaflet-rotatedmarker@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vue2-leaflet-rotatedmarker/-/vue2-leaflet-rotatedmarker-1.0.1.tgz#3f7f30ddcfc67137afa17b37fc06906521fa42a0"
+  dependencies:
+    leaflet "^1.3.1"
+    vue2-leaflet "^1.0.2"
+
 vue2-leaflet@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-1.0.2.tgz#73e0c09a30015db9a8dc0e9256443afb180d1fd5"
@@ -7628,6 +7639,10 @@ vue@^2.5.2:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
 
+vuetify@^1.0.19:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.1.8.tgz#3aef842ddc9b7ec348e7ce273a24f2f8ebb1cea9"
+
 vuex-router-sync@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/vuex-router-sync/-/vuex-router-sync-5.0.0.tgz#1a225c17a1dd9e2f74af0a1b2c62072e9492b305"