This commit is contained in:
soraefir
@ -4,11 +4,7 @@ include module/head.pug
|
||||
|
||||
main#app
|
||||
include module/nav.pug
|
||||
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='')
|
||||
include module/journey_sec.pug
|
||||
include module/journey_sec_add.pug
|
||||
div(v-else)
|
||||
include module/journey_step.pug
|
||||
include module/journey_sec.pug
|
||||
include module/journey_step.pug
|
||||
include module/importexport.pug
|
||||
include module/foot.pug
|
||||
@ -7,6 +7,10 @@ script(src='https://unpkg.com/axios/dist/axios.min.js')
|
||||
script(src='https://unpkg.com/lodash')
|
||||
script(src='https://unpkg.com/vue-multiselect')
|
||||
script(src='https://unpkg.com/vue-textarea-autosize/dist/vue-textarea-autosize.umd.min.js')
|
||||
|
||||
script(src='https://unpkg.com/sortablejs/Sortable.min.js')
|
||||
script(src='https://unpkg.com/vuedraggable/dist/vuedraggable.umd.min.js')
|
||||
|
||||
script(src='/public/js/main.js' type='text/javascript' charset='utf-8')
|
||||
footer.bg-dark
|
||||
.container
|
||||
|
||||
@ -1,71 +1,9 @@
|
||||
.container.section
|
||||
.row.text-center
|
||||
.col-auto
|
||||
button.button.button--secondary.button--mobileFull(v-on:click='rm_section(idx)') X
|
||||
.col-auto
|
||||
button.button.button--secondary.button--mobileFull(v-on:click='toggle_section_vis(idx)') -
|
||||
.input.col-sm-4
|
||||
input(v-model='item.title' type='text')
|
||||
.row(v-if='visible_step & (0x1 << idx)')
|
||||
.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-control-scale(position='topright' :imperial='false' :metric='true')
|
||||
l-marker(v-if='item.hotel' :lat-lng.sync='item.hotel.latlon')
|
||||
l-icon
|
||||
div(v-html="generate_icon(item.hotel,'darkblue')")
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{item.hotel.sname}}
|
||||
span.row.text-small.text-gray {{item.hotel.display_name}}
|
||||
.row.input
|
||||
textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='item.hotel.notes' :min-height='30' :max-height='350')
|
||||
//
|
||||
<l-tooltip :options="{ permanent: true, interactive: true }">
|
||||
<div>
|
||||
H
|
||||
</div>
|
||||
</l-tooltip>
|
||||
l-marker(v-for='place in item.places.restaurants' :lat-lng.sync='place.latlon')
|
||||
l-icon
|
||||
div(v-html="generate_icon(place,'cadetblue')")
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{place.sname}}
|
||||
span.row.text-small.text-gray {{place.display_name}}
|
||||
.row.input
|
||||
textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
|
||||
l-marker(v-for='place in item.places.activities' :lat-lng.sync='place.latlon')
|
||||
l-icon
|
||||
div(v-html='generate_icon(place)')
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{place.sname}}
|
||||
span.row.text-small.text-gray {{place.display_name}}
|
||||
.row.input
|
||||
textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
|
||||
.col-12.col-sm-4
|
||||
.row.text-center
|
||||
div
|
||||
label Date Range
|
||||
.input.text-dark
|
||||
date-picker(:lang='lang' v-model='item.dateRange' range='' placeholder='Date Range')
|
||||
.row.text-center
|
||||
div
|
||||
label Hotel
|
||||
multiselect#ajax(v-model='item.hotel' 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')
|
||||
.row.text-center
|
||||
div
|
||||
label Fight
|
||||
multiselect#ajax(v-model='item.flightA' 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#ajax(v-model='item.flightB' 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')
|
||||
.row.text-center
|
||||
div
|
||||
label Restoration
|
||||
multiselect#ajax(v-model='item.places.restaurants' 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')
|
||||
.row.text-center
|
||||
div
|
||||
label Activities
|
||||
multiselect#ajax(v-model='item.places.activities' 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')
|
||||
.row.text-center
|
||||
div
|
||||
label Notes
|
||||
.input.text-dark(style='width:100%;')
|
||||
textarea-autosize.text-small(v-model='item.notes' placeholder='Notes' :min-height='30' :max-height='350')
|
||||
draggable(tag='ul' :list='journey_data.main' class='col-1 list-group p-abs' handle='.handle')
|
||||
div.list-group-item.handle(v-for='(element, idx) in journey_data.main' :key='idx' @click='sel_section(idx)' :style='journey_step_data.section==idx?"left:10px":""')
|
||||
span.text {{element.title}}
|
||||
//- input.col-12.input(disabled='' :value='element.title' style='display:block;margin:0;')
|
||||
i.fa.fa-times.close.fright(style='top:2px;right:2px;position:absolute;' @click='rm_section(idx)')
|
||||
|
||||
div.list-group-item()
|
||||
span.text Add Section
|
||||
i.fa.fa-plus.add(@click='add_section()')
|
||||
@ -1,4 +0,0 @@
|
||||
.bg-dark
|
||||
.container-medium.section
|
||||
#go.container-medium.section.text-white
|
||||
button.button.button--primary.button--mobileFull(v-on:click='add_section') Add Section
|
||||
@ -1,72 +1,40 @@
|
||||
.bg-dark.text-white
|
||||
.container.section
|
||||
.row.text-center
|
||||
.input.col-sm-4
|
||||
input(disabled='' :value="journey_data.main[journey_step_data.section].title + ': Day ' + journey_step_data.day")
|
||||
.input.col-sm-2
|
||||
input(placeholder='Day title' v-model='journey_data.step_title[journey_step]')
|
||||
.col-sm-3
|
||||
.right.input.col-sm-2
|
||||
input(disabled='' :value='active_date()')
|
||||
.row
|
||||
.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-control-scale(position='topright' :imperial='false' :metric='true')
|
||||
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')")
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{journey_data.main[journey_step_data.section].hotel.sname}}
|
||||
span.row.text-small.text-gray {{journey_data.main[journey_step_data.section].hotel.display_name}}
|
||||
.row.input
|
||||
textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='journey_data.main[journey_step_data.section].hotel.notes' :min-height='30' :max-height='350')
|
||||
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)')
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{place.sname}}
|
||||
span.row.text-small.text-gray {{place.display_name}}
|
||||
.row.input
|
||||
textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
|
||||
a.leaflet-popup-close-button.text-gray(style='bottom:9px;top:auto; ' href='#rm' v-on:click.prevent='place.step=-1') -
|
||||
div(v-else-if='place.step >= 0')
|
||||
l-icon
|
||||
div(v-html="generate_icon(place,'orange')")
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{place.sname}}
|
||||
span.row.text-small.text-gray {{place.display_name}}
|
||||
.row.input
|
||||
textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
|
||||
a.leaflet-popup-close-button.text-gray(style='bottom:9px;top:auto; ' href='#add' v-on:click.prevent='place.step=journey_step') +
|
||||
div(v-else-if='place.step==undefined || place.step == -1')
|
||||
l-icon
|
||||
div(v-html="generate_icon(place,'red')")
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{place.sname}}
|
||||
span.row.text-small.text-gray {{place.display_name}}
|
||||
.row.input
|
||||
textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
|
||||
a.leaflet-popup-close-button.text-gray(style='bottom:9px;top:auto; ' href='#add' v-on:click.prevent='place.step=journey_step') +
|
||||
div(v-else='')
|
||||
l-icon
|
||||
div(v-html='generate_icon()')
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{place.sname}}
|
||||
span.row.text-small.text-gray {{place.display_name}}
|
||||
.row
|
||||
.col-12.col-sm-12
|
||||
.container.text-center(v-if='journey_step_data.start || journey_step_data.end')
|
||||
b Flights
|
||||
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 }}
|
||||
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 }}
|
||||
.container
|
||||
div
|
||||
.container-medium.section
|
||||
.bg-dark
|
||||
- var map_section = 'journey_data.main[idx]'
|
||||
div(v-for='(e, idx) in journey_data.main' :key='idx')
|
||||
.bg-dark.text-white(v-if="journey_step_data.section==idx")
|
||||
.container.section
|
||||
.row.text-center
|
||||
.input.col-sm-2
|
||||
input(v-model=map_section+'.title')
|
||||
.input.col-sm-2
|
||||
input(placeholder='Day title' v-model=map_section+'.step_title[journey_step_data.day]')
|
||||
.col-sm-3
|
||||
.right.input.col-sm-2
|
||||
input(disabled='' :value='active_date() + " (" + journey_step_data.day+")"')
|
||||
.row
|
||||
.col-9.col-ssm-12
|
||||
include map.pug
|
||||
+map(map_section)
|
||||
|
||||
.col-3.col-ssm-12
|
||||
.row.text-center
|
||||
div
|
||||
label Date Range
|
||||
.input.text-dark
|
||||
date-picker(:lang='lang' v-model=map_section+'.dateRange' range='' format='ddd D MMM' placeholder='Date Range')
|
||||
.row.text-center
|
||||
div
|
||||
label Hotel
|
||||
multiselect#ajax(v-model=map_section+'.hotel' 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')
|
||||
.row.text-center
|
||||
div
|
||||
label Restoration
|
||||
multiselect#ajax(v-model=map_section+'.places.restaurants' 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')
|
||||
.row.text-center
|
||||
div
|
||||
label Activities
|
||||
multiselect#ajax(v-model=map_section+'.places.activities' 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')
|
||||
.row.text-center
|
||||
div
|
||||
label Notes
|
||||
.input.text-dark(style='width:100%;')
|
||||
textarea-autosize.text-small(v-model=map_section+'.notes' placeholder='Notes' :min-height='30' :max-height='350')
|
||||
|
||||
42
template/module/map.pug
Normal file
42
template/module/map.pug
Normal file
@ -0,0 +1,42 @@
|
||||
mixin map(section_str)
|
||||
l-map(
|
||||
:zoom.sync=section_str+'.map.zoom'
|
||||
:center.sync=section_str+'.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-control-scale(position='topright' :imperial='false' :metric='true')
|
||||
l-marker(v-if=section_str+'.hotel && '+section_str+'.hotel.icon' :lat-lng=section_str+'.hotel.latlon')
|
||||
l-icon
|
||||
div(v-html='generate_icon('+section_str+'.hotel,"darkblue")')
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{ #{section_str}.hotel.sname}}
|
||||
span.row.text-small.text-gray {{ #{section_str}.hotel.display_name}}
|
||||
span(v-if='journey_edit')
|
||||
.row.input
|
||||
textarea-autosize.col-12.col-sm-12.text-small(placeholder='Notes' v-model=section_str+'.hotel.notes' :min-height='30' :max-height='350')
|
||||
span.row.text-small.text-white(v-else) {{ #{section_str}.hotel.notes}}
|
||||
l-marker(v-for='place in '+section_str+'.places.activities' :lat-lng='place.latlon')
|
||||
l-icon
|
||||
|
||||
div(v-if='place.step==journey_step_data.day' v-html='generate_icon(place)')
|
||||
div(v-else-if='place.step==-1 || place.step==undefined' v-html='generate_icon(place, "gray")')
|
||||
div(v-else-if='journey_edit' v-html='generate_icon(place, "lightgray")')
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{place.sname}}
|
||||
span.row.text-small.text-gray {{place.display_name}}
|
||||
span(v-if='journey_edit')
|
||||
.row.input
|
||||
textarea-autosize.col-12.col-sm-12.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
|
||||
a.leaflet-popup-close-button.text-gray(style='right:0px;visibility:visible;' href='#rm' v-on:click.prevent='place.step=-1') -
|
||||
a.leaflet-popup-close-button.text-gray(style='right:16px;visibility:visible;' href='#ad' v-on:click.prevent='place.step=journey_step_data.day') +
|
||||
span.row.text-small.text-dark(v-else) {{place.notes}}
|
||||
|
||||
l-marker(v-for='place in '+section_str+'.places.restaurants' :lat-lng.sync='place.latlon')
|
||||
l-icon
|
||||
div(v-html="generate_icon(place,'cadetblue')")
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{place.sname}}
|
||||
span.row.text-small.text-gray {{place.display_name}}
|
||||
span(v-if='journey_edit')
|
||||
.row.input
|
||||
textarea-autosize.col-12.col-sm-12.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
|
||||
span.row.text-small.text-dark(v-else) {{place.notes}}
|
||||
@ -1,7 +1,5 @@
|
||||
- var map_section = 'journey_data.main[journey_step_data.section]'
|
||||
.bg-dark.text-white(v-cloak='')
|
||||
.text-small.fright(style='margin:6px 12px;')
|
||||
a(:href="'/'+journey_id")
|
||||
i.fas.fa-tools
|
||||
.container.section
|
||||
.aligner.text-center.text-white.text-huge(style='margin-bottom:5px')
|
||||
.aligner--itemTop.fleft
|
||||
@ -9,45 +7,15 @@
|
||||
i.fas.fa-angle-left
|
||||
span.container
|
||||
div
|
||||
| {{journey_data.main[journey_step_data.section].title + ': Day ' + journey_step_data.day}}
|
||||
.text-big.text-gray {{journey_data.step_title[journey_step]}}
|
||||
| {{ #{map_section}.title + ': Day ' + journey_step_data.day}}
|
||||
.text-big.text-gray {{ #{map_section}.step_title[journey_step_data.day] }}
|
||||
.aligner--itemEnd.fright
|
||||
a(href='#next' v-on:click.prevent='next_step')
|
||||
i.fas.fa-angle-right
|
||||
.row
|
||||
.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-control-scale(position='topright' :imperial='false' :metric='true')
|
||||
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')")
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{journey_data.main[journey_step_data.section].hotel.sname}}
|
||||
span.row.text-small.text-gray {{journey_data.main[journey_step_data.section].hotel.display_name}}
|
||||
span.row.text-small.text-white {{journey_data.main[journey_step_data.section].hotel.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')
|
||||
l-icon
|
||||
div(v-html='generate_icon(place)')
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{place.sname}}
|
||||
span.row.text-small.text-gray {{place.display_name}}
|
||||
span.row.text-small.text-dark {{place.notes}}
|
||||
l-marker(v-for='place in journey_data.main[journey_step_data.section].places.activities' :lat-lng='place.latlon' v-if='place.step==undefined || place.step==-1')
|
||||
l-icon
|
||||
div(v-html="generate_icon(place,'gray')")
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{place.sname}}
|
||||
span.row.text-small.text-gray {{place.display_name}}
|
||||
span.row.text-small.text-dark {{place.notes}}
|
||||
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')")
|
||||
l-popup
|
||||
h1.row.text-medium.text-center {{place.sname}}
|
||||
span.row.text-small.text-gray {{place.display_name}}
|
||||
span.row.text-small.text-dark {{place.notes}}
|
||||
include map.pug
|
||||
+map(map_section)
|
||||
.row
|
||||
.col-12.col-sm-12
|
||||
.container
|
||||
Reference in New Issue
Block a user