sora/OTM
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

cleanup
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
choelzl 2021-07-16 16:17:55 +02:00
parent 74734113b0
commit 2bc3828ab5
Signed by: sora
GPG Key ID: A362EA0491E2EEA0
3 changed files with 110 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
public/js/main.js
View File

@ -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.install)
Vue.use(window.VueTextareaAutosize)
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){
return L.AwesomeMarkers.icon(
{icon: icon_type(item) || 'star', prefix: 'fa',markerColor: item.color || 'blue'}
generate_icon: function(item,fcolor){
return L.AwesomeMarkers.icon({
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,
},
},
})

1
public/template/home.html
View File

@ -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>

160
public/template/journey.html
View File

@ -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-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="first_step">Main</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.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.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" :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>
Hotel: {{journey_data.main[journey_step_data.section].hotel.display_name}}
<h1 class="row text-medium text-center">{{journey_data.main[journey_step_data.section].hotel.sname}}</h1>
<span class="row text-small text-gray">{{journey_data.main[journey_step_data.section].hotel.display_name}}</span>
<div class="row">
<textarea-autosize
class="col-12 col-sm-10"
placeholder="Notes"
v-model="journey_data.main[journey_step_data.section].hotel.notes"
:min-height="30"
:max-height="350"
/>
</div>
</div>
</l-popup>
</l-marker>
<!-- <l-marker v-for="place in journey_data.main[journey_step_data.section].places.restaurants" :lat-lng="place.latlon">
<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,'food')"></div>
<div v-html="generate_icon(place)"></div>
</l-icon>
<l-popup>
<div>
Food: {{place.display_name}}
<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>
</l-marker> -->
<l-marker v-for="place in filter_selected(journey_data.main[journey_step_data.section].places.activities, true)" :lat-lng="place.latlon">
</div>
<div v-else-if="place.step >= 0">
<l-icon>
<div v-html="generate_icon(place,'activity')"></div>
<div v-html="generate_icon(place,'orange')"></div>
</l-icon>
<l-popup>
<div>
Activity: {{place.display_name}}
<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>
</l-marker>
</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>