franzz/spot
1
0
Fork 0
Code Issues Pull Requests 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

2
lib/Project.php
View File

@@ -120,6 +120,7 @@ class Project extends PhpObject {
public function getProjects($iProjectId=0) {
$bSpecificProj = ($iProjectId > 0);
$sDefaultProjectCodeName = $this->getProjectCodeName();
$asInfo = array(
'select'=> array(
Db::getId(self::PROJ_TABLE)." AS id",
@@ -145,6 +146,7 @@ class Project extends PhpObject {
//$asProject['geofilepath'] = Spot::addTimestampToFilePath(GeoJson::getDistFilePath($sCodeName));
$asProject['gpxfilepath'] = Spot::addTimestampToFilePath(Gpx::getDistFilePath($sCodeName));
$asProject['codename'] = $sCodeName;
$asProject['default'] = ($sCodeName == $sDefaultProjectCodeName);
}
return $bSpecificProj?$asProject:$asProjects;
}

10
lib/Spot.php
View File

@@ -173,16 +173,16 @@ class Spot extends Main
return parent::getMainPage(
array(
'vars' => array(
'default_project_codename' => $this->oProject->getProjectCodeName(),
'projects' => $this->oProject->getProjects(),
'user' => $this->oUser->getUserInfo()
),
'user' => $this->oUser->getUserInfo(),
'consts' => array(
'modes' => Project::MODES,
'clearances' => User::CLEARANCES,
'default_timezone' => Settings::TIMEZONE,
'chunk_size' => self::FEED_CHUNK_SIZE
'chunk_size' => self::FEED_CHUNK_SIZE,
'hash_sep' => '-',
'title' => 'Spotty',
'default_page' => 'project'
)
),
self::MAIN_PAGE,

46
src/Spot.vue
View File

@@ -13,59 +13,59 @@ export default {
data() {
return {
hash: {page: '', items: []},
consts: this.spot.consts,
user: this.spot.vars('user'),
routes: aoRoutes
consts: this.appConfig.consts,
mobile: false
};
},
provide() {
return {
hash: this.hash,
projects: this.spot.vars('projects'),
consts: this.consts,
user: this.user
isMobile: () => this.isMobile()
};
},
computed: {
route() {
return this.routes[this.hash.page];
return aoRoutes[this.hash.page];
},
hashSnapshot() {
return JSON.stringify(this.hash);
}
},
inject: ['spot'],
inject: ['appConfig'],
created() {
//User
this.user.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || this.consts.default_timezone;
//Set initial page
let asInitHash = this.getBrowserHash();
if(!asInitHash.page) asInitHash.page = this.spot.consts.default_page;
if(!asInitHash.page) asInitHash.page = this.consts.default_page;
this.setVarHash(asInitHash);
},
mounted() {
//Catch browser hash change
window.addEventListener('hashchange', this.onBrowserHashChange);
window.addEventListener('resize', this.updateMobile);
this.updateMobile();
},
watch: {
hashSnapshot(jNewHash, jOldHash) {
const asNewHash = JSON.parse(jNewHash);
const asOldHash = JSON.parse(jOldHash);
this.spot.vars('page', this.hash.page); //FIXME remove
//Sync variable -> #hash
if(asNewHash != this.getBrowserHash()) {
this.setBrowserHash(asNewHash.page, asNewHash.items);
}
//Same Page change
if(asNewHash != asOldHash && asNewHash.page == asOldHash.page) {
this.spot.onSamePageMove(asNewHash, asOldHash);
}
this.setPageTitle(asNewHash.page);
}
},
methods: {
isMobile() {
return this.mobile;
},
updateMobile() {
this.mobile = getComputedStyle(this.$refs.mobile).display !== 'none';
},
setPageTitle(sTitle) {
document.title = this.consts.title + ' - ' + sTitle.trim();
},
setVarHash(asHash) {
this.hash.page = asHash.page || '';
this.hash.items = Array.isArray(asHash.items) ? [...asHash.items.filter(n => n)] : [];
@@ -73,22 +73,22 @@ export default {
onBrowserHashChange() { //Sync #hash -> variable
let asHash = this.getBrowserHash();
if(asHash != this.hash) this.setVarHash(asHash);
this.spot.vars('page', this.hash.page); //FIXME remove
},
getBrowserHash() {
let sHash = window.location.hash.slice(1);
let asHash = sHash.split(this.spot.consts.hash_sep).filter(n => n);
let asHash = sHash.split(this.consts.hash_sep).filter(n => n);
let sPage = asHash.shift() || '';
return {page: sPage, items: asHash};
},
setBrowserHash(sPage = '', asItems = []) {
if(typeof asItems == 'string' && asItems != '') asItems = [asItems];
const sItems = (asItems.length > 0)?(this.spot.consts.hash_sep + asItems.join(this.spot.consts.hash_sep)):'';
const sItems = (asItems.length > 0)?(this.consts.hash_sep + asItems.join(this.consts.hash_sep)):'';
window.location.hash = '#' + sPage + sItems;
}
},
beforeUnmount() {
window.removeEventListener('hashchange', this.onBrowserHashChange)
window.removeEventListener('hashchange', this.onBrowserHashChange);
window.removeEventListener('resize', this.updateMobile);
}
}
</script>
@@ -96,5 +96,5 @@ export default {
<div id="main">
<component :is="route" />
</div>
<div id="mobile"></div>
<div id="mobile" ref="mobile"></div>
</template>

58
src/components/admin.vue
View File

@@ -9,24 +9,25 @@ export default {
SpotButton,
AdminInput
},
inject: ['spot', 'lang'],
inject: ['api', 'lang'],
data() {
return {
elems: {},
feedbacks: []
feedbacks: [],
saveTimer: null
};
},
beforeUnmount() {
if(this.saveTimer) clearTimeout(this.saveTimer);
},
mounted() {
this.setEvents();
this.setProjects();
},
methods: {
l(id) {
return this.lang.get(id);
},
setEvents() {
this.spot.addPage('admin', {
onFeedback: (sType, sMsg, asContext) => {
addFeedback(sType, sMsg, asContext = {}) {
delete asContext.a;
delete asContext.t;
sMsg += ' (';
@@ -36,11 +37,9 @@ export default {
sMsg = sMsg.slice(0, -3)+')';
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,20 +68,17 @@ export default {
id: oElem.id
};
this.spot.get(
'admin_delete',
(asData) => {
this.api.get('admin_delete', asInputs)
.then((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);
}
);
this.addFeedback('success', this.lang.get('admin_delete_success'), asInputs);
})
.catch((sError) => {
this.addFeedback('error', sError, asInputs);
});
},
updateElem(oElem, oEvent) {
if(typeof this.spot.tmp('wait') != 'undefined') clearTimeout(this.spot.tmp('wait'));
if(this.saveTimer) clearTimeout(this.saveTimer);
let sOldVal = this.elems[oElem.type][oElem.id][oEvent.target.name];
let sNewVal = oEvent.target.value;
@@ -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));
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'});});
}
}
}

115
src/components/project.vue
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,13 +90,20 @@ 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: () => {
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
@@ -102,27 +112,6 @@ export default {
}
*/
},
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();
}
});
this.init();
},
beforeUnmount() {
this.quit();
},
methods: {
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>

4
src/components/projectPopup.vue
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'" />

12
src/components/projectPost.vue
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,

17
src/components/upload.vue
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));});
},

