From e7a29dc21a69fa597684b946f4501fba51a8dab9 Mon Sep 17 00:00:00 2001
From: cgfhtw <christopher.gerbrich@technikum-wien.at>
Date: Wed, 7 Aug 2024 11:56:00 +0200
Subject: [PATCH] Identation

---
 public/js/components/DashboardWidget/Ampel.js | 173 +++++++++++-------
 1 file changed, 105 insertions(+), 68 deletions(-)

diff --git a/public/js/components/DashboardWidget/Ampel.js b/public/js/components/DashboardWidget/Ampel.js
index a3a36eb94..8f8281276 100755
--- a/public/js/components/DashboardWidget/Ampel.js
+++ b/public/js/components/DashboardWidget/Ampel.js
@@ -15,16 +15,12 @@ export default {
 		AbstractWidget
 	],
 	computed: {
-		
-		ampelnComputed(){
-			
-			switch(this.source)
-			{
+		ampelnComputed() {
+			switch(this.source) {
 				case 'offen': return this.applyFilter(this.activeAmpeln);
 				case 'alle': return this.applyFilter(this.allAmpeln);
 				default: return this.applyFilter(this.activeAmpeln); 
 			}
-			
 		},
 		ampelnOverview () {
 			return this.activeAmpeln?.slice(0, this.WIDGET_AMPEL_MAX);  // show only newest 4 active ampeln
@@ -39,23 +35,20 @@ export default {
 				ueberfaellig: datasource?.filter(item => (new Date() > new Date(item.deadline)) && !item.bestaetigt).length,
 				alle: datasource?.length
 			}
-			
 		}
 	},
 	methods: {
-		applyFilter(data){
-			switch(this.filter)
-				{
-					case 'verpflichtend': return data?.filter(item => item.verpflichtend);
-					case 'ueberfaellig': return data?.filter(item => (new Date() > new Date(item.deadline)) && !item.bestaetigt);
-					default: return data;
-				}
+		applyFilter(data) {
+			switch(this.filter) {
+				case 'verpflichtend': return data?.filter(item => item.verpflichtend);
+				case 'ueberfaellig': return data?.filter(item => (new Date() > new Date(item.deadline)) && !item.bestaetigt);
+				default: return data;
+			}
 		},
-		toggleFilter(value){
+		toggleFilter(value) {
 			this.filter === value ? this.filter = '' : this.filter = value;
 		},
-		closeOffcanvasAmpeln()
-		{
+		closeOffcanvasAmpeln() {
 			for (let i = 0; i < this.ampelnComputed.length; i++)
 			{
 				let ampelId = this.ampelnComputed[i].ampel_id;
@@ -64,29 +57,29 @@ export default {
 				} 
 			}
 		},
-		openOffcanvasAmpel(ampelId){
+		openOffcanvasAmpel(ampelId) {
 			// Close earlier opened Ampeln
 			this.closeOffcanvasAmpeln();
 
 			// Show given Ampel
 			this.$refs['ampelCollapse_' + ampelId][0].classList.add('show');
 		},
-		closeOffcanvas(){
+		closeOffcanvas() {
 			this.closeOffcanvasAmpeln();
 			this.filter = '';
 			// maybe we also want to reset the source (open/alle) of the displayed ampeln
 		},
-		async fetchNonConfirmedActiveAmpeln(){
-			await this.$fhcApi.factory.ampeln.open().then(res=>{
+		async fetchNonConfirmedActiveAmpeln() {
+			await this.$fhcApi.factory.ampeln.open().then(res => {
 				this.activeAmpeln = res.data.sort((a,b) => new Date(b.deadline) - new Date(a.deadline));
 			}); 
 		},
-		async fetchAllActiveAmpeln(){
-			await this.$fhcApi.factory.ampeln.all().then(res=>{
+		async fetchAllActiveAmpeln() {
+			await this.$fhcApi.factory.ampeln.all().then(res => {
 				this.allAmpeln = res.data.sort((a,b) => new Date(b.deadline) - new Date(a.deadline));
 			}); 
 		},
-		async confirm(ampelId){
+		async confirm(ampelId) {
 			this.$fhcApi.factory.ampeln.confirm(ampelId)
 			.then(() => {
 				this.$fhcAlert.alertSuccess(this.$p.t('ampeln','ampelBestaetigt'));
@@ -97,11 +90,10 @@ export default {
 			this.fetchNonConfirmedActiveAmpeln();
 			this.fetchAllActiveAmpeln();
 		},
-		validateBtnTxt(buttontext){
+		validateBtnTxt(buttontext) {
+			if (buttontext instanceof Array && !buttontext.length) return this.$p.t('ui','bestaetigen');
 
-			if(buttontext instanceof Array && !buttontext.length) return this.$p.t('ui','bestaetigen');
-
-			if(!buttontext) return this.$p.t('ui','bestaetigen');
+			if (!buttontext) return this.$p.t('ui', 'bestaetigen');
 
 			return buttontext;
 		}
@@ -117,11 +109,19 @@ export default {
 	<div class="widgets-ampel w-100 h-100">
 		<div v-if="activeAmpeln" class="d-flex flex-column justify-content-between">
 			<div class="d-flex">
-				<header class="me-auto"><b>{{$p.t('ampeln','newestAmpeln')}}</b></header>
-				<div class="mb-2 text-danger"><a href="#allAmpelOffcanvas" data-bs-toggle="offcanvas">{{$p.t('ampeln','allAmpeln')}}</a></div>
+				<header class="me-auto"><b>{{$p.t('ampeln', 'newestAmpeln')}}</b></header>
+				<div class="mb-2 text-danger">
+					<a href="#allAmpelOffcanvas" data-bs-toggle="offcanvas">
+						{{$p.t('ampeln', 'allAmpeln')}}
+					</a>
+				</div>
 			</div>
 			<div class="d-flex justify-content-end">
-				<a v-if="count.ueberfaellig > 0" href="#allAmpelOffcanvas" data-bs-toggle="offcanvas" @click="filter = 'ueberfaellig'" class="text-decoration-none"><span class="badge bg-danger me-1"><i class="fa fa-solid fa-bolt"></i> {{$p.t('ampeln','overdue')}}: <b>{{ count.ueberfaellig }}</b></span></a>
+				<a v-if="count.ueberfaellig > 0" href="#allAmpelOffcanvas" data-bs-toggle="offcanvas" @click="filter = 'ueberfaellig'" class="text-decoration-none">
+					<span class="badge bg-danger me-1">
+						<i class="fa fa-solid fa-bolt"></i> {{$p.t('ampeln','overdue')}}: <b>{{ count.ueberfaellig }}</b>
+					</span>
+				</a>
 			</div>
 			<div v-for="ampel in ampelnOverview" :key="ampel.ampel_id" class="mt-2">
 				<div class="card">
@@ -139,28 +139,25 @@ export default {
 				</div>
 			</div>
 
-			<div v-if="activeAmpeln && activeAmpeln.length == 0" class="card card-body mt-4 p-4 text-center">
+			<div v-if="activeAmpeln.length == 0" class="card card-body mt-4 p-4 text-center">
 				<span class="text-success h2"><i class="fa fa-solid fa-circle-check"></i></span>
 				<span class="text-success h5">{{$p.t('ampeln','super')}}</span><br>
 				<span class="small">{{$p.t('ampeln','noOpenAmpeln')}}</span>
 			</div>
 		</div>
 		<div v-else>
-		<header class="me-auto"><b>{{$p.t('ampeln','newestAmpeln')}} </b></header>
+			<header class="me-auto"><b>{{$p.t('ampeln', 'newestAmpeln')}} </b></header>
 			<template v-for="n in WIDGET_AMPEL_MAX">
-
 				<div class="mt-2 card" aria-hidden="true">
-				<div class="card-body">
-					<p class="card-text placeholder-glow">
-					<span class="placeholder col-7"></span>
-					<span class="placeholder col-12"></span>
-					</p>
-				</div>
+					<div class="card-body">
+						<p class="card-text placeholder-glow">
+							<span class="placeholder col-7"></span>
+							<span class="placeholder col-12"></span>
+						</p>
+					</div>
 				</div>
 			</template>
-
 		</div>
-
 	</div>
 
 	<!-- All Ampeln Offcanvas -->
@@ -169,38 +166,78 @@ export default {
 		<template #body>
 			<div class="d-flex justify-content-evenly">
 				<div class="form-check form-check-inline form-control-sm">
-				<input class="form-check-input" type="radio" v-model="source" id="offen" value="offen"  checked>
-				<label class="form-check-label" for="offen">{{$p.t('ampeln','openAmpeln')}}</label>
+					<input class="form-check-input" type="radio" v-model="source" id="offen" value="offen"  checked>
+					<label class="form-check-label" for="offen">{{$p.t('ampeln','openAmpeln')}}</label>
+				</div>
+				<div class="form-check form-check-inline form-control-sm">
+					<input class="form-check-input" type="radio" v-model="source" id="alle" value="alle" >
+					<label class="form-check-label" for="alle">{{$p.t('ampeln','allAmpeln')}}</label>
+				</div>
 			</div>
-			<div class="form-check form-check-inline form-control-sm">
-				<input class="form-check-input" type="radio" v-model="source" id="alle" value="alle" >
-				<label class="form-check-label" for="alle">{{$p.t('ampeln','allAmpeln')}}</label>
+			<div class="col">
+				<button class="btn btn-light w-100" @click="filter = ''">
+					<small>{{$p.t('ui','alle')}}: <b>{{ count.alle }}</b></small>
+				</button>
 			</div>
-			</div>
-			<div class="col"><button class="btn btn-light w-100" @click="filter = ''"><small>{{$p.t('ui','alle')}}: <b>{{ count.alle }}</b></small></button></div>
 			<div class="row row-cols-2 g-2 mt-1">
-				<div class="col"><button class="btn btn-danger w-100"  @click="toggleFilter('ueberfaellig')"><i class="fa fa-solid fa-bolt me-2"></i><small :class="{'text-decoration-underline':filter==='ueberfaellig', 'fw-bold':filter==='ueberfaellig'}">{{$p.t('ampeln','overdue')}}: <b>{{ count.ueberfaellig }}</b></small></button></div>
-				<div class="col"><button class="btn btn-warning w-100" @click="toggleFilter('verpflichtend')"><i class="fa fa-solid fa-triangle-exclamation me-2"></i><small :class="{'text-decoration-underline':filter==='ueberfaellig', 'fw-bold':filter==='ueberfaellig'}" >{{$p.t('ampeln','mandatory')}}: <b>{{ count.verpflichtend }}</b></small></button></div>
+				<div class="col">
+					<button class="btn btn-danger w-100"  @click="toggleFilter('ueberfaellig')">
+						<i class="fa fa-solid fa-bolt me-2"></i>
+						<small :class="{'text-decoration-underline':filter==='ueberfaellig', 'fw-bold':filter==='ueberfaellig'}">
+							{{$p.t('ampeln','overdue')}}: <b>{{ count.ueberfaellig }}</b>
+						</small>
+					</button>
+				</div>
+				<div class="col">
+					<button class="btn btn-warning w-100" @click="toggleFilter('verpflichtend')">
+						<i class="fa fa-solid fa-triangle-exclamation me-2"></i>
+						<small :class="{'text-decoration-underline':filter==='ueberfaellig', 'fw-bold':filter==='ueberfaellig'}" >
+							{{$p.t('ampeln','mandatory')}}: <b>{{ count.verpflichtend }}</b>
+						</small>
+					</button>
+				</div>
 			</div>
 			<div v-for="ampel in ampelnComputed" :key="ampel.ampel_id" class="mt-2">
 				<ul class="list-group">
-				<li class="list-group-item small">
-				<div class="position-relative"><!-- prevents streched-link from stretching outside this parent element -->
-					<div class="d-flex">
-						<span class="small text-muted me-auto"><small>{{$p.t('ampeln','deadline')}}: {{ getDate(ampel.deadline) }}</small></span>
-						<div v-if="(new Date() > new Date(ampel.deadline)) && !ampel.bestaetigt"><span class="badge bg-danger"><i class="fa fa-solid fa-bolt"></span></div>
-						<div v-if="ampel.verpflichtend"><span class="badge bg-warning ms-1"><i class="fa fa-solid fa-triangle-exclamation"></span></div>
-						<div v-if="ampel.bestaetigt"><span class="badge bg-success ms-1"><i class="fa fa-solid fa-circle-check"></i></span></div>
-					</div>
-					<a :href="'#ampelCollapse_' + ampel.ampel_id" data-bs-toggle="collapse" class="stretched-link">{{ ampel.kurzbz }}</a><br>
-				</div>
-				<div class="collapse my-3" :id="'ampelCollapse_' + ampel.ampel_id" :ref="'ampelCollapse_' + ampel.ampel_id">
-					<div v-html="ampel.beschreibung_trans"></div>
-					<div v-if="!ampel.bestaetigt " class="d-flex justify-content-end mt-3">
-						<button  class="btn btn-sm btn-primary" :class="{disabled: ampel.bestaetigt}" @click="confirm(ampel.ampel_id)">{{ validateBtnTxt(ampel.buttontext_trans) }}</button>
-					</div>
-				</div>
-				</li>
+					<li class="list-group-item small">
+						<div class="position-relative">
+							<!-- prevents streched-link from stretching outside this parent element -->
+							<div class="d-flex">
+								<span class="small text-muted me-auto">
+									<small>
+										{{$p.t('ampeln','deadline')}}: {{ getDate(ampel.deadline) }}
+									</small>
+								</span>
+								<div v-if="(new Date() > new Date(ampel.deadline)) && !ampel.bestaetigt">
+									<span class="badge bg-danger">
+										<i class="fa fa-solid fa-bolt"></i>
+									</span>
+								</div>
+								<div v-if="ampel.verpflichtend">
+									<span class="badge bg-warning ms-1">
+										<i class="fa fa-solid fa-triangle-exclamation"></i>
+									</span>
+								</div>
+								<div v-if="ampel.bestaetigt">
+									<span class="badge bg-success ms-1">
+										<i class="fa fa-solid fa-circle-check"></i>
+									</span>
+								</div>
+							</div>
+							<a :href="'#ampelCollapse_' + ampel.ampel_id" data-bs-toggle="collapse" class="stretched-link">
+								{{ ampel.kurzbz }}
+							</a>
+							<br>
+						</div>
+						<div class="collapse my-3" :id="'ampelCollapse_' + ampel.ampel_id" :ref="'ampelCollapse_' + ampel.ampel_id">
+							<div v-html="ampel.beschreibung_trans"></div>
+							<div v-if="!ampel.bestaetigt " class="d-flex justify-content-end mt-3">
+								<button  class="btn btn-sm btn-primary" :class="{disabled: ampel.bestaetigt}" @click="confirm(ampel.ampel_id)">
+									{{ validateBtnTxt(ampel.buttontext_trans) }}
+								</button>
+							</div>
+						</div>
+					</li>
 				</ul>
 			</div>
 		</template>