Develop Reference

How to display detail view on separate page using Vuejs

I have a page where there is multiple cases and when i click on case it shows the detail against this case on same page.
I have attached the screen shot
as you can see two cases are showing 1) ublox and 2) test case when i click any of them you can see on top detail against this case is appeared.
But I do not want to display these detail on this page I wan to display these detail on separate page when i click any of these case. I am new to vuejs can anyone please help me on this?
Your help will be really appreciated.
My code of vue:
<template>
<div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /.card-header -->
<div class="col-lg-6">
<div class="card">
<div class="card-body table-responsive p-0" style="height: 300px;">
<table class="table table-hover">
<thead>
<tr>
<th>Case Name</th>
</tr>
</thead>
<tbody>
<tr v-for="kase in cases" :key="kase.id" v-on:click="clickList(kase)">
<td>{{kase.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-info">
<div class="card-header">
<h3 class="card-title">Add New Case</h3>
</div>
<!-- /.card-header -->
<!-- form start -->
<form class="form-horizontal" #submit.prevent="onSubmit" #keydown="form.errors.clear()">
<div class="card-body" style="height: 239px;">
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" required autocomplete="name" autofocus placeholder="Name" v-model="form.name">
<span class="invalid-feedback d-block" role="alert" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-info" :disabled="form.errors.any()">Add Group</button>
</div>
<!-- /.card-footer -->
</form>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
</template>
<script>
export default {
data() {
return {
cases: [],
lists: [],
form: new Form({
'name': ''
})
}
},
created() {
axios.get('/new-case')
.then(({data}) => this.cases = data);
},
methods: {
clickList (Kase) {
axios.get(`/case-log/${Kase.id}`).then(response => this.lists = response.data);
},
onSubmit(){
this.form
.post('/new-case')
.then(kase => this.cases.push(kase));
}
}
}
</script>
and my web.php
Route::get('/case-log/{id}', 'CaseLogController#index');
My Controller:
class CaseLogController extends Controller
{
public function index($id)
{
$case = kase::with('sockets')->find($id);
return $case->sockets;
}
}
your help will be appreciated.
Thanks in advance
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
lists: [],
}
},
created() {
const uniqueIdentifierToFetchTheDetailsFromTheDatabase this.$route.params.id
axios.get(`/case-log/${Kase.id}`).then(response => this.lists = response.data);
},
}
</script>
This is updated:
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
lists: [],
}
},
created() {
const id = this.$route.params.id
axios.get(`/case-log/${Kase.id}`).then(response => this.lists = response.data);
},
}
</script>