39
src/scripts/api.js Normal file
View File

@@ -0,0 +1,39 @@
export default class Api {
constructor({server, processPage, timezone, errorCode, lang}) {
this.server = server;
this.processPage = processPage;
this.timezone = timezone;
this.errorCode = errorCode;
this.lang = lang;
}
async get(action, params = {}) {
const requestParams = {
...params,
a: action,
t: this.timezone
};
const url = new URL(this.processPage, this.server);
url.search = new URLSearchParams(requestParams).toString();
const request = await fetch(url, {
method: 'GET',
headers: {'Content-Type': 'application/json'}
});
if(!request.ok) {
throw new Error('Error HTTP ' + request.status + ': ' + request.statusText);
}
const response = await request.json();
response.desc = this.lang.parse(response.desc);
if(response.result == this.errorCode) {
throw response.desc;
}
return response.data;
}
}

29
src/scripts/app.js
View File

@@ -1,8 +1,12 @@
//Librairies
import Api from './api.js';
import Lang from './lang.js';
import Spot from './spot.js';
import Projects from './projects.js';
import User from './user.js';
import { createApp } from 'vue';
import SpotVue from '../Spot.vue';
//Main template
import Spot from '../Spot.vue';
//Style
import Css from './../styles/spot.scss';
@@ -11,11 +15,22 @@ import Css from './../styles/spot.scss';
const appConfig = JSON.parse(document.getElementById('app-config').textContent);
//Instances
const oProjects = new Projects(appConfig.projects);
const oUser = new User(appConfig.user, appConfig.consts.default_timezone);
const oLang = new Lang({translations: appConfig.consts.lang, prefix: appConfig.consts.lang_prefix});
const oSpot = new Spot(appConfig, oLang);
const oApi = new Api({
server: appConfig.consts.server,
processPage: appConfig.consts.process_page,
timezone: oUser.timezone,
errorCode: appConfig.consts.error,
lang: oLang
});
//Mount app
const oSpotVue = createApp(SpotVue);
oSpotVue.provide('spot', oSpot);
oSpotVue.provide('lang', oLang);
oSpotVue.mount('#container');
const oSpot = createApp(Spot);
oSpot.provide('appConfig', appConfig);
oSpot.provide('api', oApi);
oSpot.provide('lang', oLang);
oSpot.provide('projects', oProjects);
oSpot.provide('user', oUser);
oSpot.mount('#container');

