From 411449cdb9d3572557e7d291a0716948ac61c422 Mon Sep 17 00:00:00 2001
From: nurafrinaalimi16 <nurafrinaalimi16@gmail.com>
Date: Tue, 26 Mar 2024 15:08:52 +0800
Subject: [PATCH] fix modal bootstrap

---
 .../js/components/demo/admin/home/index.vue   | 229 ++++++++++--------
 .../js/components/demo/voter/home/vote.vue    | 148 ++++++-----
 2 files changed, 209 insertions(+), 168 deletions(-)

diff --git a/resources/assets/js/components/demo/admin/home/index.vue b/resources/assets/js/components/demo/admin/home/index.vue
index e9bf588..70546a4 100644
--- a/resources/assets/js/components/demo/admin/home/index.vue
+++ b/resources/assets/js/components/demo/admin/home/index.vue
@@ -1,118 +1,142 @@
 <template>
-<div class="panel panel-default">
-	<div class="panel-body">
-		<h4> Recent Elections</h4>
-		<div class="form-group">
-			<button class="btn btn-success" v-if="data.election.status == 1" @click="util.showModal('#start-election-modal')">Start Election</button>
-			
-			<router-link :to="{name: 'Current Result'}" class="btn btn-info" v-if="data.election.status == 2">
-				View Results
-			</router-link>
-			
-			<button class="btn btn-danger" v-if="data.election.status == 2" @click="util.showModal('#stop-election-modal')">End Election</button>	
+	<div class="panel panel-default">
+		<div class="panel-body">
+			<h4> Recent Elections</h4>
+			<div class="form-group">
+				<button class="btn btn-success" v-if="data.election.status == 1 &&  data.user.role==1"
+					@click="util.showModal('#start-election-modal')">Start Election</button>
 
-			<label v-if="data.election.status == 2">Election has Started {{ start_date }}</label>
+				<router-link :to="{ name: 'Current Result' }" class="btn btn-info" v-if="data.election.status == 2">
+					View Results
+				</router-link>
+
+				<button class="btn btn-danger" v-if="data.election.status == 2"
+					@click="util.showModal('#stop-election-modal')">End Election</button>
+
+				<label v-if="data.election.status == 2">Election has Started {{ start_date }}</label>
+
+			</div>
+
+			<div class="table-responsive">
+				<table class="table table-hover">
+					<thead>
+						<tr>
+							<th>ID</th>
+							<th>Election Name</th>
+							<th>Election Start</th>
+							<th>Election End</th>
+							<th>View</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr v-for="election in data.elections">
+							<td>{{ election.id }}</td>
+							<td>{{ election.name }}</td>
+							<td>{{ election.start }}</td>
+							<td>{{ election.end }}</td>
+							<td>
+								<router-link :to="{ name: 'Election Result', params: { election_id: election.id } }"
+									class="btn btn-info">View Result</router-link>
+							</td>
+						</tr>
+						<tr v-if="data.elections.length < 1">
+							<td colspan="5">No elections yet</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+
+			<form @submit.prevent="start" id="start_form">
+				<div class="modal fade" id="start-election-modal" tabindex="-1" role="dialog"
+					aria-labelledby="start-election-modal" aria-hidden="true">
+					<div class="modal-dialog" role="document">
+						<div class="modal-content">
+							<div class="modal-header">
+								<h5 class="modal-title" id="exampleModalLabel">Start Election</h5>
+								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+									<span aria-hidden="true">&times;</span>
+								</button>
+							</div>
+							<div class="modal-body">
+								<div class="form-group">
+									<label for="name">Election Name</label>
+									<input type="text" name="name" autocomplete="on" class="form-control" placeholder="(Optional)" />
+								</div>
+
+								<div class="form-group">
+									<label for="password">Confirm Password</label>
+									<input type="password" name="password" class="form-control" required />
+								</div>
+							</div>
+							<div class="modal-footer">
+								<input type="submit" class="btn btn-info" value="Start" />
+								<input type="button" data-dismiss="modal" class="btn btn-default" value="Cancel" />
+							</div>
+						</div>
+					</div>
+				</div>
+			</form>
+
+			<form @submit.prevent="stop" id="stop_form">
+				<div class="modal fade" id="stop-election-modal" tabindex="-1" role="dialog"
+					aria-labelledby="stop-election-modal" aria-hidden="true">
+					<div class="modal-dialog" role="document">
+						<div class="modal-content">
+							<div class="modal-header">
+								<h5 class="modal-title" id="exampleModalLabel">Stop Election</h5>
+								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+									<span aria-hidden="true">&times;</span>
+								</button>
+							</div>
+							<div class="modal-body">
+								<div class="form-group">
+									<label for="name">Election Name</label>
+									<input type="text" name="name" :value="data.election.name" autocomplete="on" class="form-control" placeholder="(Optional)" />
+								</div>
+
+								<div class="form-group">
+									<label for="password">Confirm Password</label>
+									<input type="password" name="password" autocomplete="on" class="form-control" required />
+								</div>
+							</div>
+							<div class="modal-footer">
+								<input type="submit" class="btn btn-info" value="Stop Election" />
+								<input type="button" data-dismiss="modal" class="btn btn-default" value="Cancel" />
+							</div>
+						</div>
+					</div>
+				</div>
+			</form>
 
 		</div>