You will have to define your routes using Vue-router. The documentation shows you how to get started.
Then you need to extract the template of the details into a component, say DisplayDetailView.vue
So you will have:
DisplayDetailView.vue
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
.....
When you click on the detail, it will navigate you to the component where details are shown.
Clicking on Ublox for example, may have code attached to it as follows
ComponentWithCaseName.vue
<div class="col-lg-6">
<div class="card">
...
<tr v-for="kase in cases" :key="kase.id" v-on:click="handleCaseClick"> // add click handler
<td>{{kase.name}}</td>
</tr>
......
</div>
</div>
And you have a method in the component where the case name is clicked
methods: {
handleCaseClick() { // this pushes it to the component that has the display view details i.e DisplayDetailView.vue
this.$router.push(`/path-to-component-for-view-details/${uniqueIdentifierToFetchTheDetailsFromTheDatabase}')
}
}
In the DisplayDetailView.vue component, you have to grab the unique identifier from the url, using the created/mounted hook, (in this case, I use the created lifecycle hook, but mounted will also work) that you will use to make the database call that will populate the template.
DisplayDetailView.vue
export default {
data() {
return {
cases: [],
lists: [],
}
},
created() {
const uniqueIdentifierToFetchTheDetailsFromTheDatabase this.$route.params.uniqueIdentifierToFetchTheDetailsFromTheDatabase // whatever name you put in the route `e.g if the route is `/path-to-component-for-view-details/:caseId`, you do this.$route.params.caseId
axios.get(`/case-log/${uniqueIdentifierToFetchTheDetailsFromTheDatabase}`).then(response => this.lists = response.data);
},
}
This is the general gist of things. You can figure the rest from here. This will provide you more details.

How to use v-for in nested loops?

I am trying to filter a JSON object (the object is named 'post' in my example) using the VueJs2 framework consuming a data object from a Wordpress REST API. I have nested arrays (meta data tags) associated with my posts that I want to filter/search through when the user types a search query in my input element:
JSFIDDLE link
HTML:
<div id="app" class="container" style="padding-top: 2em;">
<input v-model="searchText">
<table class="table table-striped" v-if="posts">
<thead>
<tr>
<th>Title</th>
<th>Product Type</th>
</tr>
</thead>
<tr v-for="post in itemsSearched">
<td>{{post.title.rendered}}</td>
<!-- this part is probably not correct -->
<td v-for="post._embedded['wp:term'][1] in itemsSearched"></td>
</tr>
</table>
</div>
JS:
var vm = new Vue({
el: '#app',
data: {
message: 'hello world',
searchText: '',
posts: []
},
computed : {
itemsSearched : function(){
var self = this;
if( this.searchText == ''){
return this.posts;
}
return this.posts.filter(function(post){
return post.title.rendered.indexOf(self.searchText) >= 0;
//what to put here to filter the tags ??
});
}
},
created: function(){
$.get('https://wordpress-dosstx.c9users.io/wp-json/wp/v2/products/' + '?_embed=true')
.done(function(data) {
vm.posts = data;
});
}
});
If you can provide some advice on how to proceed that would be great. Thank you.

I updated your fiddle. You need to loop through the item of the array not the entire searched array.
<div id="app" class="container" style="padding-top: 2em;">
<input v-model="searchText">
<table class="table table-striped" v-if="posts">
<thead>
<tr>
<th>Title</th>
<th>Product Type</th>
<th>Tags</th>
</tr>
</thead>
<tr v-for="post in itemsSearched">
<td>
<a :href="post.link" target="_blank">
<img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url"
style="width:75px;height:75px;"/>
</a>
</td>
<td>
<a :href="post.link" target="_blank" v-html="post.title.rendered"></a><br/>
<div v-html="post.content.rendered"></div>
</td>
<td v-for="item in post._embedded['wp:term']">
<div v-for="subItem in item">
<a :href="subItem.link">{{subItem.name}}</a>
</div>
</td>
</tr>
</table>
</div>

<div v-for="item in parentObject">
<div v-for="item2 in item.childObject1">
<div v-for="item3 in item2.chileObject2"></div>
</div>
</div>
i am creating a something like this
parent
-name:
--childObject1
--mySon
---childObject2
---myGrandChild

How to save dynamic html-code in database for specific user

I have javascript code that works a lot like this fiddle: http://jsfiddle.net/nj4N4/7/
On my page it looks like this: image.
When you click on the "add a year" button, a table that looks like year2 pops upp above the previous year.
I now want this to be saved in the database so when you update the page, the specific user that is logged in still have the same quantity of years shown as before he/she updated the site (or logged out). My question is how I could do that, and where to begin. I am using the mean stack (mongodb, node, express, angular).
I have created a database named year and when you click on the "add a year" button it adds a new year in that database, but it only has an Id for now. This is the code:
HTML:
<div class="row">
<button class="btn btn-default addyear" ng-click="vm.addYear();" onclick="add_fields();">Add a year</button><br><br><br>
<div class="row" >
<div id="year6"></div>
<div id="year5"></div>
<div id="year4"></div>
<div id="year3"></div>
<div id="year2"></div>
<div class="panel panel-default" >
<div class="panel-heading "><B> YEAR 1</B>
<a href="#" class= "show" id="hide" >Show less</a>
</div>
<div class="panel-body hideyear1 " >
<div class="col-xs-6">
<table class="table table-striped">
<tr >
<td><b>Course code</b></td>
<td><b>Course name</b></td>
<td><b>Block</b></td>
<td><b>Level</b></td>
<td><b>HP</b></td>
</tr>
<tr>
<td>TDDD27</td>
<td>Webprog</td>
<td>1</td>
<td>A</td>
<td>6</td>
</tr>
<tr>
<td>TEIE06</td>
<td>IFP</td>
<td>4</td>
<td>A</td>
<td>6</td>
</tr>
</table>
</div>
<div class="col-xs-6">
<table class="table table-striped">
<tr>
<td><b>Course code</b></td>
<td><b>Course name</b></td>
<td><b>Block</b></td>
<td><b>Level</b></td>
<td><b>HP</b></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
<script>
var year = 1;
var limit = 7;
function add_fields() {
year++;
if (year == limit) {
exit;
}
else {
var newdiv = document.createElement('div');
if(year==2) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> Show less </div> <div class="panel-body hideyear1 "> <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year2').appendChild(newdiv);
}
if(year==3) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 " > <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr></table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year3').appendChild(newdiv);
}
if(year==4) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 " > <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year4').appendChild(newdiv);
}
if(year==5) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 " > <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> <tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year5').appendChild(newdiv);
}
if(year==6) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 "> <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> <tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year6').appendChild(newdiv);
$(".addyear").hide();
index.controller:
(function () {
'use strict';
angular
.module('app')
.controller('Home.IndexController', Controller);
function Controller(UserService, YearService, FlashService) {
var vm = this;
vm.user = null;
vm.addYear = addYear;
initController();
function initController() {
UserService.GetCurrent().then(function (user) {
vm.user = user;
});
}
function addYear() {
YearService.Create()
.then(function () {
FlashService.Success('Year saved!');
})
.catch(function (error) {
FlashService.Error(error);
});
}
}
})();
year.service.js
(function () {
'use strict';
angular
.module('app')
.factory('YearService', Service);
function Service($http, $q){
var service = {};
service.Create = Create;
return service;
function Create() {
return $http.post('/api/year').then(handleSuccess, handleError);
}
api/year.controller
var YearService = require('services/year.service');
router.post('/', createYear);
module.exports = router;
function createYear(req, res){
YearService.create(req.body)
.then(function(){
res.sendStatus(200);
})
.catch(function(err) {
res.status(400).send(err);
});
}
services/year.service
var db = mongo.db(connectionString, { native_parser: true });
db.bind('years');
var service = {};
service.create = create;
module.exports = service;
function create(yearParam) {
var deferred = Q.defer();
createYear();
function createYear() {
var year = yearParam;
db.years.insert(
year,
function (err, doc) {
if (err) deferred.reject(err);
deferred.resolve();
});
}
return deferred.promise;
}
Im sorry if this is to much code but since I don't know where to start or how to do this, I also don't know which code that is relevant.

Ok ,you need to separate the concerns, the Angular way.
It looks like you are only leveraging the $http resource requests of Angular where you could have generated the whole table with very little effort.
The goal you should have is to build a single Object of nested arrays (which we call a Model) that will hold each year's data which can easily be converted to JSON or back to an javascript Object.
Structure that can hold all of the information you need. Having a Model like this you can start building your visual elements. Based on this model. To add another year you would simply push an array of variables onto this model and your tables and visual elements update automatically through ng-repeat and ng-model directives.
Since it is much easier to manipulate a Model you can focus on the visual elements and styling instead of trying to remember if you copied all the table elements or if you have missing tags which will break the page.
Lastly a model like this can be used without any conversion directly in your $http resource request to update your database. The JSON conversion happens automatically.
You dont need the YearService, year.service, createyear deffered callbacks, or the massive javascript add_fields function.
You can simplify your whole app into two files: index.html and app.js.
Hold the fetch and save data in your main app controller as $scope functions that can be called directly from buttons on the page.
Get rid of the services and factories, just write one function saveModel(); and getModel(); and to add a year addYear() to manipulate the model.
Lastly in your html body you only need one table of one line of headers and the rows are generate from an ng-repeat. Wrap this table with a div for the years which you also ng-repeat on the years top level array.
Your array will look something like this:
[ "2000" : [{ course : "code", coursename : "webprog", block : "1"},
{ course : "code1", coursename : "webprog1", block : "2"}],
"2001" : [{ course : "code", coursename : "webprog", block : "1"},
{ course : "code1", coursename : "webprog1", block : "2"}]
]

Laravel 5.2 + Angular JS UI Routing not working

I am developing a web application with Angular as frond end and Laravel 5.2 as back end.
this is my laravel code.
Routes.php
Route::get('Aemployees',['uses'=>'AdminController#AngEmployeeList']);
AdminController.php
public function AngEmployeeList(){
return View::make('admin.angular.anguemployees');
}
View( anguemployees.blade.php)
#extends('admin.template')
#section('title', 'Angular Employees')
#section('content')
<div class="col-xs-12" ng-controller="Employees">
<section class="content-header">
<h1>Data Tables</h1>
<span>Add new</span>
</section>
<div class="box">
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Email</th>
<th>Updated At</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td ng-bind="employee.emp_name"></td>
<td ng-bind="employee.emp_mobile"></td>
<td ng-bind="employee.emp_email"></td>
<td ng-bind="employee.updated_at"></td>
<td>
<span><a class="editThis" ng-click="edit(employee.pk_emp_id)"></a></span>
<span><a class="dltThis" ng-click="deleteItem(employee.pk_emp_id)"></a></span>
</td>
</tr>
</tbody>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- /.col -->
#endsection
Angularscripts.js
var EmployeeApp = angular.module('EmployeeApp',['ui.router']);
EmployeeApp.config(function($stateProvider,$urlRouteProvider){
$stateProvider.state('employees',{templateUrl : '/Aemployees'});
});
EmployeeApp.controller('Employees',function($scope,$http){
$http.get(BASEURL+'/getemployees')
.success(function(response){
$scope.employees = response;
});
$scope.deleteItem = function (item_id){
if(confirm("Are you sure want to delete ?") == true){
$http.post(BASEURL+'/deletemployees',{pk_id:item_id})
.success(function(response){
$scope.employees = response;
});
}
}
});
The Output is not working perfectly and getting an error in console.
How can I fix this issue ?
Is the any error in my code ?

Ajax request does not fire on click

I am trying to use Ajax to post some data to a php script. I want the ajax request to be triggered when the delete button is clicked, and then delete the div where the click button was clicked.
Here is the code:
<div class="container content">
<div class="row">
<div class="col-md-12">
<div class="panel panel-blue margin-bottom-40">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-tasks"></i>Management Panel</h3>
</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Care Home</th>
<th>Last Login</th>
<th>Number of Log-ins</th>
<th>Last Data Upload</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
#foreach($employees as $employee)
<tr id="tr{{$employee->email}}">
<td class="fn">{{$employee->username}}</td>
<td class="ln">{{$employee->username}}</td>
<td class="email">{{$employee->email}}</td>
<td class="carehome_name">{{$employee->carehome_name}}</td>
<td class="last_login">{{$employee->last_login}}</td>
<td class="n_sessions">{{$employee->n_sessions}}</td>
<td class="last_upload">{{$employee->last_upload}}</td>
<td><button class="btn btn-danger btn-xs" id="{{$employee->email}}"><i class="fa fa-trash-o"></i> Delete</button></span></td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
And here is the Javascript:
<script type="javscript">
$('.btn-danger').on('click', function(e){
e.preventDefault();
var id = $(this).attr('id');
alert(id);
$.ajax({
url: '../../controllers/userManagementAjax.php',
type: 'post',
data: {'action': 'delete', 'email': id},
success: function(data, status) {
if(data == "ok") {
$('#tr'+'id').remove();
}
},
error: function(xhr, desc, err) {
console.log(xhr);
console.log("Details: " + desc + "\nError:" + err);
}
}); // end ajax call
});
</script>
I've tried a number of things and nothing works, the click event is not event logged to the the console.
Thank you all for your suggestions!

Please take a look here.
http://jsfiddle.net/py6PJ/
I removed your PHP loop, it seems to click just fine. Please confirm.
<div class="container content">
<div class="row">
<div class="col-md-12">
<div class="panel panel-blue margin-bottom-40">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-tasks"></i>Management Panel</h3>
</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Care Home</th>
<th>Last Login</th>
<th>Number of Log-ins</th>
<th>Last Data Upload</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr id="tr{{$employee->email}}">
<td class="fn">{{$employee->username}}</td>
<td class="ln">{{$employee->username}}</td>
<td class="email">{{$employee->email}}</td>
<td class="carehome_name">{{$employee->carehome_name}}</td>
<td class="last_login">{{$employee->last_login}}</td>
<td class="n_sessions">{{$employee->n_sessions}}</td>
<td class="last_upload">{{$employee->last_upload}}</td>
<td><button class="btn btn-danger btn-xs" id="{{$employee->email}}"><i class="fa fa-trash-o"></i> Delete</button></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Javascript is the same.