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

short & features
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
choelzl 2021-08-03 13:18:25 +02:00
parent 28c0d2ec30
commit 31fdc92e5c
Signed by: sora
GPG Key ID: A362EA0491E2EEA0
3 changed files with 127 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
public/js/main.js
View File

@ -78,14 +78,14 @@ const app = new Vue({
el: '#app', el: '#app',
data: { data: {
journey_id : window.location.pathname.split('/').pop() || gen_id(16), journey_id : window.location.pathname.split('/').pop() || gen_id(16),
journey_step: window.location.hash.slice(1)==""?((window.location.pathname.split('/')[1]=='view')?0:-1):parseInt(window.location.hash.slice(1)), journey_step: window.location.hash.slice(1)==""?((['view','short'].indexOf(window.location.pathname.split('/')[1])!=-1)?0:-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 : {
name: "New Journey", name: "New Journey",
main:[], main:[],
step_title:[], step_title:[],
}, },
view: window.location.pathname.split('/')[1]=='view', vtp: ['view','short'].indexOf(window.location.pathname.split('/')[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:"",
@ -113,6 +113,40 @@ const app = new Vue({
window.location.hash = '#' + this.journey_step; window.location.hash = '#' + this.journey_step;
}, },
nextnext_step: function(){
let nd = this.journey_step_data;
let ns = this.journey_step;
while((nd.section==this.journey_step_data.section || nd.day>1)
&& ns>=0){
ns+=1;
nd = this.step_convert(ns)
if(nd.section==-1){
ns-=1;
nd = this.step_convert(ns)
break;
}
}
this.journey_step = ns;
this.journey_step_data = nd;
window.location.hash = '#' + this.journey_step;
},
prevprev_step: function(){
let nd = this.journey_step_data;
let ns = this.journey_step;
while((nd.section==this.journey_step_data.section || nd.day>1)
&& ns>=0){
ns-=1;
nd = this.step_convert(ns)
if(ns==-1){
ns+=1;
nd = this.step_convert(ns)
break;
}
}
this.journey_step = ns;
this.journey_step_data = nd;
window.location.hash = '#' + this.journey_step;
},
first_step: function(){ first_step: function(){
this.journey_step=-1; this.journey_step=-1;
this.journey_step_data = {day:-1, section:-1}; this.journey_step_data = {day:-1, section:-1};
@ -137,6 +171,22 @@ const app = new Vue({
} }
return {day:-1, section:-1}; return {day:-1, section:-1};
}, },
active_date: function(){
if(this.journey_step_data.day < 0) return "?";
if(!this.journey_data.main[this.journey_step_data.section].dateRange) return "?";
var date = new Date(this.journey_data.main[this.journey_step_data.section].dateRange[0]);
date.setDate(date.getDate() + this.journey_step_data.day-1);
return this.format_date(date)
},
format_date: function(d){
var dt = d.toJSON().slice(0, 10);
return dt.slice(8, 10) + '/'
+ dt.slice(5, 7) + '/'
+ dt.slice(0, 4) + ' ('
+ ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][d.getDay()]
+')';
},
rm_section: function(idx){ rm_section: function(idx){
this.journey_data.main.splice(idx,1); this.journey_data.main.splice(idx,1);
}, },

80
public/template/journey.html
View File

@ -18,7 +18,7 @@
</head> </head>
<body> <body>
<main id="app"> <main id="app">
<div v-if="!view"> <div v-if="vtp==-1" v-cloak>
<header class="header"> <header class="header">
<div class="header-inner container"> <div class="header-inner container">
<a href="/" class="header-logo text-dark"> <a href="/" class="header-logo text-dark">
@ -30,8 +30,10 @@
<div class="row header-nav text-big" style="margin-bottom: 0;"> <div class="row header-nav text-big" style="margin-bottom: 0;">
<div class="col-sm-3"><a :href="'/view/'+journey_id +'#0'" ><i class="fas fa-camera"></i></a></div> <div class="col-sm-3"><a :href="'/view/'+journey_id +'#0'" ><i class="fas fa-camera"></i></a></div>
<div class="col-sm-3"><a href="#main" v-on:click.prevent="first_step"><i class="fas fa-tools"></i></a></div> <div class="col-sm-3"><a href="#main" v-on:click.prevent="first_step"><i class="fas fa-tools"></i></a></div>
<div class="col-sm-3"><a href="#prev" v-on:click.prevent="prev_step"><i class="fas fa-chevron-left"></i></a></div> <div class="col-sm-1 text-small"><a href="#prevprev" v-on:click.prevent="prevprev_step"><i class="fas fa-angle-double-left"></i></a></div>
<div class="col-sm-3"><a href="#next" v-on:click.prevent="next_step"><i class="fas fa-chevron-right"></i></a></div> <div class="col-sm-1"><a href="#prev" v-on:click.prevent="prev_step"><i class="fas fa-angle-left"></i></a></div>
<div class="col-sm-1"><a href="#next" v-on:click.prevent="next_step"><i class="fas fa-angle-right"></i></a></div>
<div class="col-sm-1 text-small"><a href="#nextnext" v-on:click.prevent="nextnext_step"><i class="fas fa-angle-double-right"></i></a></div>
</div> </div>
</div> </div>
</header> </header>
@ -170,11 +172,14 @@
</div> </div>
</div> </div>
<div v-else-if="journey_step>=0 && journey_data.main[journey_step_data.section] != undefined"> <div v-else-if="journey_step>=0 && journey_data.main[journey_step_data.section] != undefined">
<div class="bg-dark text-white" v-cloak> <div class="bg-dark text-white">
<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> <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 class="input col-sm-2"><input placeholder="Day title" v-model="journey_data.step_title[journey_step]" /></div>
<div class="col-sm-3"></div>
<div class="right input col-sm-2 "><input disabled :value="active_date()" /></div>
</div> </div>
<div class="row"> <div class="row">
@ -318,19 +323,19 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="journey_data.main[journey_step_data.section] != undefined"> <div v-if="vtp==0 && journey_data.main[journey_step_data.section] != undefined" v-cloak>
<div class="bg-dark text-white" v-cloak> <div class="bg-dark text-white" v-cloak>
<div class="text-small fright" style="margin:6px 12px;"><a :href="'/'+journey_id" ><i class="fas fa-tools"></i></a></div> <div class="text-small fright" style="margin:6px 12px;"><a :href="'/'+journey_id" ><i class="fas fa-tools"></i></a></div>
<div class="container section"> <div class="container section">
<div class="aligner text-center text-white text-huge" style="margin-bottom:5px"> <div class="aligner text-center text-white text-huge" style="margin-bottom:5px">
<div class="aligner--itemTop fleft"><a href="#prev" v-on:click.prevent="prev_step"><i class="fas fa-chevron-left"></i></a></div> <div class="aligner--itemTop fleft"><a href="#prev" v-on:click.prevent="prev_step"><i class="fas fa-angle-left"></i></a></div>
<span class="container"> <span class="container">
<div>{{journey_data.main[journey_step_data.section].title + ': Day ' + journey_step_data.day}}</div> <div>{{journey_data.main[journey_step_data.section].title + ': Day ' + journey_step_data.day}}</div>
<div class="text-big text-gray">{{journey_data.step_title[journey_step]}}</div> <div class="text-big text-gray">{{journey_data.step_title[journey_step]}}</div>
</span> </span>
<div class="aligner--itemEnd fright"><a href="#next" v-on:click.prevent="next_step"><i class="fas fa-chevron-right"></i></a></div> <div class="aligner--itemEnd fright"><a href="#next" v-on:click.prevent="next_step"><i class="fas fa-angle-right"></i></a></div>
</div> </div>
@ -409,7 +414,68 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div v-if="vtp==1" v-cloak>
<header class="header">
<div class="header-inner container">
<a href="/" class="header-logo text-dark">
<img class="header-logoImage" src="/public/img/helcel.png" alt="Helcel logo" width="40">
<span class="hide-small">HOTM</span>
</a>
<div class="input input-invis"><input class="small" v-model="journey_data.name" type="text" /></div>
<div class="row header-nav text-big" style="margin-bottom: 0;">
<div class="col-sm-3"><a :href="'/view/'+journey_id +'#0'" ><i class="fas fa-camera"></i></a></div>
<div class="col-sm-3"><a href="#main" v-on:click.prevent="first_step"><i class="fas fa-tools"></i></a></div>
<div class="col-sm-1 text-small"><a href="#prevprev" v-on:click.prevent="prevprev_step"><i class="fas fa-angle-double-left"></i></a></div>
<div class="col-sm-1"><a href="#prev" v-on:click.prevent="prev_step"><i class="fas fa-angle-left"></i></a></div>
<div class="col-sm-1"><a href="#next" v-on:click.prevent="next_step"><i class="fas fa-angle-right"></i></a></div>
<div class="col-sm-1 text-small"><a href="#nextnext" v-on:click.prevent="nextnext_step"><i class="fas fa-angle-double-right"></i></a></div>
</div>
</div>
</header>
<div v-for="(item,idx) in journey_data.main" :class="idx%2===0 ? 'bg-dark text-white' : ''">
<!-- <div class="bg-dark"> -->
<div class="container section">
<div class="row text-center">
<div class="input col-sm-2"><input class="" disabled :value="item.title"/></div>
<div class="input col-sm-4"><input disabled placeholder="No Dates" :value="format_date(item.dateRange[0]) + ' - '+ format_date(item.dateRange[1])"/></div>
<div class="input col-sm-2"><input disabled placeholder="No Hotel" :value="item.hotel.sname"/></div>
</div>
<div class="row text-center">
<div class="input col-sm-3" v-if="item.flightA"><input disabled :value="item.flightA.map(v=>v.id).join(', ')"/></div>
<div class="input col-sm-3" v-if="item.flightB"><input disabled :value="item.flightB.map(v=>v.id).join(', ')"/></div>
</div>
<div class="row text-center">
<div class="input col-sm-8" v-if="item.places && item.places.restaurants">
<textarea-autosize
class="col-8 col-sm-8 text-small"
placeholder="No Restaurants"
:value="item.places.restaurants.map(v=>v.sname).join(', ')"
:min-height="30"
:max-height="350"
disabled
/></div>
</div>
<div class="row text-center">
<div class="input col-sm-8" v-if="item.places && item.places.activities">
<textarea-autosize
class="col-8 col-sm-8 text-small"
placeholder="No Activities"
:value="item.places.activities.map(v=>v.sname).join(', ')"
:min-height="30"
:max-height="350"
disabled
/></div>
</div>
</div>
<!-- </div>
<div class="bg-white">
<div class="container section">
</div>
</div> -->
</div>
</div>
</main> </main>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

1
server.js
View File

@ -42,6 +42,7 @@ fastify.get('/:id', (req, reply) => {
} }
}); });
fastify.get('/view/:id', (req, reply) => reply.sendFile('/template/journey.html')); fastify.get('/view/:id', (req, reply) => reply.sendFile('/template/journey.html'));
fastify.get('/short/:id', (req, reply) => reply.sendFile('/template/journey.html'));