<template>
<div class="container">
<div class="card">
<div class="card-header">
<h3 class="card-title">Active Gamers</h3>
<div class="card-tools">
<button class="btn btn-success" @click="newModel">Add New Gamer</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>PC/PS4</th>
<th>Start Time</th>
<th>Modify</th>
</tr>
</thead>
<tbody>
<tr v-for="gamer in gamers" :key="gamer.id">
<td>{{gamer.id}}</td>
<td>{{gamer.name}}</td>
<td>{{gamer.pc}}</td>
<td>{{gamer.time}}</td>
<td>
<a href="#">
<i class="fa fa-edit blue"></i>
</a>
<a href="#">
<i class="fa fa-trash red"></i>
</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Number</th>
<th>Name</th>
<th>PC/PS4</th>
<th>Start Time</th>
<th>Modify</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.card-body -->
</div>
<!--add new model-->
<div class="modal fade" id="addNewProduct" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" v-show="!isEdite">Add New Gamer</h5>
<h5 class="modal-title" v-show="isEdite">Update PC/PS4</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form @submit.prevent="isEdite ? updateUser() :createUser()">
<div class="modal-body">
<div class="form-group">
<label>Name</label>
<input v-model="form.name" type="text" name="name"
class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
<has-error :form="form" field="name"></has-error>
</div>
<div class="form-group">
<label>Time</label>
<input type="text" class="form-control" id="time" name="time"/>
</div>
<div class="form-group">
<label>PC/PS4</label>
<select v-model="form.pc" type="text" name="pc"
class="form-control" :class="{ 'is-invalid': form.errors.has('pc') }">
<option value="">Select PC/PS4</option>
<option v-for="pc in pcs" :key="pc.id" v-bind:value="pc.name">
{{pc.name}}
</option>
</select>
<has-error :form="form" field="pc"></has-error>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button v-show="!isEdite" type="submit" class="btn btn-primary">Create PC/PS4</button>
<button v-show="isEdite" type="submit" class="btn btn-primary">Update PC/PS4</button>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isEdite: true,
pcs:{},
// today:new Date(),
gamers:{},
form: new Form({
id:'',
name:'',
pc:'',
time: ''
})
}
},
methods: {
editeModel(pc){
this.isEdite = true;
this.form.reset();
this.form.fill(pc);
$('#addNewProduct').modal('show');
},
newModel(){
this.isEdite = false;
this.form.reset();
var today = new Date();
$('#addNewProduct').modal('show');
$(document).ready(function(){
$('#time').timepicker({ timeFormat: 'h:mm',
interval: 60,
minTime: '1',
maxTime: '11',
defaultTime: today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(),
startTime: '1:00',
dynamic: false,
dropdown: true,
scrollbar: true});
});
},
createUser(){
this.$Progress.start();
this.form.post('api/active')
.then(()=>{
Fire.$emit('AfterCreated');
//close model
$('#addNewProduct').modal('hide');
this.$Progress.finish();
toast({
type: 'success',
title: 'Gamer Created successfully'
})
})
.catch(()=>{
this.$Progress.finish();
toast({
type: 'error',
title: 'Sorry We Can not create Gamer'
})
})
},
deleteUser(id){
Swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
// send request
if(result.value)
{
this.form.delete('api/pc/' + id).then(()=>{
Fire.$emit('AfterCreated');
if (result.value) {
Swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
}
})
},
updateUser(){
this.$Progress.start();
this.form.put('api/pc/' + this.form.id)
.then(()=>{
//success
$('#addNewProduct').modal('hide');
Fire.$emit('AfterCreated');
Swal(
'Updated!',
'Your file has been Updated.',
'success'
)
})
.catch(()=>{
this.$Progress.fail();
//failed
toast({
type: 'error',
title: 'Sorry We Can not Update user'
})
})
this.$Progress.finish();
},
loadUsers(){
axios.get("api/pc").then(({data})=>(this.pcs = data.data));
axios.get("api/active").then(({data})=>(this.gamers = data.data));
}
},
created() {
this.$Progress.start();
this.loadUsers();
this.$Progress.finish();
Fire.$on('AfterCreated',() => {
this.loadUsers();
});
// setInterval(() => this.loadUsers(),3000);
}
}
</script>
