From 683670f77a74ebe8600f8c486af57d7d056b6edb Mon Sep 17 00:00:00 2001
From: Franzz <francois@lutran.fr>
Date: Thu, 11 Jan 2024 22:16:17 +0100
Subject: [PATCH] Simplify spot button & input parameters

---
 src/components/admin.vue      | 49 +++++++++++++++++++----------------
 src/components/adminInput.vue |  1 +
 src/components/spotButton.vue | 13 +++-------
 src/components/spotIcon.vue   | 10 ++++---
 4 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/src/components/admin.vue b/src/components/admin.vue
index 067ebfe..2c10ba3 100644
--- a/src/components/admin.vue
+++ b/src/components/admin.vue
@@ -7,17 +7,36 @@ export default {
 		SpotButton,
 		AdminInput
 	},
+	inject: ['spot'],
 	data() {
 		return {
 			elems: {},
 			feedbacks: []
 		};
 	},
-	inject: ['spot'],
+	mounted() {
+		this.setEvents();
+		this.setProjects();
+	},
 	methods: {
 		l(id) {
 			return this.spot.lang(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)+')';
+
+					this.feedbacks.push({type:sType, msg:sMsg});
+				}
+			});
+		},
 		async setProjects() {
 			let aoElemTypes = await this.spot.get2('admin_get');
 
@@ -94,22 +113,6 @@ export default {
 				.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>
@@ -138,11 +141,11 @@ export default {
 						<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>
+						<td><SpotButton :icon="'close fa-lg'" @click="deleteElem(project)" /></td>
 					</tr>
 				</tbody>
 			</table>
-			<SpotButton :buttonClass="'new'" :buttonText="l('new_project')" :iconClass="'new'" @click="createElem('project')" />
+			<SpotButton :classes="'new'" :text="l('new_project')" :icon="'new'" @click="createElem('project')" />
 		</div>
 		<h1>{{ l('feeds') }}</h1>
 		<div id="feed_section">
@@ -168,11 +171,11 @@ export default {
 						<td>{{ feed.name }}</td>
 						<td>{{ feed.status }}</td>
 						<td>{{ feed.last_update }}</td>
-						<td><SpotButton :iconClass="'close fa-lg'" @click="deleteElem(feed)" /></td>
+						<td><SpotButton :icon="'close fa-lg'" @click="deleteElem(feed)" /></td>
 					</tr>
 				</tbody>
 			</table>
-			<SpotButton :buttonClass="'new'" :buttonText="l('new_feed')" :iconClass="'new'" @click="createElem('feed')" />
+			<SpotButton :classes="'new'" :text="l('new_feed')" :icon="'new'" @click="createElem('feed')" />
 		</div>
 		<h1>Spots</h1>
 		<div id="spot_section">
@@ -215,14 +218,14 @@ export default {
 						<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>
+						<td><SpotButton :icon="'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" />
+			<SpotButton :classes="'refresh'" :text="l('update_project')" :icon="'refresh'" @click="updateProject" />
 		</div>
 		<div id="feedback" class="feedback">
 			<p v-for="feedback in feedbacks" :class="feedback.type">{{ feedback.msg }}</p>
diff --git a/src/components/adminInput.vue b/src/components/adminInput.vue
index cd8e3eb..bf99065 100644
--- a/src/components/adminInput.vue
+++ b/src/components/adminInput.vue
@@ -12,6 +12,7 @@
 		}
 	}
 </script>
+
 <template>
 	<input :type="type" :name="name" :value="value" @change="$parent.updateElem(elem, $event)" @keyup="$parent.queue(elem, $event)" />
 </template>
\ No newline at end of file
diff --git a/src/components/spotButton.vue b/src/components/spotButton.vue
index 987c603..7842893 100644
--- a/src/components/spotButton.vue
+++ b/src/components/spotButton.vue
@@ -6,17 +6,12 @@ export default {
 		SpotIcon
 	},
 	props: {
-    	buttonClass: String,
-		buttonText: String,
-		iconClass: String
-	},
-	data() {
-		return {
-			margin: !!this.buttonText
-		}
+    	classes: String,
+		text: String,
+		icon: String
 	}
 }
 </script>
 <template>
-	<button :class="buttonClass"><SpotIcon :iconClass="iconClass" :margin="margin" />{{ buttonText }}</button>
+	<button :class="classes"><SpotIcon :icon="icon" :text="text" /></button>
 </template>
\ No newline at end of file
diff --git a/src/components/spotIcon.vue b/src/components/spotIcon.vue
index 4df4f11..b911488 100644
--- a/src/components/spotIcon.vue
+++ b/src/components/spotIcon.vue
@@ -1,17 +1,19 @@
 <script>
 export default {
 	props: {
-		iconClass: String,
+		icon: String,
+		text: String,
 		margin: Boolean,
-		otherClasses: String
+		classes: String
 	},
 	data() {
 		return {
-			classNames: 'fa fa-'+this.iconClass+(this.margin?' push':'')+(this.otherClasses?' '+this.otherClasses:'')
+			classNames: 'fa fa-'+this.icon+((this.margin || this.text && this.text!='')?' push':'')+(this.classes?' '+this.classes:'')
 		}
 	}
 }
 </script>
+
 <template>
-	<i :class="classNames"></i>
+	<i :class="classNames"></i>{{ text }}
 </template>
\ No newline at end of file