franzz/livetrail
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Bye bye spot.js

Browse Source
This commit is contained in:
franzz
2026-04-25 23:55:11 +02:00
parent 7dc2b28c44
commit b339d6d068
13 changed files with 270 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin.vue
+54 -58
View File
@@ -9,38 +9,37 @@ export default {
SpotButton,
AdminInput
},
inject: ['spot', 'lang'],
data() {
return {
elems: {},
feedbacks: []
};
},
mounted() {
this.setEvents();
this.setProjects();
},
inject: ['api', 'lang'],
data() {
return {
elems: {},
feedbacks: [],
saveTimer: null
};
},
beforeUnmount() {
if(this.saveTimer) clearTimeout(this.saveTimer);
},
mounted() {
this.setProjects();
},
methods: {
l(id) {
return this.lang.get(id);
return this.lang.get(id);
},
setEvents() {
this.spot.addPage('admin', {
onFeedback: (sType, sMsg, asContext) => {
delete asContext.a;
delete asContext.t;
sMsg += ' (';
for(const [sKey, sElem] of Object.entries(asContext)) {
sMsg += sKey+'='+sElem+' / ' ;
}
sMsg = sMsg.slice(0, -3)+')';
addFeedback(sType, sMsg, asContext = {}) {
delete asContext.a;
delete asContext.t;
sMsg += ' (';
for(const [sKey, sElem] of Object.entries(asContext)) {
sMsg += sKey+'='+sElem+' / ' ;
}
sMsg = sMsg.slice(0, -3)+')';
this.feedbacks.push({type:sType, msg:sMsg});
}
});
this.feedbacks.push({type:sType, msg:sMsg});
},
async setProjects() {
let aoElemTypes = await this.spot.get2('admin_get');
let aoElemTypes = await this.api.get('admin_get');
for(const [sType, aoElems] of Object.entries(aoElemTypes)) {
this.elems[sType] = {};
@@ -51,17 +50,17 @@ export default {
}
},
createElem(sType) {
this.spot.get2('admin_create', {type: sType})
this.api.get('admin_create', {type: sType})
.then((aoNewElemTypes) => {
for(const [sType, aoNewElems] of Object.entries(aoNewElemTypes)) {
for(const [iKey, oNewElem] of Object.entries(aoNewElems)) {
oNewElem.type = sType;
this.elems[sType][oNewElem.id] = oNewElem;
this.spot.onFeedback('success', this.lang.get('admin_create_success'), {'create':sType});
this.addFeedback('success', this.lang.get('admin_create_success'), {'create':sType});
}
}
})
.catch((sMsg) => {this.spot.onFeedback('error', sMsg, {'create':sType});});
.catch((sMsg) => {this.addFeedback('error', sMsg, {'create':sType});});
},
deleteElem(oElem) {
const asInputs = {
@@ -69,23 +68,20 @@ export default {
id: oElem.id
};
this.spot.get(
'admin_delete',
(asData) => {
delete this.elems[asInputs.type][asInputs.id];
this.spot.onFeedback('success', this.lang.get('admin_delete_success'), asInputs);
},
asInputs,
(sError) => {
this.spot.onFeedback('error', sError, asInputs);
}
);
},
updateElem(oElem, oEvent) {
if(typeof this.spot.tmp('wait') != 'undefined') clearTimeout(this.spot.tmp('wait'));
let sOldVal = this.elems[oElem.type][oElem.id][oEvent.target.name];
let sNewVal = oEvent.target.value;
this.api.get('admin_delete', asInputs)
.then((asData) => {
delete this.elems[asInputs.type][asInputs.id];
this.addFeedback('success', this.lang.get('admin_delete_success'), asInputs);
})
.catch((sError) => {
this.addFeedback('error', sError, asInputs);
});
},
updateElem(oElem, oEvent) {
if(this.saveTimer) clearTimeout(this.saveTimer);
let sOldVal = this.elems[oElem.type][oElem.id][oEvent.target.name];
let sNewVal = oEvent.target.value;
if(sOldVal != sNewVal) {
let asInputs = {
type: oElem.type,
@@ -94,25 +90,25 @@ export default {
value: sNewVal
};
this.spot.get2('admin_set', asInputs)
this.api.get('admin_set', asInputs)
.then((asData) => {
this.elems[oElem.type][oElem.id][oEvent.target.name] = sNewVal;
this.spot.onFeedback('success', this.lang.get('admin_save_success'), asInputs);
this.addFeedback('success', this.lang.get('admin_save_success'), asInputs);
})
.catch((sError) => {
oEvent.target.value = sOldVal;
this.spot.onFeedback('error', sError, asInputs);
this.addFeedback('error', sError, asInputs);
});
}
},
queue(oElem, oEvent) {
if(typeof this.spot.tmp('wait') != 'undefined') clearTimeout(this.spot.tmp('wait'));
this.spot.tmp('wait', setTimeout(() => {this.updateElem(oElem, oEvent);}, 2000));
},
},
queue(oElem, oEvent) {
if(this.saveTimer) clearTimeout(this.saveTimer);
this.saveTimer = setTimeout(() => {this.updateElem(oElem, oEvent);}, 2000);
},
updateProject() {
this.spot.get2('update_project')
.then((asData, sMsg) => {this.spot.onFeedback('success', sMsg, {'update':'project'});})
.catch((sMsg) => {this.spot.onFeedback('error', sMsg, {'update':'project'});});
this.api.get('update_project')
.then((asData, sMsg) => {this.addFeedback('success', sMsg, {'update':'project'});})
.catch((sMsg) => {this.addFeedback('error', sMsg, {'update':'project'});});
}
}
}
@@ -232,4 +228,4 @@ export default {
<p v-for="feedback in feedbacks" :class="feedback.type">{{ feedback.msg }}</p>
</div>
</div>
</template>
</template>
src/components/project.vue
+66 -53
View File
@@ -22,7 +22,7 @@ export default {
},
data() {
return {
server: this.spot.consts.server,
server: this.consts.server,
feed: {loading:false, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0, firstChunk:true},
refreshRate: 60,
lastUpdate: { unix_time: 0, relative_time: '', formatted_time: ''},
@@ -63,9 +63,6 @@ export default {
},
nlAction() {
return this.subscribed?'unsubscribe':'subscribe';
},
mobile() {
return this.spot.isMobile();
}
},
watch: {
@@ -75,6 +72,12 @@ export default {
if(sNewBaseMap && this.map.getLayer(sNewBaseMap)) this.map.setLayoutProperty(sNewBaseMap, 'visibility', 'visible');
}
},
'hash.items.0'(newProjectCodename, oldProjectCodename) {
if(newProjectCodename && newProjectCodename != oldProjectCodename) {
this.hash.items = [newProjectCodename];
this.init();
}
}
},
provide() {
return {
@@ -87,42 +90,28 @@ export default {
project: this
};
},
inject: ['spot', 'lang', 'hash', 'projects', 'user'],
inject: ['api', 'lang', 'hash', 'projects', 'user', 'consts', 'isMobile'],
beforeMount() {
if(this.hash.items.length == 0) this.hash.items[0] = this.spot.vars('default_project_codename');
if(this.hash.items.length == 0) this.hash.items[0] = this.projects.getDefaultCodeName();
},
mounted() {
this.spot.addPage('project', {
onResize: () => {
//this.spot.tmp('map_offset', -1 * (this.feedPanelOpen?getOuterWidth(this.$refs.feed):0) / getOuterWidth(window));
/* TODO
if(typeof this.spot.tmp('elev') != 'undefined' && this.spot.tmp('elev')._showState) {
this.spot.tmp('elev').resize({width:this.getElevWidth()});
}
*/
},
onSamePageMove: (asNewHash, asOldHash) => {
//this.toggleSettingsPanel(false);
//this.quit();
//Check for project change
if(asNewHash.items[0] != asOldHash.items[0]) {
this.hash.items = [asNewHash.items[0]];
this.init();
}
},
onQuitPage: () => {
this.quit();
}
});
window.addEventListener('resize', this.handleResize);
this.init();
},
beforeUnmount() {
window.removeEventListener('resize', this.handleResize);
this.quit();
},
methods: {
handleResize() {
//this.spot.tmp('map_offset', -1 * (this.feedPanelOpen?getOuterWidth(this.$refs.feed):0) / getOuterWidth(window));
/* TODO
if(typeof this.spot.tmp('elev') != 'undefined' && this.spot.tmp('elev')._showState) {
this.spot.tmp('elev').resize({width:this.getElevWidth()});
}
*/
},
async init() {
let bFirstLoad = (typeof this.currProject.codename == 'undefined');
this.initProject();
@@ -142,9 +131,25 @@ export default {
this.setFeedUpdateTimer(-1);
this.map.remove();
},
getNaturalDuration(iHours) {
var iTimeMinutes = 0, iTimeHours = 0, iTimeDays = Math.floor(iHours/8); //8 hours a day
if(iTimeDays > 1) iTimeDays = Math.round(iTimeDays * 2) / 2; //Round down to the closest half day
else {
iTimeDays = 0;
iTimeHours = Math.floor(iHours);
iHours -= iTimeHours;
iTimeMinutes = Math.floor(iHours * 4) * 15; //Round down to the closest 15 minutes
}
return '~ '
+(iTimeDays>0?(iTimeDays+(iTimeDays%2==0?'':'½')+' '+this.lang.get(iTimeDays>1?'unit_days':'unit_day')):'') //Days
+((iTimeHours>0 || iTimeDays==0)?iTimeHours+this.lang.get('unit_hour'):'') //Hours
+((iTimeDays>0 || iTimeMinutes==0)?'':iTimeMinutes); //Minutes
},
initProject() {
this.currProject = this.projects[this.hash.items[0]];
this.modeHisto = (this.currProject.mode == this.spot.consts.modes.histo);
this.modeHisto = (this.currProject.mode == this.consts.modes.histo);
this.feed = {loading:false, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0, firstChunk:true};
this.posts = [];
//this.baseMap = null;
@@ -185,8 +190,8 @@ export default {
},
async initMap() {
//Start async calls
const oMarkersPromise = this.spot.get2('markers', {id_project: this.currProject.id});
const oTrackPromise = this.spot.get2('geojson', {id_project: this.currProject.id});
const oMarkersPromise = this.api.get('markers', {id_project: this.currProject.id});
const oTrackPromise = this.api.get('geojson', {id_project: this.currProject.id});
//Build Map
if(this.map) this.map.remove();
@@ -324,11 +329,11 @@ export default {
});
},
async positionMap(oTrack) {
let bOpenFeedPanel = !this.mobile;
let bOpenFeedPanel = !this.isMobile();
let oBounds = new LngLatBounds();
if( //Blog Mode: Fit to last message
this.currProject.mode == this.spot.consts.modes.blog &&
this.currProject.mode == this.consts.modes.blog &&
this.markers.messages.length > 0 &&
this.hash.items[2] != 'message'
) {
@@ -399,7 +404,11 @@ export default {
medias: [oMedia],
project: this.currProject
});
this.popup.content.provide('spot', this.spot).provide('lang', this.lang).mount($Popup);
this.popup.content
.provide('spot', this.spot)
.provide('lang', this.lang)
.provide('consts', this.consts)
.mount($Popup);
},
openMarkerPopup(oFeature) {
this.closeMarkerPopup();
@@ -434,7 +443,11 @@ export default {
medias: JSON.parse(oFeature.properties.medias || '[]'),
project: this.currProject
});
this.popup.content.provide('spot', this.spot).provide('lang', this.lang).mount($Popup);
this.popup.content
.provide('spot', this.spot)
.provide('lang', this.lang)
.provide('consts', this.consts)
.mount($Popup);
},
closeMarkerPopup() {
if(this.popup.content) {
@@ -450,11 +463,11 @@ export default {
if(!this.feed.outOfData && !this.feed.loading) {
//Get next chunk
this.feed.loading = true;
let aoData = await this.spot.get2('next_feed', {id_project: this.currProject.id, id: this.feed.refIdLast});
let aoData = await this.api.get('next_feed', {id_project: this.currProject.id, id: this.feed.refIdLast});
let iPostCount = Object.keys(aoData.feed).length;
//Update pointers
this.feed.outOfData = (iPostCount < this.spot.consts.chunk_size);
this.feed.outOfData = (iPostCount < this.consts.chunk_size);
if(iPostCount > 0) {
this.feed.refIdLast = aoData.ref_id_last;
if(this.feed.firstChunk) this.feed.refIdFirst = aoData.ref_id_first;
@@ -480,7 +493,7 @@ export default {
if(iSeconds >= 0) this.feedTimer = setTimeout(this.checkNewFeed, iSeconds * 1000);
},
async checkNewFeed() {
let aoData = await this.spot.get2('new_feed', {id_project: this.currProject.id, id: this.feed.refIdFirst});
let aoData = await this.api.get('new_feed', {id_project: this.currProject.id, id: this.feed.refIdFirst});
if(Object.keys(aoData.feed).length > 0) {
//Update pointer
@@ -533,10 +546,10 @@ export default {
var regexEmail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(!regexEmail.test(this.user.email)) this.nlFeedbacks.push({type:'error', 'msg':this.lang.get('nl_invalid_email')});
else {
this.spot.get2(this.nlAction, {'email': this.user.email, 'name': this.user.name}, this.nlLoading)
this.api.get(this.nlAction, {'email': this.user.email, 'name': this.user.name})
.then((asUser, sDesc) => {
this.nlFeedbacks.push('success', sDesc);
this.user = asUser;
Object.assign(this.user, asUser);
})
.catch((sDesc) => {this.nlFeedbacks.push('error', sDesc);});
}
@@ -545,8 +558,8 @@ export default {
let bOldValue = this.feedPanelOpen;
this.feedPanelOpen = (typeof bShow === 'object' || typeof bShow === 'undefined')?(!this.feedPanelOpen):bShow;
if(bOldValue != this.feedPanelOpen && !this.mobile) {
this.spot.onResize();
if(bOldValue != this.feedPanelOpen && !this.isMobile()) {
this.handleResize();
sMapAction = sMapAction || 'panTo';
switch(sMapAction) {
@@ -579,8 +592,8 @@ export default {
let bOldValue = this.settingsPanelOpen;
this.settingsPanelOpen = (typeof bShow === 'object' || typeof bShow === 'undefined')?(!this.settingsPanelOpen):bShow;
if(bOldValue != this.settingsPanelOpen && !this.mobile) {
this.spot.onResize();
if(bOldValue != this.settingsPanelOpen && !this.isMobile()) {
this.handleResize();
sMapAction = sMapAction || 'panTo';
switch(sMapAction) {
@@ -640,7 +653,7 @@ export default {
<div id="settings-panel" class="map-panel">
<div class="settings-header">
<div class="logo"><img width="289" height="72" src="images/logo_black.png" alt="Spotty" /></div>
<div id="last_update" v-if="this.currProject.mode == this.spot.consts.modes.blog && lastUpdate.unix_time > 0">
<div id="last_update" v-if="this.currProject.mode == this.consts.modes.blog && lastUpdate.unix_time > 0">
<p><span><img src="images/spot-logo-only.svg" alt="" /></span><abbr :title="lastUpdate.formatted_time">{{ lang.get('last_update')+' '+lastUpdate.relative_time }}</abbr></p>
</div>
</div>
@@ -680,7 +693,7 @@ export default {
</div>
{{ lang.get(subscribed?'nl_subscribed_desc':'nl_unsubscribed_desc') }}
</div>
<div class="settings-section admin" v-if="spot.checkClearance(spot.consts.clearances.admin)">
<div class="settings-section admin" v-if="user.hasClearance(consts.clearances.admin)">
<h1><SpotIcon :icon="'admin fa-fw'" :text="lang.get('admin')" /></h1>
<a class="button" href="#admin"><SpotIcon :icon="'config'" :text="lang.get('admin_config')" /></a>
<a class="button" href="#upload"><SpotIcon :icon="'upload'" :text="lang.get('admin_upload')" /></a>
@@ -692,16 +705,16 @@ export default {
<SpotIcon :icon="'credits'" :text="lang.get('credits_project')" />
</a> {{ lang.get('credits_license') }}</div>
</div>
<div :class="'map-control map-control-icon settings-control map-control-'+(mobile?'bottom':'top')" @click="toggleSettingsPanel">
<div :class="'map-control map-control-icon settings-control map-control-'+(isMobile()?'bottom':'top')" @click="toggleSettingsPanel">
<SpotIcon :icon="settingsPanelOpen?'prev':'menu'" />
</div>
<div v-if="!mobile" id="legend" class="map-control settings-control map-control-bottom">
<div v-if="!isMobile()" id="legend" class="map-control settings-control map-control-bottom">
<div v-for="(color, hikeType) in hikes.colors" class="track">
<span class="line" :style="'background-color:'+color+'; height:'+hikes.width+'px;'"></span>
<span class="desc">{{ lang.get('track_'+hikeType) }}</span>
</div>
</div>
<div id="title" :class="'map-control settings-control map-control-'+(mobile?'bottom':'top')">
<div id="title" :class="'map-control settings-control map-control-'+(isMobile()?'bottom':'top')">
<span>{{ currProject.name }}</span>
</div>
</div>
@@ -718,7 +731,7 @@ export default {
<ProjectPost :options="{type: 'loading', headerless: true}" />
</div>
</Simplebar>
<div :class="'map-control map-control-icon feed-control map-control-'+(mobile?'bottom':'top')" @click="toggleFeedPanel">
<div :class="'map-control map-control-icon feed-control map-control-'+(isMobile()?'bottom':'top')" @click="toggleFeedPanel">
<SpotIcon :icon="feedPanelOpen?'next':'post'" />
</div>
</div>
src/components/projectPopup.vue
+2 -2
View File
@@ -18,7 +18,7 @@ export default {
medias: Array,
project: Object
},
inject: ['spot', 'lang'],
inject: ['lang', 'consts'],
computed: {
timeIcon() {
return (this.type == 'media')?'image-shot':'time';
@@ -45,7 +45,7 @@ export default {
</p>
<p class="time">
<projectRelTime :icon="timeIcon" :localTime="options.formatted_time_local" :siteTime="options.formatted_time" :offset="options.day_offset" />
<span v-if="project.mode==spot.consts.modes.blog"> ({{ options.relative_time }})</span>
<span v-if="project.mode==consts.modes.blog"> ({{ options.relative_time }})</span>
</p>
<p class="weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':lang.get(options.weather_cond)">
<spotIcon :icon="options.weather_icon" :classes="'fa-fw fa-lg'" :text="options.weather_temp+'°C'" />
src/components/projectPost.vue
+6 -6
View File
@@ -52,10 +52,10 @@
return this.options.displayed_id?(this.lang.get('counter', this.options.displayed_id)):'';
},
anchorLink() {
return '#'+[this.hash.page, this.hash.items[0], this.options.type, this.options.id].join(this.spot.consts.hash_sep);
return '#'+[this.hash.page, this.hash.items[0], this.options.type, this.options.id].join(this.consts.hash_sep);
},
modeHisto() {
return (this.project.currProject.mode == this.spot.consts.modes.histo);
return (this.project.currProject.mode == this.consts.modes.histo);
},
relTime() {
return this.modeHisto?(this.options.formatted_time || '').substr(0, 10):this.options.relative_time;
@@ -69,10 +69,10 @@
}
},
inject: ['spot', 'lang', 'project', 'user', 'map', 'hash'],
inject: ['api', 'lang', 'project', 'user', 'map', 'hash', 'consts', 'isMobile'],
methods: {
copyAnchor() {
copyTextToClipboard(this.spot.consts.server+this.anchorLink);
copyTextToClipboard(this.consts.server+this.anchorLink);
this.anchorTitle = this.lang.get('link_copied');
this.anchorIcon = 'copied';
setTimeout(()=>{ //TODO animation
@@ -82,7 +82,7 @@
},
panMapToMessage() {
this.popupRequested = true;
if(this.spot.isMobile()) this.project.toggleFeedPanel(false, 'panToInstant');
if(this.isMobile()) this.project.toggleFeedPanel(false, 'panToInstant');
this.map.panToBetweenPanels(
this.lngLat,
this.focusZoomLevel,
@@ -100,7 +100,7 @@
send() {
if(this.postMessage != '' && this.user.name != '') {
this.sending = true;
this.spot.get2(
this.api.get(
'add_post',
{
id_project: this.project.currProject.id,
src/components/upload.vue
+22 -17
View File
@@ -10,10 +10,10 @@ import SpotButton from './spotButton.vue';
export default {
name: 'upload',
components: { SpotButton, SpotIcon },
inject: ['spot', 'lang', 'projects', 'consts', 'user'],
inject: ['api', 'lang', 'projects', 'consts', 'user'],
data() {
return {
project: this.projects[this.spot.vars('default_project_codename')],
project: this.projects.getDefaultProject(),
files: [],
logs: [],
progress: 0,
@@ -21,8 +21,6 @@ export default {
};
},
mounted() {
this.spot.addPage('upload', {});
if(!this.project.editable) {
this.logs = [this.lang.get('upload_mode_archived', [this.project.name])];
return;
@@ -87,7 +85,10 @@ export default {
event.target.value = '';
},
addComment(oFile) {
this.spot.get2('add_comment', {id: oFile.id, content: oFile.content})
this.api.get('add_comment', {
id: oFile.id,
content: oFile.content
})
.then((asData) => {this.logs.push(this.lang.get('media_comment_update', asData.filename));})
.catch((sMsgId) => {this.logs.push(this.lang.get(sMsgId));});
},
@@ -97,7 +98,11 @@ export default {
navigator.geolocation.getCurrentPosition(
(position) => {
this.logs.push('Sending position...');
this.spot.get2('add_position', {'latitude':position.coords.latitude, 'longitude':position.coords.longitude, 'timestamp':Math.round(position.timestamp / 1000)})
this.api.get('add_position', {
'latitude': position.coords.latitude,
'longitude': position.coords.longitude,
'timestamp': Math.round(position.timestamp / 1000)
})
.then((asData) => {this.logs.push(this.lang.get('success'));})
.catch((sMsgId) => {this.logs.push(this.lang.get(sMsgId));});
},
@@ -122,20 +127,20 @@ export default {
<div class="section progress" v-if="progress > 0">
<div class="bar" :style="{width:progress+'%'}"></div>
</div>
<div class="section comment" v-for="file in files">
<img class="thumb" :src="file.thumbnail" />
<div class="form">
<input class="content" name="content" type="text" v-model="file.content" />
<input class="id" name="id" type="hidden" :value="file.id" />
<div class="section comment" v-for="file in files">
<img class="thumb" :src="file.thumbnail" />
<div class="form">
<input class="content" name="content" type="text" v-model="file.content" />
<input class="id" name="id" type="hidden" :value="file.id" />
<SpotButton :classes="'save'" :icon="'save'" :text="lang.get('save')" @click="addComment(file)" />
</div>
</div>
</div>
</div>
<h1>{{ lang.get('upload_pos_title') }}</h1>
<div class="section location">
<SpotButton :icon="'message'" :text="lang.get('new_position')" @click="addPosition()" />
</div>
<div class="section logs" v-if="logs.length > 0">
<p class="log" v-for="log in logs">{{ log }}.</p>
</div>
</div>
<div class="section logs" v-if="logs.length > 0">
<p class="log" v-for="log in logs">{{ log }}.</p>
</div>
</div>
</template>