Migrate to pug

This commit is contained in:
soraefir
2023-06-25 12:26:17 +02:00
parent 0693d47939
commit 681975a44b
54 changed files with 688 additions and 22868 deletions

59
template/home.pug Normal file
View File

@ -0,0 +1,59 @@
doctype html
include module/head.pug
main#app
.container
section.mb-big
.text-center
img.main-logo.mb-medium(src='/public/img/helcel.png' alt='Helcel logo')
div
h1.text-huge.text-withSubtitle Open Tourism Map
h2.text-big.text-gray Collaborative Holiday Planner
p#js-header-waypoint.m-none
a.button.button--primary.button--mobileFull(href='#go') Get started
.bg-dark
.container
.row.text-center
.col-12.col-sm-3
.section
img(src='/public/img/lightweight.png' alt='Lightweight' width='118')
br
h2.text-withSubtitle.text-big.text-white
| Lightweight
br
span.text-medium.text-gray
| Powered By
br
| Fastify & Sierra
.col-12.col-sm-4
.section
img(src='/public/img/customizable.png' alt='Customizable' width='118')
br
h2.text-withSubtitle.text-big.text-white
| Customizable
br
span.text-medium.text-gray
| Many Templates
br
| to choose from
.col-12.col-sm-4
.section
h2.text-withSubtitle.text-big.text-white
img(src='/public/img/opensource.png' alt='Open Source' width='118')
br
| FOSS
br
span.text-medium.text-gray :-)
#go.container-medium.section
h2.text-big Your journey
p
| Browse hotels, restaurants and attractions,....
br
| Select and plan the varying elements of your journey
.aligner.aligner--contentEnd
.input
input#journey_id(v-model='journey_id' placeholder='ID' type='text')
button.button.button--primary.button--mobileFull(v-on:click='start_journey') Start the journey
include module/foot.pug

14
template/journey.pug Normal file
View File

@ -0,0 +1,14 @@
doctype html
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/importexport.pug
include module/foot.pug

22
template/module/foot.pug Normal file
View File

@ -0,0 +1,22 @@
script(src='https://unpkg.com/vue@2/dist/vue.min.js')
script(src='https://unpkg.com/vue2-datepicker/index.min.js')
script(src='https://unpkg.com/leaflet/dist/leaflet.js')
script(src='https://unpkg.com/vue2-leaflet')
script(src='https://unpkg.com/leaflet.awesome-markers/dist/leaflet.awesome-markers.min.js')
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='/public/js/main.js' type='text/javascript' charset='utf-8')
footer.bg-dark
.container
.section.text-center.text-small
p.text-white
img(src='/public/img/helcel.png' alt='helcel logo' width='100')
br
br
| Built with   ❤   by Helcel
br
span.text-small.text-gray v0.0.1
p.text-gray
a(href='https://git.helcel.net') Helcel Git

13
template/module/head.pug Normal file
View File

@ -0,0 +1,13 @@
head
title Helcel-OTM
link(rel='shortcut icon' href='/public/img/helcel.ico' type='image/x-icon')
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1')
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')
link(rel='stylesheet' href='https://unpkg.com/vue2-datepicker/index.css')
link(rel='stylesheet' href='https://unpkg.com/vue-multiselect/dist/vue-multiselect.min.css')
link(rel='stylesheet' href='https://unpkg.com/leaflet/dist/leaflet.css')
link(rel='stylesheet' href='https://unpkg.com/leaflet.awesome-markers/dist/leaflet.awesome-markers.css')
link(rel='stylesheet' href='https://unpkg.com/@fortawesome/fontawesome-free/css/all.min.css')

View File

@ -0,0 +1,9 @@
div
.container-medium.section
.aligner
.input.col-sm-4
input(v-model='impexp' type='text')
.col-sm-2
button.button.button--primary.button--mobileFull(v-on:click='import_data') Import
.col-sm-2
button.button.button--primary.button--mobileFull(v-on:click='export_data') Export

View File

@ -0,0 +1,71 @@
.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')

View File

@ -0,0 +1,4 @@
.bg-dark
.container-medium.section
#go.container-medium.section.text-white
button.button.button--primary.button--mobileFull(v-on:click='add_section') Add Section

View File

@ -0,0 +1,72 @@
.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

