Convert admin page to Vue
This commit is contained in:
231
src/components/admin.vue
Normal file
231
src/components/admin.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<script>
|
||||
import SpotButton from './spotButton.vue';
|
||||
import AdminInput from './adminInput.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SpotButton,
|
||||
AdminInput
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elems: {},
|
||||
feedbacks: []
|
||||
};
|
||||
},
|
||||
inject: ['spot'],
|
||||
methods: {
|
||||
l(id) {
|
||||
return this.spot.lang(id);
|
||||
},
|
||||
async setProjects() {
|
||||
let aoElemTypes = await this.spot.get2('admin_get');
|
||||
|
||||
for(const [sType, aoElems] of Object.entries(aoElemTypes)) {
|
||||
this.elems[sType] = {};
|
||||
for(const [iKey, oElem] of Object.entries(aoElems)) {
|
||||
oElem.type = sType;
|
||||
this.elems[sType][oElem.id] = oElem;
|
||||
}
|
||||
}
|
||||
},
|
||||
createElem(sType) {
|
||||
this.spot.get2('admin_create', {type: sType})
|
||||
.then((aoNewElemTypes) => {
|
||||
console.log(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.spot.lang('admin_create_success'), {'create':sType});
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((sMsg) => {console.log(sMsg);this.spot.onFeedback('error', sMsg, {'create':sType});});
|
||||
},
|
||||
deleteElem(oElem) {
|
||||
const asInputs = {
|
||||
type: oElem.type,
|
||||
id: oElem.id
|
||||
};
|
||||
|
||||
this.spot.get(
|
||||
'admin_delete',
|
||||
(asData) => {
|
||||
delete this.elems[asInputs.type][asInputs.id];
|
||||
this.spot.onFeedback('success', this.spot.lang('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;
|
||||
if(sOldVal != sNewVal) {
|
||||
let asInputs = {
|
||||
type: oElem.type,
|
||||
id: oElem.id,
|
||||
field: oEvent.target.name,
|
||||
value: sNewVal
|
||||
};
|
||||
|
||||
this.spot.get2('admin_set', asInputs)
|
||||
.then((asData) => {
|
||||
this.elems[oElem.type][oElem.id][oEvent.target.name] = sNewVal;
|
||||
this.spot.onFeedback('success', this.spot.lang('admin_save_success'), asInputs);
|
||||
})
|
||||
.catch((sError) => {
|
||||
oEvent.target.value = sOldVal;
|
||||
this.spot.onFeedback('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));
|
||||
},
|
||||
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'});});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
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)+')';
|
||||
|
||||
this.feedbacks.push({type:sType, msg:sMsg});
|
||||
}
|
||||
});
|
||||
this.setProjects();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div id="admin">
|
||||
<a name="back" class="button" href="#project"><i class="fa fa-back push"></i>{{ l('nav_back') }}</a>
|
||||
<h1>{{ l('projects') }}</h1>
|
||||
<div id="project_section">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ l('id_project') }}</th>
|
||||
<th>{{ l('project') }}</th>
|
||||
<th>{{ l('mode') }}</th>
|
||||
<th>{{ l('code_name') }}</th>
|
||||
<th>{{ l('start') }}</th>
|
||||
<th>{{ l('end') }}</th>
|
||||
<th>{{ l('delete') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="project in elems.project">
|
||||
<td>{{ project.id }}</td>
|
||||
<td><AdminInput :type="'text'" :name="'name'" :elem="project" /></td>
|
||||
<td>{{ project.mode }}</td>
|
||||
<td><AdminInput :type="'text'" :name="'codename'" :elem="project" /></td>
|
||||
<td><AdminInput :type="'date'" :name="'active_from'" :elem="project" /></td>
|
||||
<td><AdminInput :type="'date'" :name="'active_to'" :elem="project" /></td>
|
||||
<td><SpotButton :iconClass="'close fa-lg'" @click="deleteElem(project)" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<SpotButton :buttonClass="'new'" :buttonText="l('new_project')" :iconClass="'new'" @click="createElem('project')" />
|
||||
</div>
|
||||
<h1>{{ l('feeds') }}</h1>
|
||||
<div id="feed_section">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ l('id_feed') }}</th>
|
||||
<th>{{ l('ref_feed_id') }}</th>
|
||||
<th>{{ l('id_spot') }}</th>
|
||||
<th>{{ l('id_project') }}</th>
|
||||
<th>{{ l('name') }}</th>
|
||||
<th>{{ l('status') }}</th>
|
||||
<th>{{ l('last_update') }}</th>
|
||||
<th>{{ l('delete') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="feed in elems.feed">
|
||||
<td>{{ feed.id }}</td>
|
||||
<td><AdminInput :type="'text'" :name="'ref_feed_id'" :elem="feed" /></td>
|
||||
<td><AdminInput :type="'number'" :name="'id_spot'" :elem="feed" /></td>
|
||||
<td><AdminInput :type="'number'" :name="'id_project'" :elem="feed" /></td>
|
||||
<td>{{ feed.name }}</td>
|
||||
<td>{{ feed.status }}</td>
|
||||
<td>{{ feed.last_update }}</td>
|
||||
<td><SpotButton :iconClass="'close fa-lg'" @click="deleteElem(feed)" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<SpotButton :buttonClass="'new'" :buttonText="l('new_feed')" :iconClass="'new'" @click="createElem('feed')" />
|
||||
</div>
|
||||
<h1>Spots</h1>
|
||||
<div id="spot_section">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ l('id_spot') }}</th>
|
||||
<th>{{ l('ref_spot_id') }}</th>
|
||||
<th>{{ l('name') }}</th>
|
||||
<th>{{ l('model') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="spot in elems.spot">
|
||||
<td>{{ spot.id }}</td>
|
||||
<td>{{ spot.ref_spot_id }}</td>
|
||||
<td>{{ spot.name }}</td>
|
||||
<td>{{ spot.model }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h1>{{ l('active_users') }}</h1>
|
||||
<div id="user_section">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ l('id_user') }}</th>
|
||||
<th>{{ l('user_name') }}</th>
|
||||
<th>{{ l('language') }}</th>
|
||||
<th>{{ l('time_zone') }}</th>
|
||||
<th>{{ l('clearance') }}</th>
|
||||
<th>{{ l('delete') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="user in elems.user">
|
||||
<td>{{ user.id }}</td>
|
||||
<td>{{ user.name }}</td>
|
||||
<td>{{ user.language }}</td>
|
||||
<td>{{ user.timezone }}</td>
|
||||
<td><AdminInput :type="'number'" :name="'clearance'" :elem="user" /></td>
|
||||
<td><SpotButton :iconClass="'close fa-lg'" @click="deleteElem(user)" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h1>{{ l('toolbox') }}</h1>
|
||||
<div id="toolbox">
|
||||
<SpotButton :buttonClass="'refresh'" :buttonText="l('update_project')" :iconClass="'refresh'" @click="updateProject" />
|
||||
</div>
|
||||
<div id="feedback" class="feedback">
|
||||
<p v-for="feedback in feedbacks" :class="feedback.type">{{ feedback.msg }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
17
src/components/adminInput.vue
Normal file
17
src/components/adminInput.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
type: String,
|
||||
name: String,
|
||||
elem: Object
|
||||
},
|
||||
computed: {
|
||||
value() {
|
||||
return this.elem[this.name];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<input :type="type" :name="name" :value="value" @change="$parent.updateElem(elem, $event)" @keyup="$parent.queue(elem, $event)" />
|
||||
</template>
|
||||
44
src/components/project.vue
Normal file
44
src/components/project.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<script>
|
||||
//Leaflet
|
||||
import 'leaflet';
|
||||
import 'leaflet-geometryutil';
|
||||
import 'leaflet.heightgraph';
|
||||
import '../scripts/leaflet.helpers';
|
||||
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LMap,
|
||||
LTileLayer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
server: this.spot.consts.server,
|
||||
zoom: 13
|
||||
};
|
||||
},
|
||||
inject: ['spot'],
|
||||
mounted() {
|
||||
if(this.$parent.hash.items.length==0) this.$parent.setHash(this.$parent.hash.page, [this.spot.vars('default_project_codename')]);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="projects">
|
||||
<div id="background"></div>
|
||||
<div id="submap">
|
||||
<div class="loader fa fa-fw fa-map flicker" id="map_loading"></div>
|
||||
</div>
|
||||
<div id="map">
|
||||
<l-map ref="map" v-model:zoom="zoom" :center="[47.41322, -1.219482]">
|
||||
<l-tile-layer
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
layer-type="base"
|
||||
name="OpenStreetMap"
|
||||
></l-tile-layer>
|
||||
</l-map>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mobile" class="mobile"></div>
|
||||
</template>
|
||||
22
src/components/spotButton.vue
Normal file
22
src/components/spotButton.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<script>
|
||||
import SpotIcon from './spotIcon.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SpotIcon
|
||||
},
|
||||
props: {
|
||||
buttonClass: String,
|
||||
buttonText: String,
|
||||
iconClass: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
margin: !!this.buttonText
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<button :class="buttonClass"><SpotIcon :iconClass="iconClass" :margin="margin" />{{ buttonText }}</button>
|
||||
</template>
|
||||
17
src/components/spotIcon.vue
Normal file
17
src/components/spotIcon.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
iconClass: String,
|
||||
margin: Boolean,
|
||||
otherClasses: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classNames: 'fa fa-'+this.iconClass+(this.margin?' push':'')+(this.otherClasses?' '+this.otherClasses:'')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<i :class="classNames"></i>
|
||||
</template>
|
||||
Reference in New Issue
Block a user