-
-		<div class="table-responsive">
-			<table class="table table-hover">
-				<thead>
-					<tr>
-						<th>ID</th>
-						<th>Election Name</th>
-						<th>Election Start</th>
-						<th>Election End</th>
-						<th>View</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr v-for="election in data.elections">
-						<td>{{ election.id }}</td>
-						<td>{{ election.name }}</td>
-						<td>{{ election.start}}</td>
-						<td>{{ election.end}}</td>
-						<td>
-							<router-link :to="{name: 'Election Result', params:{election_id:election.id}}" class="btn btn-info">View Result</router-link></td>
-					</tr>
-					<tr v-if="data.elections.length < 1">
-						<td colspan="5">No elections yet</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
-
-		<form @submit.prevent="start" id="start_form">
-		<modal id="start-election-modal">
-			<modal-header>Start Election</modal-header>
-			<modal-body>
-				<div class="form-group">
-					<label for="name">Election Name</label>
-					<input type="text" name="name" class="form-control" placeholder="(Optional)"/>
-				</div>
-				<div class="form-group">
-					<label for="password">Confirm Password</label>
-					<input type="password" name="password" class="form-control" required/>
-				</div>
-			</modal-body>
-			<modal-footer>
-				<input type="submit" class="btn btn-info" value="Start"/>
-				<input type="button" data-dismiss="modal" class="btn btn-default" value="Cancel"/>
-			</modal-footer>
-		</modal>
-		</form>
-
-		<form @submit.prevent="stop" id="stop_form">
-		<modal id="stop-election-modal">
-			<modal-header>Stop Election</modal-header>
-			<modal-body>
-
-				<div class="form-group">
-					<label for="name">Election Name</label>
-					<input type="text" name="name" :value="data.election.name" class="form-control" placeholder="(Optional)"/>
-				</div>
-
-				<div class="form-group">
-					<label for="password">Confirm Password</label>
-					<input type="password" name="password" class="form-control" required/>
-				</div>
-			</modal-body>
-			<modal-footer>
-				<input type="submit" class="btn btn-danger" value="Stop Election"/>
-				<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel"/>
-			</modal-footer>
-		</modal>
-		</form>
-
 	</div>
-</div>
 </template>
 
 <script>