17
src/scripts/projects.js Normal file
View File

@@ -0,0 +1,17 @@
export default class Projects {
constructor(asProjects = {}) {
Object.assign(this, asProjects);
}
getDefaultCodeName() {
for(const [sCodeName, asProject] of Object.entries(this)) {
if(asProject.default) return sCodeName;
}
}
getDefaultProject() {
const sCodeName = this.getDefaultCodeName();
return this[this.getDefaultCodeName()];
}
}

298
src/scripts/spot.js
View File

@@ -1,298 +0,0 @@
import { copyArray, getElem, setElem } from './common.js';
export default class Spot {
constructor(asGlobals, oLang) {
this.consts = asGlobals.consts;
this.consts.hash_sep = '-';
this.consts.title = 'Spotty';
this.consts.default_page = 'project';
//this.consts.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || this.consts.default_timezone;
this.lang = oLang;
this.pages = {};
//Variables & constants from php
this.vars('tmp', 'object');
this.vars('page', 'string');
Object.entries(asGlobals.vars).forEach(([sKey, oValue]) => {this.vars(sKey, oValue);});
//page elem
this.elem = {};
}
/* Initialization */
/*
init() {
this.elem.container = $('#container');
this.elem.main = $('#main');
//On Key down
$('html').on('keydown', (oEvent) => {this.onKeydown(oEvent);});
//on window resize
$(window).on('resize', () => {this.onResize();});
//Hash management
$(window)
.on('hashchange', () => {this.onHashChange();})
.trigger('hashchange');
}
*/
/* Variable Management */
vars(oVarName, oValue) {
var asVarName = (typeof oVarName == 'object')?oVarName:[oVarName];
//Set, name & type / default value (init)
if(typeof oValue !== 'undefined') setElem(this.vars, copyArray(asVarName), oValue);
//Get, only name parameter
return getElem(this.vars, asVarName);
}
tmp(sVarName, oValue) {
var asVarName = (typeof sVarName == 'object')?sVarName:[sVarName];
asVarName.unshift('tmp');
return this.vars(asVarName, oValue);
}
/* Interface with server */
/*
get(sAction, fOnSuccess, oVars, fOnError, fonProgress) {
oVars = oVars || {};
fOnError = fOnError || function(sError) {console.log(sError);};
fonProgress = fonProgress || function(sState){};
fonProgress('start');
oVars['a'] = sAction;
oVars['t'] = this.consts.timezone;
return $.ajax(
{
url: this.consts.process_page,
data: oVars,
dataType: 'json'
})
.done((oData) => {
fonProgress('done');
if(oData.desc.substr(0, this.consts.lang_prefix.length)==this.consts.lang_prefix) oData.desc = this.lang(oData.desc.substr(5));
if(oData.result==this.consts.error) fOnError(oData.desc);
else if(fOnSuccess) fOnSuccess(oData.data, oData.desc);
})
.fail((jqXHR, textStatus, errorThrown) => {
fonProgress('fail');
fOnError(textStatus+' '+errorThrown);
});
}
*/
async get2(sAction, oVars, bLoading) {
oVars = oVars || {};
oVars['a'] = sAction;
oVars['t'] = this.consts.timezone;
bLoading = true;
try {
let oUrl = new URL(this.consts.process_page, this.consts.server);
oUrl.search = new URLSearchParams(oVars).toString();
const oRequest = await fetch(oUrl, {method: 'GET', /*body: JSON.stringify(oVars),*/ headers: {"Content-Type": "application/json"}});
if(!oRequest.ok) {
bLoading = false;
throw new Error('Error HTTP '+oRequest.status+': '+oRequest.statusText);
}
else {
let oResponse = await oRequest.json();
bLoading = false;
oResponse.desc = this.lang.parse(oResponse.desc);
if(oResponse.result == this.consts.error) return Promise.reject(oResponse.desc);
else return oResponse.data;
}
}
catch(oError) {
bLoading = false;
throw oError;
}
}
isMobile() {
const mobileElem = document.getElementById('mobile');
return !!mobileElem && getComputedStyle(mobileElem).display !== 'none';
}
/* Page Switch - Trigger & Event catching */
/*
onHashChange() {
var asHash = this.getHash();
if(asHash.hash !='' && asHash.page != '') this.switchPage(asHash); //page switching
else if(this.vars('page')=='') this.setHash(this.consts.default_page); //first page
}
getHash() {
var sHash = this.hash();
var asHash = sHash.split(this.consts.hash_sep);
var sPage = asHash.shift() || '';
return {hash:sHash, page:sPage, items:asHash};
}
setHash(sPage, asItems, bReboot) {
bReboot = bReboot || false;
sPage = sPage || '';
asItems = asItems || [];
if(typeof asItems == 'string') asItems = [asItems];
if(sPage != '') {
var sItems = (asItems.length > 0)?this.consts.hash_sep+asItems.join(this.consts.hash_sep):'';
this.hash(sPage+sItems, bReboot);
}
}
hash(hash, bReboot) {
bReboot = bReboot || false;
if(!hash) return window.location.hash.slice(1);
else window.location.hash = '#'+hash;
if(bReboot) location.reload();
}
updateHash(sType, iId) {
sType = sType || '';
iId = iId || 0;
var asHash = this.getHash();
if(iId) this.setHash(asHash.page, [asHash.items[0], sType, iId]);
}
flushHash(asTypes) {
asTypes = asTypes || [];
var asHash = this.getHash();
if(asHash.items.length > 1 && (asTypes.length == 0 || asTypes.indexOf(asHash.items[1]) != -1)) this.setHash(asHash.page, [asHash.items[0]]);
}
*/
/* Page Events */
pageInit(asHash) {
let sPage = this.vars('page');
if(this.pages[sPage].pageInit) this.pages[sPage].pageInit(asHash);
else console.log('no init for the page: '+asHash.page);
}
onSamePageMove(asNewHash, asOldHash) {
let sPage = this.vars('page');
return (this.pages[sPage] && this.pages[sPage].onSamePageMove)?this.pages[sPage].onSamePageMove(asNewHash, asOldHash):false;
}
onQuitPage() {
let sPage = this.vars('page');
return (this.pages[sPage] && this.pages[sPage].onQuitPage)?this.pages[sPage].onQuitPage():true;
}
onResize() {
let sPage = this.vars('page');
if(this.pages[sPage].onResize) this.pages[sPage].onResize();
}
onFeedback(sType, sMsg, asContext) {
asContext = asContext || {};
let sPage = this.vars('page');
if(this.pages[sPage].onFeedback) this.pages[sPage].onFeedback(sType, sMsg, asContext);
else console.log({type:sType, msg:sMsg, context:asContext});
}
onKeydown(oEvent) {
let sPage = this.vars('page');
if(this.pages[sPage].onKeydown) this.pages[sPage].onKeydown(oEvent);
}
/* Page Switch - DOM Replacement */
/*
getActionLink(sAction, oVars) {
if(!oVars) oVars = {};
let sVars = '';
for(i in oVars) sVars += '&'+i+'='+oVars[i];
return this.consts.process_page+'?a='+sAction+sVars;
}
*/
addPage(sPage, oPage) {
this.pages[sPage] = oPage;
}
/*
switchPage(asHash) {
var sPageName = asHash.page;
var bSamePage = (this.vars('page') == sPageName);
var bFirstPage = (this.vars('page') == '');
if(!this.consts.pages[sPageName]) { //Page does not exist
if(bFirstPage) this.setHash(this.consts.default_page);
else this.setHash(this.vars('page'), this.vars(['hash', 'items']));
}
else if(this.onQuitPage(bSamePage) && !bSamePage || this.onSamePageMove(asHash))
{
//Delete tmp variables
this.vars('tmp', {});
//Officially a new page
this.vars('page', sPageName);
this.vars('hash', asHash);
//Update Page Title
this.setPageTitle(sPageName+' '+(asHash.items[0] || ''));
//Replacing DOM
var $Dom = $(this.consts.pages[sPageName]);
if(bFirstPage) this.splash($Dom, asHash, bFirstPage); //first page
else this.elem.main.stop().fadeTo('fast', 0, () => {this.splash($Dom, asHash, bFirstPage);}); //Switching page
}
else if(bSamePage) this.vars('hash', asHash);
}
splash($Dom, asHash, bFirstPage)
{
//Switch main content
this.elem.main.empty().html($Dom);
//Page Bootstrap
this.pageInit(asHash, bFirstPage);
//Show main
var $FadeInElem = bFirstPage?this.elem.container:this.elem.main;
$FadeInElem.hide().fadeTo('slow', 1);
}
*/
setPageTitle(sTitle) {
document.title = this.consts.title+' - '+sTitle;
}
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
}
checkClearance(sClearance) {
return (this.vars(['user', 'clearance']) >= sClearance);
}
}

11
src/scripts/user.js Normal file
View File

@@ -0,0 +1,11 @@
export default class User {
constructor(asUserInfo = {}, sDefaultTimeZone = '') {
Object.assign(this, asUserInfo);
this.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || this.timezone || sDefaultTimeZone;
}
hasClearance(sClearance) {
return this.clearance >= sClearance;
}
}