29
template/module/nav.pug Normal file
View File

@ -0,0 +1,29 @@
header.header
.header-inner.container
a.header-logo.text-dark(href='/')
img.header-logoImage(src='/public/img/helcel.png' alt='Helcel logo' width='40')
span.hide-small HOTM
.input.input-invis
input.small(v-model='journey_data.name' type='text')
.row.header-nav.text-big(style='margin-bottom: 0;')
.col-sm-2
a(:href="'/short/'+journey_id")
i.fas.fa-file-contract
.col-sm-2
a(:href="'/view/'+journey_id +'#0'")
i.fas.fa-camera
.col-sm-2
a(href='#main' v-on:click.prevent='first_step')
i.fas.fa-tools
.col-sm-1.text-small
a(href='#prevprev' v-on:click.prevent='prevprev_step')
i.fas.fa-angle-double-left
.col-sm-1
a(href='#prev' v-on:click.prevent='prev_step')
i.fas.fa-angle-left
.col-sm-1
a(href='#next' v-on:click.prevent='next_step')
i.fas.fa-angle-right
.col-sm-1.text-small
a(href='#nextnext' v-on:click.prevent='nextnext_step')
i.fas.fa-angle-double-right

View File

@ -0,0 +1,14 @@
header.header
.header-inner.container
a.header-logo.text-dark(href='/')
img.header-logoImage(src='/public/img/helcel.png' alt='Helcel logo' width='40')
span.hide-small HOTM
.input.input-invis
input.small(:value='journey_data.name' type='text' disabled='')
.row.header-nav.text-big(style='margin-bottom: 0;')
.col-sm-3
a(:href="'/short/'+journey_id")
i.fas.fa-file-contract
.col-sm-3
a(:href="'/view/'+journey_id +'#0'")
i.fas.fa-camera

View File

@ -0,0 +1,21 @@
.container.section
.row.text-center
.input.col-sm-2
input(disabled='' :value='item.title')
.input.col-sm-4
input(disabled='' placeholder='No Dates' :value="item.dateRange? (format_date(item.dateRange[0]) + ' - '+ format_date(item.dateRange[1])):''")
.input.col-sm-2
input(disabled='' placeholder='No Hotel' :value='item.hotel.sname')
.row.text-center
.input.col-sm-3(v-if='item.transit')
div(v-for='(item,idx) in item.transit')
input(disabled='' :value="item.map(v=>v.id).join(', ')")
.row.text-center
.input.col-sm-8(v-if='item.places && item.places.restaurants')
textarea-autosize.text-small(placeholder='No Restaurants' :value="item.places.restaurants.map(v=>v.sname+(v.notes?('('+v.notes+')'):'')).join(', ')" :min-height='30' :max-height='350' disabled='')
.row.text-center
.input.col-sm-8(v-if='item.places && item.places.activities')
textarea-autosize.text-small(placeholder='No Activities' :value="item.places.activities.map(v=>v.sname+(v.notes?('('+v.notes+')'):'')).join(', ')" :min-height='30' :max-height='350' disabled='')
.row.text-center
.input.col-sm-8(v-if='item.notes')
textarea-autosize.text-small(placeholder='No Notes' :value='item.notes' :min-height='30' :max-height='350' disabled='')

View File

@ -0,0 +1,53 @@
.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
a(href='#prev' v-on:click.prevent='prev_step')
i.fas.fa-angle-left
span.container
div
| {{journey_data.main[journey_step_data.section].title + &apos;: Day &apos; + journey_step_data.day}}
.text-big.text-gray {{journey_data.step_title[journey_step]}}
.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}}
.row
.col-12.col-sm-12
.container

7
template/short.pug Normal file
View File

@ -0,0 +1,7 @@
doctype html
include module/head.pug
main#app
include module/nav_pub.pug
div(v-for='(item,idx) in journey_data.main' :class="idx%2===0 ? 'bg-dark text-white' : ''")
include module/short_sec.pug
include module/foot.pug

6
template/view.pug Normal file
View File

@ -0,0 +1,6 @@
doctype html
include module/head.pug
main#app
div(v-if='journey_data.main[journey_step_data.section] != undefined' v-cloak='')
include module/view_step.pug
include module/foot.pug