-export default{
-	data: ()=>({
+export default {
+	data: () => ({
 		start_date: null
 	}),
 	created: function () {
 		this.refreshElection();
 		var vm = this;
-		setInterval(()=>{
+		setInterval(() => {
 			vm.start_date = moment(vm.data.election.start).fromNow();
-		},1000);
+		}, 1000);
 	},
 
 	methods: {
 
 		stop: function () {
 			var vm = this;
-			this.util.hideModal('#stop-election-modal');
+			// this.util.hideModal('#stop-election-modal');
 			this.util.notify('Stopping Election', 'loading');
-			axios.post(config.API+'election/stop', $('#stop_form').serialize())
-				.then(response=>{
+			axios.post(config.API + 'election/stop', $('#stop_form').serialize())
+				.then(response => {
 					$.notifyClose();
-					if (vm.util.showResult(response,'success')) {
+					if (vm.util.showResult(response, 'success')) {
 						vm.refreshElection();
-						vm.data.election =response.data.election;
+						vm.data.election = response.data.election;
 						vm.data.positions = [];
 						vm.data.partylists = [];
 						vm.data.voters = [];
@@ -120,7 +144,7 @@ export default{
 						vm.data.results = [];
 					}
 				})
-				.catch(error=>{
+				.catch(error => {
 					$.notifyClose();
 					vm.util.showResult(error, 'error');
 				})
@@ -128,31 +152,32 @@ export default{
 
 		start: function () {
 			var vm = this;
-			this.util.hideModal('#start-election-modal');
+			// this.util.hideModal('#start-election-modal');
+			console.log('this');
 			this.util.notify('Loading please wait', 'loading');
-			axios.post(config.API+'election/start', $('#start_form').serialize())
-				.then(response=>{
+			axios.post(config.API + 'election/start', $('#start_form').serialize())
+				.then(response => {
 					$.notifyClose();
-					if(vm.util.showResult(response, 'success')){
+					if (vm.util.showResult(response, 'success')) {
 						vm.refreshElection();
 						vm.data.election = response.data.election;
 					}
 				})
-				.catch(error=>{
+				.catch(error => {
 					$.notifyClose();
 					vm.util.showResult(error, 'error');
 				})
 		},
 
-		refreshElection: function(){		
+		refreshElection: function () {
 			this.util.notify('Refreshing Election', 'loading');
 			var vm = this;
-			axios.get(config.API+'election')
-				.then(response=>{
+			axios.get(config.API + 'election')
+				.then(response => {
 					$.notifyClose();
 					vm.data.elections = response.data;
 				})
-				.catch(error=>{
+				.catch(error => {
 					$.notifyClose();
 					vm.util.showResult(error, 'error');
 				})
diff --git a/resources/assets/js/components/demo/voter/home/vote.vue b/resources/assets/js/components/demo/voter/home/vote.vue
index c18812e..3909601 100644
--- a/resources/assets/js/components/demo/voter/home/vote.vue
+++ b/resources/assets/js/components/demo/voter/home/vote.vue
@@ -1,69 +1,82 @@
 <template>
-<div class="row col-md-10 col-md-offset-1">
-	<div class="col-md-4">
-		<h4>Vote Information</h4><hr/>
-		<ul class="list-group">
-			<li class="list-group-item" v-for="position in data.positions">
-				<b>{{ position.name }} : </b>{{ getName(position.id) }}
-			</li>
-			<li class="list-group-item">
-				<center>
-					<button class="btn btn-success" @click="util.showModal('#vote-modal')">Submit Vote</button>
-					<button class="btn btn-default" @click="reset()">Reset</button>
-				</center>
-			</li>
-		</ul>
-	</div>
-	<div class="col-md-8">
-		<h4>Select Candidates</h4><hr/>
-		<div class="panel panel-info" v-for="position in data.positions">
-			<div class="panel-heading">{{ position.name }}</div>
-			<div class="panel-body table-responsive">
-				<table class="table table-hover">
-					<thead>
-						<tr>
-							<th></th>
-							<th>Name</th>
-							<th>Partylist</th>
-							<th>Unit</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="nominee in data.nominees" v-if="nominee.position_id==position.id" @click="vote(position.id,nominee.id)">
-							<td><input type="radio" :name="position.id" :id="nominee.id"/></td>
-							<td>{{ nominee.name }}</td>
-							<td>{{ getPartylist(nominee.partylist_id) }}</td>
-							<td>{{ nominee.unit }}</td>
-						</tr>
-					</tbody>
-				</table>
+	<div class="row col-md-10 col-md-offset-1">
+		<div class="col-md-4">
+			<h4>Vote Information</h4>
+			<hr />
+			<ul class="list-group">
+				<li class="list-group-item" v-for="position in data.positions">
+					<b>{{ position.name }} : </b>{{ getName(position.id) }}
+				</li>
+				<li class="list-group-item">
+					<center>
+						<button class="btn btn-success" @click="util.showModal('#vote-modal')">Submit Vote</button>
+						<button class="btn btn-default" @click="reset()">Reset</button>
+					</center>
+				</li>
+			</ul>
+		</div>
+		<div class="col-md-8">
+			<h4>Select Candidates</h4>
+			<hr />
+			<div class="panel panel-info" v-for="position in data.positions">
+				<div class="panel-heading">{{ position.name }}</div>
+				<div class="panel-body table-responsive">
+					<table class="table table-hover">
+						<thead>
+							<tr>
+								<th></th>
+								<th>Name</th>
+								<th>Partylist</th>
+								<th>Unit</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr v-for="nominee in data.nominees" v-if="nominee.position_id==position.id"
+								@click="vote(position.id,nominee.id)">
+								<td><input type="radio" :name="position.id" :id="nominee.id"/></td>
+								<td>{{ nominee.name }}</td>
+								<td>{{ getPartylist(nominee.partylist_id) }}</td>
+								<td>{{ nominee.unit }}</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
 			</div>
 		</div>
+
+		<div class="modal fade" id="vote-modal" tabindex="-2" role="dialog" aria-labelledby="exampleModalLabel"
+			aria-hidden="true">
+			<div class="modal-dialog" role="document">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title" id="exampleModalLabel">Vote</h5>
+						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+							<span aria-hidden="true">&times;</span>
+						</button>
+					</div>
+					<div class="modal-body">
+						<h3>Note: You can only vote once, so vote wisely.</h3>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+						<button type="button" class="btn btn-primary" @click="submit()">Submit Vote</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
 	</div>
-
-	<modal id="vote-modal">
-		<modal-header>Vote</modal-header>
-		<modal-body>
-			<h3>Note: You can only vote once, so vote wisely.</h3>
-		</modal-body>
-		<modal-footer>
-			<button class="btn btn-success" @click="submit()">Submit Vote</button>
-			<button class="btn btn-default" data-dismiss="modal">Cancel</button>
-		</modal-footer>
-	</modal>
-
-</div>
 </template>
 
 <script>
-export default{
+export default {
 	created: function () {
-		if (this.data.result.length > 0 || this.data.election.status != 2) 
-			this.$router.push({name: 'Voter Home'})
+		if (this.data.result.length > 0 || this.data.election.status != 2)
+			this.$router.push({ name: 'Voter Home' })
 		for (var i in this.data.positions) {
 			this.selected.push({
-				position_id: this.data.positions[i]['id'], 
-				nominee_id: null, 
+				position_id: this.data.positions[i]['id'],
+				nominee_id: null,
 			});
 		}
 	},
@@ -76,9 +89,12 @@ export default{
 	},
 
 	methods: {
-
+		test: function(){
+			console.log('tab');
+			this.util.showModal('#vote-modal')
+		},
 		submit: function () {
-			this.util.hideModal('#vote-modal');
+			// this.util.hideModal('#vote-modal');
 			if (this.hasNullVote()) return;
 			var vm = this;
 			this.util.notify('Submitting your vote, please wait...', 'loading');
@@ -87,9 +103,9 @@ export default{
 			axios.post(config.API+'election/vote', data)
 				.then(response=>{
 					$.notifyClose();
-					if (vm.util.showResult(response, 'success')){
+					if (vm.util.showResult(response, 'success')) {
 						vm.data.result = response.data.result;
-						vm.$router.push({name: 'Voter Home'});
+						vm.$router.push({ name: 'Voter Home' });
 					}
 
 				})
@@ -102,8 +118,8 @@ export default{
 
 		hasNullVote: function () {
 			let selected = this.selected;
-			for (var i in selected) 
-				if (selected[i]['nominee_id'] == null){
+			for (var i in selected)
+				if (selected[i]['nominee_id'] == null) {
 					this.util.notify('You must vote on all position', 'error');
 					return true;
 				}
@@ -112,7 +128,7 @@ export default{
 
 		reset: function () {
 			let selected = this.selected;
-			for (var i in selected){
+			for (var i in selected) {
 				$('#'+selected[i]['nominee_id']).selected(false);
 				selected[i]['nominee_id'] = null;
 			}
@@ -129,8 +145,8 @@ export default{
 		getName: function (id) {
 			let positions = this.data.positions;
 			let selected = this.selected;
-			for (var i in selected) 
-				if (selected[i]['position_id'] == id) 
+			for (var i in selected)
+				if (selected[i]['position_id'] == id)
 					return this.getNominee(selected[i]['nominee_id']);
 			return '';
 		},
@@ -144,7 +160,7 @@ export default{
 		getPartylist: function (id) {
 			let partylists = this.data.partylists;
 			for (var i in partylists)
-				if (partylists[i]['id']==id) return partylists[i]['name'];
+				if (partylists[i]['id'] == id) return partylists[i]['name'];
 			return 'No Partylist';
 		}
 	}