This commit is contained in:
parent
d64c4ad26f
commit
a7b21906ba
GPG Key ID:
A362EA0491E2EEA0
@ -76,7 +76,7 @@ Vue.component('multiselect', window.VueMultiselect.default)
|
|||||||
const app = new Vue({
|
const app = new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
data: {
|
data: {
|
||||||
journey_id : window.location.pathname.slice(1) || gen_id(16),
|
journey_id : window.location.pathname.split('/').at(-1) || gen_id(16),
|
||||||
journey_step: window.location.hash.slice(1)==""?-1:parseInt(window.location.hash.slice(1)),
|
journey_step: window.location.hash.slice(1)==""?-1:parseInt(window.location.hash.slice(1)),
|
||||||
journey_step_data: {day:-1, section:-1},
|
journey_step_data: {day:-1, section:-1},
|
||||||
journey_data : {
|
journey_data : {
|
||||||
@ -84,6 +84,7 @@ const app = new Vue({
|
|||||||
main:[],
|
main:[],
|
||||||
step_title:[],
|
step_title:[],
|
||||||
},
|
},
|
||||||
|
view: window.location.pathname.split('/').at(1),
|
||||||
query:{hotel:[],flight:[],nominatim:[]},
|
query:{hotel:[],flight:[],nominatim:[]},
|
||||||
querying:{hotel:false,flight:false,place:false,food:false},
|
querying:{hotel:false,flight:false,place:false,food:false},
|
||||||
impexp:"",
|
impexp:"",
|
||||||
@ -106,6 +107,7 @@ const app = new Vue({
|
|||||||
prev_step: function(){
|
prev_step: function(){
|
||||||
this.journey_step-=1;
|
this.journey_step-=1;
|
||||||
if(this.journey_step<-1) this.journey_step=-1;
|
if(this.journey_step<-1) this.journey_step=-1;
|
||||||
|
if(this.journey_step==-1 && this.view) this.journey_step=0;
|
||||||
this.journey_step_data = this.step_convert(this.journey_step);
|
this.journey_step_data = this.step_convert(this.journey_step);
|
||||||
window.location.hash = '#' + this.journey_step;
|
window.location.hash = '#' + this.journey_step;
|
||||||
|
|
||||||
|
|||||||
@ -33,162 +33,317 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main id="app">
|
<main id="app">
|
||||||
<header class="header">
|
<div v-if="!view">
|
||||||
<div class="header-inner container">
|
<header class="header">
|
||||||
<a href="/" class="header-logo text-dark">
|
<div class="header-inner container">
|
||||||
<img class="header-logoImage" src="/public/img/helcel.png" alt="Helcel logo" width="40">
|
<a href="/" class="header-logo text-dark">
|
||||||
<span class="hide-small">HOTM</span>
|
<img class="header-logoImage" src="/public/img/helcel.png" alt="Helcel logo" width="40">
|
||||||
</a>
|
<span class="hide-small">HOTM</span>
|
||||||
<div class="input input-invis"><input class="small" v-model="journey_data.name" type="text" /></div>
|
</a>
|
||||||
|
<div class="input input-invis"><input class="small" v-model="journey_data.name" type="text" /></div>
|
||||||
|
|
||||||
<ul class="header-nav">
|
<ul class="header-nav">
|
||||||
<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="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="prev_step">Prev</button></div>
|
||||||
<div class="col-sm-4"><button class="button button--small" v-on:click="next_step">Next</button></div>
|
<div class="col-sm-4"><button class="button button--small" v-on:click="next_step">Next</button></div>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div v-if="journey_step==-1">
|
<div v-if="journey_step==-1">
|
||||||
<div v-for="(item,idx) in journey_data.main" :class="idx%2===0 ? 'bg-dark text-white' : ''" v-cloak>
|
<div v-for="(item,idx) in journey_data.main" :class="idx%2===0 ? 'bg-dark text-white' : ''" v-cloak>
|
||||||
<div class="container section">
|
<div class="container section">
|
||||||
<div class="row text-center">
|
<div class="row text-center">
|
||||||
<div class="col-sm-1"><button class="button button--secondary button--mobileFull" v-on:click="rm_section(idx)">X</button></div>
|
<div class="col-sm-1"><button class="button button--secondary button--mobileFull" v-on:click="rm_section(idx)">X</button></div>
|
||||||
<div class="input col-sm-4"><input class="" v-model="item.title" type="text" /></div>
|
<div class="input col-sm-4"><input class="" v-model="item.title" type="text" /></div>
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 col-sm-8">
|
|
||||||
<l-map
|
|
||||||
:zoom.sync="item.map.zoom"
|
|
||||||
:center.sync="item.map.center"
|
|
||||||
style="padding-top: 100%;"
|
|
||||||
|
|
||||||
>
|
|
||||||
<l-tile-layer
|
|
||||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
||||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
|
||||||
></l-tile-layer>
|
|
||||||
<l-control-scale position="topright" :imperial="false" :metric="true"></l-control-scale>
|
|
||||||
|
|
||||||
<l-marker v-if="item.hotel && item.hotel.icon" :lat-lng.sync="item.hotel.latlon">
|
|
||||||
<l-icon>
|
|
||||||
<div v-html="generate_icon(item.hotel,'darkblue')"></div>
|
|
||||||
</l-icon>
|
|
||||||
<l-popup>
|
|
||||||
<h1 class="row text-medium text-center">{{item.hotel.sname}}</h1>
|
|
||||||
<span class="row text-small text-gray">{{item.hotel.display_name}}</span>
|
|
||||||
<div class="row">
|
|
||||||
<textarea-autosize
|
|
||||||
class="col-12 col-sm-10"
|
|
||||||
placeholder="Notes"
|
|
||||||
v-model="item.hotel.notes"
|
|
||||||
:min-height="30"
|
|
||||||
:max-height="350"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</l-popup>
|
|
||||||
|
|
||||||
<!-- <l-tooltip :options="{ permanent: true, interactive: true }">
|
|
||||||
<div>
|
|
||||||
H
|
|
||||||
</div>
|
|
||||||
</l-tooltip> -->
|
|
||||||
</l-marker>
|
|
||||||
<l-marker v-for="place in item.places.restaurants" :lat-lng.sync="place.latlon">
|
|
||||||
<l-icon>
|
|
||||||
<div v-html="generate_icon(place,'cadetblue')"></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>
|
|
||||||
</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)"></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>
|
|
||||||
</l-popup>
|
|
||||||
</l-marker>
|
|
||||||
</l-map>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-sm-4">
|
<div class="row">
|
||||||
<div class="row text-center">
|
<div class="col-12 col-sm-8">
|
||||||
<div><label>Date Range</label></div>
|
<l-map
|
||||||
<div class="input ">
|
:zoom.sync="item.map.zoom"
|
||||||
<date-picker v-model="item.dateRange" range :placeholder="item.dateRange"></date-picker>
|
:center.sync="item.map.center"
|
||||||
|
style="padding-top: 100%;"
|
||||||
|
|
||||||
|
>
|
||||||
|
<l-tile-layer
|
||||||
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||||
|
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
></l-tile-layer>
|
||||||
|
<l-control-scale position="topright" :imperial="false" :metric="true"></l-control-scale>
|
||||||
|
|
||||||
|
<l-marker v-if="item.hotel && item.hotel.icon" :lat-lng.sync="item.hotel.latlon">
|
||||||
|
<l-icon>
|
||||||
|
<div v-html="generate_icon(item.hotel,'darkblue')"></div>
|
||||||
|
</l-icon>
|
||||||
|
<l-popup>
|
||||||
|
<h1 class="row text-medium text-center">{{item.hotel.sname}}</h1>
|
||||||
|
<span class="row text-small text-gray">{{item.hotel.display_name}}</span>
|
||||||
|
<div class="row">
|
||||||
|
<textarea-autosize
|
||||||
|
class="col-12 col-sm-10"
|
||||||
|
placeholder="Notes"
|
||||||
|
v-model="item.hotel.notes"
|
||||||
|
:min-height="30"
|
||||||
|
:max-height="350"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</l-popup>
|
||||||
|
|
||||||
|
<!-- <l-tooltip :options="{ permanent: true, interactive: true }">
|
||||||
|
<div>
|
||||||
|
H
|
||||||
|
</div>
|
||||||
|
</l-tooltip> -->
|
||||||
|
</l-marker>
|
||||||
|
<l-marker v-for="place in item.places.restaurants" :lat-lng.sync="place.latlon">
|
||||||
|
<l-icon>
|
||||||
|
<div v-html="generate_icon(place,'cadetblue')"></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>
|
||||||
|
</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)"></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>
|
||||||
|
</l-popup>
|
||||||
|
</l-marker>
|
||||||
|
</l-map>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-sm-4">
|
||||||
|
<div class="row text-center">
|
||||||
|
<div><label>Date Range</label></div>
|
||||||
|
<div class="input ">
|
||||||
|
<date-picker v-model="item.dateRange" range :placeholder="item.dateRange"></date-picker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row text-center">
|
||||||
|
<div><label>Hotel</label></div>
|
||||||
|
<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" :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="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="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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row text-center">
|
</div>
|
||||||
<div><label>Hotel</label></div>
|
</div>
|
||||||
<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>
|
<div class="">
|
||||||
<div class="row text-center">
|
<div class="container-medium section">
|
||||||
<div><label>Fight</label></div>
|
</div>
|
||||||
|
</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" :options-limit="50" :limit="10" :max-height="600" @search-change="debounceSearch.flight"></multiselect>
|
<div class="bg-dark">
|
||||||
<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 id="go" class="container-medium section text-white">
|
||||||
|
<h2 class="text-big">Add new section</h2>
|
||||||
</div>
|
<p>Got an other flight and/or hotel ? Add a new section to register it</p>
|
||||||
<div class="row text-center">
|
<div class="aligner aligner--contentEnd">
|
||||||
<div><label>Restoration</label></div>
|
<button class="button button--primary button--mobileFull" v-on:click="add_section">Add Section</button>
|
||||||
|
|
||||||
<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="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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<div v-else-if="journey_step>=0 && journey_data.main[journey_step_data.section]">
|
||||||
<div class="container-medium section">
|
<div class="bg-dark text-white" v-cloak>
|
||||||
|
<div class="container section">
|
||||||
|
<div class="row text-center">
|
||||||
|
<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>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-sm-12">
|
||||||
|
<l-map
|
||||||
|
:zoom=" journey_data.main[journey_step_data.section].map.zoom"
|
||||||
|
:center="journey_data.main[journey_step_data.section].map.center"
|
||||||
|
style="padding-top: 100%;"
|
||||||
|
|
||||||
|
>
|
||||||
|
<l-tile-layer
|
||||||
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||||
|
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
></l-tile-layer>
|
||||||
|
<l-control-scale position="topright" :imperial="false" :metric="true"></l-control-scale>
|
||||||
|
|
||||||
|
<l-marker v-if="journey_data.main[journey_step_data.section].hotel &&
|
||||||
|
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,'darkblue')"></div>
|
||||||
|
</l-icon>
|
||||||
|
<l-popup>
|
||||||
|
<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>
|
||||||
|
</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-marker>
|
||||||
|
</l-map>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-sm-12">
|
||||||
|
<div class="container text-center" v-if="journey_step_data.start || journey_step_data.end">
|
||||||
|
<b>Flights</b>
|
||||||
|
<div v-if="journey_step_data.start">
|
||||||
|
<div v-for="element in journey_data.main[journey_step_data.section].flightA"><a href="#fligh" v-on:click.prevent="window.open('https://www.flightradar24.com/data/flights/'+element.id,'_blank')">{{ element.label }}</a></div>
|
||||||
|
</div>
|
||||||
|
<div v-if="journey_step_data.end">
|
||||||
|
<div v-for="element in journey_data.main[journey_step_data.section].flightB"><a href="#fligh" v-on:click.prevent="window.open('https://www.flightradar24.com/data/flights/'+element.id,'_blank')">{{ element.label }}</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<div class="container-medium section">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-dark">
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-dark">
|
|
||||||
<div id="go" class="container-medium section text-white">
|
<div class="">
|
||||||
<h2 class="text-big">Add new section</h2>
|
<div class="container-medium section">
|
||||||
<p>Got an other flight and/or hotel ? Add a new section to register it</p>
|
<div class="aligner">
|
||||||
<div class="aligner aligner--contentEnd">
|
<div class="input col-sm-4"><input class="" v-model="impexp" type="text" /></div>
|
||||||
<button class="button button--primary button--mobileFull" v-on:click="add_section">Add Section</button>
|
<div class="col-sm-2"><button class="button button--primary button--mobileFull" v-on:click="import_data">Import</button></div>
|
||||||
|
<div class="col-sm-2"><button class="button button--primary button--mobileFull" v-on:click="export_data">Export</button></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="journey_step>=0 && journey_data.main[journey_step_data.section]">
|
<div v-else>
|
||||||
<div class="bg-dark text-white" v-cloak>
|
<div class="bg-dark text-white" v-cloak>
|
||||||
<div class="container section">
|
<div class="container section">
|
||||||
<div class="row text-center">
|
<div class="row text-center">
|
||||||
<div class="input col-sm-4"><input disabled :value="journey_data.main[journey_step_data.section].title + ': Day ' + journey_step_data.day" /></div>
|
<span class="col-10 text-huge text-white" style="margin-bottom:10px"><div class="row">{{journey_data.main[journey_step_data.section].title + ': Day ' + journey_step_data.day}}</div><div class="row text-big text-gray">{{journey_data.step_title[journey_step]}}</div></span>
|
||||||
<div class="input col-sm-2"><input placeholder="Day title" v-model="journey_data.step_title[journey_step]" /></div>
|
<div class="col-2 text-white text-huge">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6"><a href="#prev" v-on:click.prevent="prev_step"><</a></div>
|
||||||
|
<div class="col-6"><a href="#next" v-on:click.prevent="next_step">></a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 col-sm-12">
|
<div class="col-12 col-sm-12">
|
||||||
@ -213,85 +368,29 @@
|
|||||||
<l-popup>
|
<l-popup>
|
||||||
<h1 class="row text-medium text-center">{{journey_data.main[journey_step_data.section].hotel.sname}}</h1>
|
<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>
|
<span class="row text-small text-gray">{{journey_data.main[journey_step_data.section].hotel.display_name}}</span>
|
||||||
<div class="row">
|
<span class="row text-small text-white">{{journey_data.main[journey_step_data.section].hotel.notes}}</span>
|
||||||
<textarea-autosize
|
</l-popup>
|
||||||
class="col-12 col-sm-10"
|
</l-marker>
|
||||||
placeholder="Notes"
|
<l-marker v-for="place in journey_data.main[journey_step_data.section].places.activities" :lat-lng="place.latlon" v-if="place.step==journey_step" >
|
||||||
v-model="journey_data.main[journey_step_data.section].hotel.notes"
|
<l-icon>
|
||||||
:min-height="30"
|
<div v-html="generate_icon(place)"></div>
|
||||||
:max-height="350"
|
</l-icon>
|
||||||
/>
|
<l-popup>
|
||||||
</div>
|
<h1 class="row text-medium text-center">{{place.sname}}</h1>
|
||||||
|
<span class="row text-small text-gray">{{place.display_name}}</span>
|
||||||
|
<span class="row text-small text-white">{{place.notes}}</span>
|
||||||
|
</l-popup>
|
||||||
|
</l-marker>
|
||||||
|
<l-marker v-for="place in journey_data.main[journey_step_data.section].places.restaurants" :lat-lng.sync="place.latlon">
|
||||||
|
<l-icon>
|
||||||
|
<div v-html="generate_icon(place,'cadetblue')"></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>
|
||||||
|
<span class="row text-small text-white">{{place.notes}}</span>
|
||||||
</l-popup>
|
</l-popup>
|
||||||
</l-marker>
|
</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>
|
</l-map>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -300,10 +399,10 @@
|
|||||||
<div class="container text-center" v-if="journey_step_data.start || journey_step_data.end">
|
<div class="container text-center" v-if="journey_step_data.start || journey_step_data.end">
|
||||||
<b>Flights</b>
|
<b>Flights</b>
|
||||||
<div v-if="journey_step_data.start">
|
<div v-if="journey_step_data.start">
|
||||||
<div v-for="element in journey_data.main[journey_step_data.section].flightA"><a :href="'https://www.flightradar24.com/data/flights/'+element.id">{{ element.label }}</a></div>
|
<div v-for="element in journey_data.main[journey_step_data.section].flightA"><a href="#fligh" v-on:click.prevent="window.open('https://www.flightradar24.com/data/flights/'+element.id,'_blank')">{{ element.label }}</a></div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="journey_step_data.end">
|
<div v-if="journey_step_data.end">
|
||||||
<div v-for="element in journey_data.main[journey_step_data.section].flightB"><a :href="'https://www.flightradar24.com/data/flights/'+element.id">{{ element.label }}</a></div>
|
<div v-for="element in journey_data.main[journey_step_data.section].flightB"><a href="#fligh" v-on:click.prevent="window.open('https://www.flightradar24.com/data/flights/'+element.id,'_blank')">{{ element.label }}</a></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container"></div>
|
<div class="container"></div>
|
||||||
@ -311,24 +410,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
|
||||||
<div class="container-medium section">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-dark">
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="">
|
|
||||||
<div class="container-medium section">
|
|
||||||
<div class="aligner">
|
|
||||||
<div class="input col-sm-4"><input class="" v-model="impexp" type="text" /></div>
|
|
||||||
<div class="col-sm-2"><button class="button button--primary button--mobileFull" v-on:click="import_data">Import</button></div>
|
|
||||||
<div class="col-sm-2"><button class="button button--primary button--mobileFull" v-on:click="export_data">Export</button></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
@ -340,8 +421,6 @@
|
|||||||
<img src="/public/img/helcel.png" alt="helcel logo" width="100"><br><br>
|
<img src="/public/img/helcel.png" alt="helcel logo" width="100"><br><br>
|
||||||
Built with ❤ by Helcel <br><span class="text-small text-gray">v0.0.1</span>
|
Built with ❤ by Helcel <br><span class="text-small text-gray">v0.0.1</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p class="text-gray"><a href="https://git.helcel.net">Helcel Git</a></p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@ -16,9 +16,7 @@ fastify.register(require('fastify-leveldb'), {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
fastify.get('/', (req, reply) => {
|
fastify.get('/', (req, reply) => reply.sendFile('/template/home.html'));
|
||||||
reply.sendFile('/template/home.html');
|
|
||||||
});
|
|
||||||
fastify.register(require('./router/api'), { prefix: '/api' });
|
fastify.register(require('./router/api'), { prefix: '/api' });
|
||||||
|
|
||||||
fastify.get('/:id', (req, reply) => {
|
fastify.get('/:id', (req, reply) => {
|
||||||
@ -43,6 +41,7 @@ fastify.get('/:id', (req, reply) => {
|
|||||||
reply.sendFile('/template/journey.html');
|
reply.sendFile('/template/journey.html');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
fastify.get('/view/:id', (req, reply) => reply.sendFile('/template/journey.html'));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user