cleanup

public/js/main.js

@@ -69,8 +69,7 @@ Vue.component('l-icon', window.Vue2Leaflet.LIcon);
 Vue.component('l-popup', window.Vue2Leaflet.LPopup);
 Vue.component('l-tooltip', window.Vue2Leaflet.LTooltip);
 Vue.component('l-control-scale', window.Vue2Leaflet.LControlScale);
-Vue.component('l-draggable', window.vuedraggable);
+Vue.use(window.VueTextareaAutosize)
-Vue.use(window.VueTextareaAutosize.install)
 
 Vue.component('multiselect', window.VueMultiselect.default)
 
@@ -88,7 +87,6 @@ const app = new Vue({
         query:{hotel:[],flight:[],nominatim:[]},
         querying:{hotel:false,flight:false,place:false,food:false},
         impexp:"",
-        activities_tmp:[],
     },
     methods: {
         start_journey: function(event){
@@ -101,14 +99,20 @@ const app = new Vue({
         next_step: function(){
             this.journey_step+=1;
             this.journey_step_data = this.step_convert(this.journey_step);
-            this.activities_tmp = this.journey_data.main[this.journey_step_data.section].places.activities.filter(e=>e.step==this.journey_step)
+            if(this.journey_step_data.section==-1) this.prev_step();
+            window.location.hash = '#' + this.journey_step;
+
+        },
+        prev_step: function(){
+            this.journey_step-=1;
+            if(this.journey_step<-1) this.journey_step=-1;
+            this.journey_step_data = this.step_convert(this.journey_step);
             window.location.hash = '#' + this.journey_step;
 
         },
         first_step: function(){
             this.journey_step=-1;
             this.journey_step_data = {day:-1, section:-1};
-            this.activities_tmp = [];
             window.location.hash = '';
         },
         step_convert: function(step){
@@ -140,7 +144,10 @@ const app = new Vue({
             }
             return query_nominatim(txt,f)
             .then((results) =>{
-                results.forEach(r=>r.latlon=[parseFloat(r.lat),parseFloat(r.lon)])
+                results.forEach(r=>{
+                    r.latlon=[parseFloat(r.lat),parseFloat(r.lon)];
+                    r.sname=r.display_name.split(',')[0];
+                })
                 this.query.nominatim=results;
             });
         },
@@ -157,9 +164,10 @@ const app = new Vue({
             });
     
         },
-        generate_icon: function(item){
+        generate_icon: function(item,fcolor){
-            return L.AwesomeMarkers.icon(
+            return L.AwesomeMarkers.icon({
-                {icon: icon_type(item) || 'star',  prefix: 'fa',markerColor: item.color || 'blue'}
+                icon: icon_type(item) || 'star', prefix: 'fa',
+                markerColor: fcolor || item.color || 'blue'}
             ).createIcon().outerHTML
         },
 
@@ -199,7 +207,6 @@ const app = new Vue({
                 }
             }
             this.journey_step_data = this.step_convert(this.journey_step);
-            this.activities_tmp = this.journey_data.main[this.journey_step_data.section].places.activities.filter(e=>e.step==this.journey_step);
         });
         this.debounceSave = _.debounce(this.save_data, 500)
         this.debounceSearch = {"hotel":_.debounce((q)=>{this.querying.hotel=true;this.search_nominatim(q,(r)=>(r.type=="hotel")).then((r)=>{this.querying.hotel=false});}, 500),
@@ -225,11 +232,5 @@ const app = new Vue({
             },
             deep: true,
         },
-        activities_tmp:{
-            handler:function (nd,od){
-                nd.forEach(e=>e.step=this.journey_step);
-            },
-            deep: false,
-        },
     },
 })

public/template/home.html

@@ -9,7 +9,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700,300" type="text/css">
     <link rel='stylesheet' href='/public/css/index.css'/>
 
-    <script src="/public/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
 
     <script src="https://unpkg.com/vue2-datepicker/index.min.js"></script>

public/template/journey.html

@@ -9,7 +9,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700,300" type="text/css">
     <link rel='stylesheet' href='/public/css/index.css'/>
 
-    <script src="/public/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
 
     <script src="https://unpkg.com/vue2-datepicker/index.min.js"></script>
@@ -28,8 +27,6 @@
 
     <script src="https://unpkg.com/vue-multiselect"></script>
 
-    <script src="//cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
-    <script src="https://unpkg.com/vuedraggable/dist/vuedraggable.umd.min.js"></script>
     <script src="https://unpkg.com/vue-textarea-autosize/dist/vue-textarea-autosize.umd.min.js"></script>
     <link rel="stylesheet" href="https://unpkg.com/vue-multiselect/dist/vue-multiselect.min.css">
 
@@ -45,8 +42,9 @@
                 <div class="input input-invis"><input class="small" v-model="journey_data.name" type="text" /></div>
                 
                 <ul class="header-nav">
-                    <div class="col-sm-5"><button class="button button--primary button--mobileFull" v-on:click="first_step">Main</button></div>
+                    <div class="col-sm-4"><button class="button button--small" v-on:click="first_step">Main</button></div>
-                    <div class="col-sm-5"><button class="button button--primary button--mobileFull" v-on:click="next_step">Next</button></div>
+                    <div class="col-sm-4"><button class="button button--small" v-on:click="prev_step">Prev</button></div>
+                    <div class="col-sm-4"><button class="button button--small" v-on:click="next_step">Next</button></div>
                 </ul>
             </div>
         </header>
@@ -74,7 +72,7 @@
 
                                 <l-marker v-if="item.hotel && item.hotel.icon" :lat-lng.sync="item.hotel.latlon">
                                     <l-icon>
-                                        <div v-html="generate_icon(item.hotel,'hotel')"></div>
+                                        <div v-html="generate_icon(item.hotel,'darkblue')"></div>
                                     </l-icon>
                                     <l-popup>
                                       <div>
@@ -90,17 +88,17 @@
                                 </l-marker>
                                 <l-marker v-for="place in item.places.restaurants" :lat-lng.sync="place.latlon">
                                     <l-icon>
-                                        <div v-html="generate_icon(place,'food')"></div>
+                                        <div v-html="generate_icon(place,'cadetblue')"></div>
                                     </l-icon>
                                     <l-popup>
                                       <div>
-                                        Food: {{place.display_name}}
+                                        Restaurant: {{place.display_name}}
                                       </div>
                                     </l-popup>
                                 </l-marker>
                                 <l-marker v-for="place in item.places.activities" :lat-lng.sync="place.latlon">
                                     <l-icon>
-                                        <div v-html="generate_icon(place,'activity')"></div>
+                                        <div v-html="generate_icon(place)"></div>
                                     </l-icon>
                                     <l-popup>
                                       <div>
@@ -119,26 +117,26 @@
                             </div>
                             <div class="row text-center">
                                 <div><label>Hotel</label></div>
-                                <multiselect v-model="item.hotel" id="ajax" label="display_name" track-by="place_id" placeholder="Type to search" open-direction="bottom" :options="query.nominatim" :searchable="true" :loading="querying.hotel" :internal-search="false" :clear-on-select="false" :allow-empty="false" :options-limit="300" :limit="3" :max-height="600"  @search-change="debounceSearch.hotel"></multiselect>
+                                <multiselect v-model="item.hotel" id="ajax" label="sname" track-by="place_id" placeholder="Type to search" open-direction="bottom" :options="query.nominatim" :searchable="true" :loading="querying.hotel" :internal-search="false" :clear-on-select="false" :options-limit="50" :limit="1" :max-height="600"  @search-change="debounceSearch.hotel"></multiselect>
                             </div>
                             <div class="row text-center">
                                 <div><label>Fight</label></div>
                                 
-                                    <multiselect v-model="item.flightA" id="ajax" label="label" track-by="id" placeholder="Type to search" open-direction="bottom" :multiple="true" :options="query.flight" :searchable="true" :loading="querying.flight" :internal-search="false" :clear-on-select="false" :allow-empty="false" :options-limit="300" :limit="3" :max-height="600"  @search-change="debounceSearch.flight"></multiselect>
+                                    <multiselect v-model="item.flightA" id="ajax" label="label" track-by="id" placeholder="Type to search" open-direction="bottom" :multiple="true" :options="query.flight" :searchable="true" :loading="querying.flight" :internal-search="false" :clear-on-select="false" :options-limit="50" :limit="10" :max-height="600"  @search-change="debounceSearch.flight"></multiselect>
-                                    <multiselect v-model="item.flightB" id="ajax" label="label" track-by="id" placeholder="Type to search" open-direction="bottom" :multiple="true" :options="query.flight" :searchable="true" :loading="querying.flight" :internal-search="false" :clear-on-select="false" :allow-empty="false" :options-limit="300" :limit="3" :max-height="600"  @search-change="debounceSearch.flight"></multiselect>
+                                    <multiselect v-model="item.flightB" id="ajax" label="label" track-by="id" placeholder="Type to search" open-direction="bottom" :multiple="true" :options="query.flight" :searchable="true" :loading="querying.flight" :internal-search="false" :clear-on-select="false"  :options-limit="50" :limit="10" :max-height="600"  @search-change="debounceSearch.flight"></multiselect>
                                
                             </div>
                             <div class="row text-center">
                                 <div><label>Restoration</label></div>
                                 
-                                    <multiselect v-model="item.places.restaurants" id="ajax" label="display_name" track-by="place_id" placeholder="Type to search" open-direction="bottom" :multiple="true" :options="query.nominatim" :searchable="true" :loading="querying.food" :internal-search="false" :clear-on-select="false" :allow-empty="false" :options-limit="300" :limit="3" :max-height="600"  @search-change="debounceSearch.restaurants"></multiselect>
+                                    <multiselect v-model="item.places.restaurants" id="ajax" label="sname" track-by="place_id" placeholder="Type to search" open-direction="bottom" :multiple="true" :options="query.nominatim" :searchable="true" :loading="querying.food" :internal-search="false" :clear-on-select="false" :options-limit="50" :limit="10" :max-height="600"  @search-change="debounceSearch.restaurants"></multiselect>
                                     
                                
                             </div>
                             <div class="row text-center">
                                 <div><label>Activities</label></div>
                                 
-                                    <multiselect v-model="item.places.activities" id="ajax" label="display_name" track-by="place_id" placeholder="Type to search" open-direction="bottom" :multiple="true" :options="query.nominatim" :searchable="true" :loading="querying.place" :internal-search="false" :clear-on-select="false" :options-limit="300" :limit="3" :max-height="600"  @search-change="debounceSearch.places"></multiselect>
+                                    <multiselect v-model="item.places.activities" id="ajax" label="sname" track-by="place_id" placeholder="Type to search" open-direction="bottom" :multiple="true" :options="query.nominatim" :searchable="true" :loading="querying.place" :internal-search="false" :clear-on-select="false" :options-limit="50" :limit="10" :max-height="600"  @search-change="debounceSearch.places"></multiselect>
                                     
                                
                             </div>
@@ -164,7 +162,7 @@
             <div class="bg-dark text-white" v-cloak>
                 <div class="container section">
                     <div class="row text-center">
-                            <div class="input col-sm-4"><input  :value="journey_data.main[journey_step_data.section].title + ': Day ' + journey_step_data.day" disabled /></div>
+                            <div class="input col-sm-4"><input disabled :value="journey_data.main[journey_step_data.section].title + ': Day ' + journey_step_data.day" /></div>
                             <div class="input col-sm-2"><input placeholder="Day title" v-model="journey_data.step_title[journey_step]" /></div>
                         
                     </div>
@@ -186,34 +184,91 @@
                                                 journey_data.main[journey_step_data.section].hotel.icon" 
                                       :lat-lng="journey_data.main[journey_step_data.section].hotel.latlon">
                                     <l-icon>
-                                        <div v-html="generate_icon(journey_data.main[journey_step_data.section].hotel,'hotel')"></div>
+                                        <div v-html="generate_icon(journey_data.main[journey_step_data.section].hotel,'darkblue')"></div>
                                     </l-icon>
                                     <l-popup>
-                                      <div>
+                                      <h1 class="row text-medium text-center">{{journey_data.main[journey_step_data.section].hotel.sname}}</h1>
-                                        Hotel: {{journey_data.main[journey_step_data.section].hotel.display_name}}
+                                            <span class="row text-small text-gray">{{journey_data.main[journey_step_data.section].hotel.display_name}}</span>
-                                      </div>
+                                            <div class="row">
-                                    </l-popup>
+                                                <textarea-autosize
-                                </l-marker>
+                                                    class="col-12 col-sm-10"
-                                <!-- <l-marker v-for="place in journey_data.main[journey_step_data.section].places.restaurants" :lat-lng="place.latlon">
+                                                    placeholder="Notes"
-                                    <l-icon>
+                                                    v-model="journey_data.main[journey_step_data.section].hotel.notes"
-                                        <div v-html="generate_icon(place,'food')"></div>
+                                                    :min-height="30"
-                                    </l-icon>
+                                                    :max-height="350"
-                                    <l-popup>
+                                                />
-                                      <div>
+                                            </div>
-                                        Food: {{place.display_name}}
-                                      </div>
-                                    </l-popup>
-                                </l-marker> -->
-                                <l-marker v-for="place in filter_selected(journey_data.main[journey_step_data.section].places.activities, true)" :lat-lng="place.latlon">
-                                    <l-icon>
-                                        <div v-html="generate_icon(place,'activity')"></div>
-                                    </l-icon>
-                                    <l-popup>
-                                      <div>
-                                        Activity: {{place.display_name}}
                                       </div>
                                     </l-popup>
                                 </l-marker>
+                                <l-marker v-for="place in journey_data.main[journey_step_data.section].places.activities" :lat-lng="place.latlon">
+                                    <div v-if="place.step==journey_step">
+                                        <l-icon>
+                                            <div v-html="generate_icon(place)"></div>
+                                        </l-icon>
+                                        <l-popup>
+                                            <h1 class="row text-medium text-center">{{place.sname}}</h1>
+                                            <span class="row text-small text-gray">{{place.display_name}}</span>
+                                            <div class="row">
+                                                <textarea-autosize
+                                                    class="col-12 col-sm-10"
+                                                    placeholder="Notes"
+                                                    v-model="place.notes"
+                                                    :min-height="30"
+                                                    :max-height="350"
+                                                />
+                                            </div>
+                                            <a class="leaflet-popup-close-button text-gray" style="bottom:9px;top:auto; " href="#rm" v-on:click.prevent="place.step=-1">-</a>
+                                        </l-popup>
+                                    </div>
+                                    <div v-else-if="place.step >= 0">
+                                        <l-icon>
+                                            <div v-html="generate_icon(place,'orange')"></div>
+                                        </l-icon>
+                                        <l-popup>
+                                            <h1 class="row text-medium text-center">{{place.sname}}</h1>
+                                            <span class="row text-small text-gray">{{place.display_name}}</span>
+                                            <div class="row">
+                                                <textarea-autosize
+                                                    class="col-12 col-sm-10"
+                                                    placeholder="Notes"
+                                                    v-model="place.notes"
+                                                    :min-height="30"
+                                                    :max-height="350"
+                                                />
+                                            </div>
+                                            <a class="leaflet-popup-close-button text-gray" style="bottom:9px;top:auto; " href="#add" v-on:click.prevent="place.step=journey_step">+</a>
+                                        </l-popup>
+                                    </div>
+                                    <div v-else-if="place.step==undefined || place.step == -1">
+                                        <l-icon>
+                                            <div v-html="generate_icon(place,'red')"></div>
+                                        </l-icon>
+                                        <l-popup>
+                                            <h1 class="row text-medium text-center">{{place.sname}}</h1>
+                                            <span class="row text-small text-gray">{{place.display_name}}</span>
+                                            <div class="row">
+                                                <textarea-autosize
+                                                    class="col-12 col-sm-10"
+                                                    placeholder="Notes"
+                                                    v-model="place.notes"
+                                                    :min-height="30"
+                                                    :max-height="350"
+                                                />
+                                            </div>
+                                            <a class="leaflet-popup-close-button text-gray" style="bottom:9px;top:auto; " href="#add" v-on:click.prevent="place.step=journey_step">+</a>
+                                        </l-popup>
+                                    </div>
+                                    <div v-else>
+                                        <l-icon>
+                                            <div v-html="generate_icon()"></div>
+                                        </l-icon>
+                                        <l-popup>
+                                            <h1 class="row text-medium text-center">{{place.sname}}</h1>
+                                            <span class="row text-small text-gray">{{place.display_name}}</span>
+                                            
+                                        </l-popup>
+                                    </div>
                             </l-map>
                         </div>
                     </div>
@@ -229,55 +284,6 @@
                                 </div>
                             </div>
                             <div class="container"></div>
-                            <div class="container text-center">
-                                <b>Select Daily Activities</b>
-                                <div class= "row text-dark container">
-                                    <div class="col-12 col-sm-6">
-                                        <l-draggable
-                                            class="dragArea list-group"
-                                            :list="filter_unselected(journey_data.main[journey_step_data.section].places.activities)"
-                                            :group="{ name: 'people', pull: 'clone', put: false }"
-                                          >
-                                            <div
-                                              class="list-group-item"
-                                              v-for="element in filter_unselected(journey_data.main[journey_step_data.section].places.activities)"
-                                              :key="element.place_id"
-                                            >
-                                              {{ element.display_name.split(",")[0] }}
-                                            </div>
-                                        </l-draggable>
-                                    </div>
-                                    <div class="col-12 col-sm-6">
-                                        <l-draggable
-                                            class="dragArea list-group"
-                                            :list="activities_tmp"
-                                            group="people"
-                                        >
-                                            <div
-                                              class="list-group-item"
-                                              v-for="(element,idx) in filter_selected(activities_tmp,true)"
-                                              :key="element.place_id"
-                                            >
-                                                <div class="row">
-                                                    <i class="fa fa-times close col-12 col-sm-1" @click="remove_item(activities_tmp,idx)"></i>
-                                                    <div class="text">{{ element.display_name.split(",")[0] }}</div>
-                                                </div>
-                                                <div class="row">
-                                                    <div class="input col-12 col-sm-12">
-                                                        <textarea-autosize
-                                                        class="small"
-                                                        placeholder="Comments..."
-                                                        v-model="element.text"
-                                                        :min-height="16"
-                                                        :max-height="360"
-                                                        />
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </l-draggable>
-                                    </div>
-                                </div>
-                            </div>
                         </div>
                     </div>
                 </div>