init
This commit is contained in:
BIN
public/js/.DS_Store
vendored
Normal file
BIN
public/js/.DS_Store
vendored
Normal file
Binary file not shown.
7
public/js/jquery.min.js
vendored
Normal file
7
public/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
242
public/js/main.js
Normal file
242
public/js/main.js
Normal file
@ -0,0 +1,242 @@
|
||||
const gen_id = (length)=>{
|
||||
var result = '';
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
const len = characters.length;
|
||||
for (let i = 0; i < length; i++ ) {
|
||||
result += characters.charAt(Math.floor(Math.random() * len));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
const query_nominatim = (q,f)=>{
|
||||
const ENDPOINT = 'https://nominatim.openstreetmap.org/';
|
||||
const FORMAT = 'jsonv2';
|
||||
return axios.get(ENDPOINT, {
|
||||
params: {
|
||||
format: FORMAT,
|
||||
q:q,
|
||||
},
|
||||
}).then(res=>res.data).then(res=>res.filter(f));
|
||||
}
|
||||
|
||||
const query_flight = (q)=>{
|
||||
const ENDPOINT = '/api/flight/'+q;
|
||||
const FORMAT = '-';
|
||||
return axios.get(ENDPOINT).then(res=>res.data);
|
||||
}
|
||||
|
||||
const is_restauration_type = (t)=>{
|
||||
const arr = ["restaurant", "cafe", "pub", "bar", "fast_food", "food_court"];
|
||||
return arr.indexOf(t)!=-1;
|
||||
}
|
||||
|
||||
const is_attraction_type = (item)=>{
|
||||
const arr = ["tourism"];
|
||||
return arr.indexOf(item.category)!=-1;
|
||||
}
|
||||
|
||||
const icon_type = (item)=>{
|
||||
let t = item.type
|
||||
const arr = ["restaurant", "cafe", "pub", "bar", "fast_food", "food_court"];
|
||||
if(arr.indexOf(t)!=-1){
|
||||
return 'utensils';
|
||||
}else if(t=='hotel'){
|
||||
return 'bed';
|
||||
}else if(t=='museum'){
|
||||
return 'landmark';
|
||||
}else if(t=='peak'){
|
||||
return 'mountain';
|
||||
}else if(t=='parking'){
|
||||
return 'parking';
|
||||
}else if(t=='water' || t=='river'){
|
||||
return 'water';
|
||||
}else if(t=='community_centre'){
|
||||
return 'building';
|
||||
}else if(t=='attraction'){
|
||||
return 'landmark';
|
||||
}else if(t=='information'){
|
||||
return 'landmark';
|
||||
}else if(t=='bridge'){
|
||||
return 'archway';
|
||||
}else if(t=='a'){
|
||||
return '';
|
||||
}else if(t=='a'){
|
||||
return '';
|
||||
}else{
|
||||
console.log(item.category, item.type);
|
||||
return 'question';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Vue.component('l-map', window.Vue2Leaflet.LMap);
|
||||
Vue.component('l-tile-layer', window.Vue2Leaflet.LTileLayer);
|
||||
Vue.component('l-marker', window.Vue2Leaflet.LMarker);
|
||||
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.component('multiselect', window.VueMultiselect.default)
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
journey_id : window.location.pathname.slice(1) || gen_id(16),
|
||||
journey_step: window.location.hash.slice(1)==""?-1:parseInt(window.location.hash.slice(1)),
|
||||
journey_step_data: {day:-1, section:-1},
|
||||
journey_data : {
|
||||
name: "New Journey",
|
||||
main:[],
|
||||
step_title:[],
|
||||
},
|
||||
query:{hotel:[],flight:[],nominatim:[]},
|
||||
querying:{hotel:false,flight:false,place:false,food:false},
|
||||
impexp:"",
|
||||
activities_tmp:[],
|
||||
},
|
||||
methods: {
|
||||
start_journey: function(event){
|
||||
window.location.href = '/'+this.journey_id;
|
||||
},
|
||||
add_section: function(event){
|
||||
if(this.journey_data.main===undefined) this.journey_data.main=[];
|
||||
this.journey_data.main.push({map:{zoom:2}, hotel:{latlon:[0,0]},places:{restaurants:[],places:[]}});
|
||||
},
|
||||
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)
|
||||
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){
|
||||
let steps_left = step+1;
|
||||
for(let e in this.journey_data.main){
|
||||
if(this.journey_data.main[e].dateRange && (this.journey_data.main[e].dateRange[0]-(new Date(0))) != 0){
|
||||
let cd = (this.journey_data.main[e].dateRange[1]-this.journey_data.main[e].dateRange[0])/(1000*60*60*24);
|
||||
if(cd>=steps_left){
|
||||
return {day: steps_left, section:e,start: (steps_left==1), end: (steps_left==cd)};
|
||||
}else{
|
||||
steps_left -= cd;
|
||||
}
|
||||
}else{
|
||||
steps_left -= 1;
|
||||
}
|
||||
if(steps_left==0){
|
||||
return {day:0,section:e, start:true,end:true};
|
||||
}
|
||||
}
|
||||
return {day:-1, section:-1};
|
||||
},
|
||||
rm_section: function(idx){
|
||||
this.journey_data.main.splice(idx,1);
|
||||
},
|
||||
search_nominatim: function(txt,f){
|
||||
if(txt==""){
|
||||
this.query.nominatim=[];
|
||||
return Promise.resolve([]);
|
||||
}
|
||||
return query_nominatim(txt,f)
|
||||
.then((results) =>{
|
||||
results.forEach(r=>r.latlon=[parseFloat(r.lat),parseFloat(r.lon)])
|
||||
this.query.nominatim=results;
|
||||
});
|
||||
},
|
||||
search_flight: function(txt){
|
||||
if(txt=="") return;
|
||||
this.querying.flight=true;
|
||||
query_flight(txt.replace(" ", ""))
|
||||
.then((results) =>{
|
||||
if(results.results==""){
|
||||
this.query.flight=[];this.querying.flight=false;return;
|
||||
}
|
||||
this.query.flight=results.results;
|
||||
this.querying.flight=false;
|
||||
});
|
||||
|
||||
},
|
||||
generate_icon: function(item){
|
||||
return L.AwesomeMarkers.icon(
|
||||
{icon: icon_type(item) || 'star', prefix: 'fa',markerColor: item.color || 'blue'}
|
||||
).createIcon().outerHTML
|
||||
},
|
||||
|
||||
save_data: function(){
|
||||
this.impexp = window.btoa(JSON.stringify(this.journey_data));
|
||||
axios.post('/api/'+this.journey_id, this.journey_data).then(response => {
|
||||
console.log("Saved...")
|
||||
}).catch(error => {
|
||||
console.warn('Error! Could not reach the API.')
|
||||
})
|
||||
},
|
||||
import_data:function(){
|
||||
this.journey_data = JSON.parse(window.atob(this.impexp));
|
||||
},
|
||||
export_data:function(){
|
||||
this.impexp = window.btoa(JSON.stringify(this.journey_data));
|
||||
},
|
||||
filter_selected:function(list,step){
|
||||
return list.filter(e=>(step?(e.step==this.journey_step):(e.step>=0)))
|
||||
},
|
||||
filter_unselected:function(list){
|
||||
return list.filter(e=>(e.step==undefined || e.step<0))
|
||||
},
|
||||
remove_item:function(list,idx){
|
||||
list[idx].step=-1;
|
||||
list.splice(idx, 1);
|
||||
},
|
||||
log:function(e){console.log(e)},
|
||||
},
|
||||
created: function () {
|
||||
axios.get('/api/'+this.journey_id).then(response =>{
|
||||
app.journey_data = response.data;
|
||||
for(let e of app.journey_data.main){
|
||||
if(e.dateRange && e.dateRange.length===2){
|
||||
e.dateRange[0]= new Date(e.dateRange[0]);
|
||||
e.dateRange[1]= new Date(e.dateRange[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);
|
||||
});
|
||||
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),
|
||||
"restaurants":_.debounce((q)=>{this.querying.food=true;this.search_nominatim(q,(r)=>(is_restauration_type(r.type))).then((r)=>{this.querying.food=false});}, 500),
|
||||
"places":_.debounce((q)=>{this.querying.place=true;this.search_nominatim(q,(r)=>(true)).then((r)=>{this.querying.place=false});}, 500),
|
||||
"other":_.debounce((q)=>{this.querying.any=true;this.search_nominatim(q,(r)=>(true)).then((r)=>{this.querying.any=false});}, 500),
|
||||
"flight":_.debounce((q)=>this.search_flight(q), 500)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
journey_data: {
|
||||
handler:function (ndata, odata){
|
||||
this.debounceSave()
|
||||
if(ndata.main.length == odata.main.length){
|
||||
for(let d in ndata.main){
|
||||
if(ndata.main[d].hotel != odata.main[d].hotel){
|
||||
if(ndata.main[d].hotel.latlon){
|
||||
this.journey_data.main[d].map.center=ndata.main[d].hotel.latlon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
activities_tmp:{
|
||||
handler:function (nd,od){
|
||||
nd.forEach(e=>e.step=this.journey_step);
|
||||
},
|
||||
deep: false,
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user