Código de DataTables
Código de DataTables
DOCTYPE html>
<html lang="pt-pt">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Supervisores | {{ Auth::user()->name }} - Dashboard</title>
<meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
name="viewport" />
<!--
- favicon
-->
<link rel="shortcut icon" href="/images/logo/Logo-AgroSense-white.png"
type="image/svg+xml">
<!-- CSS Just for demo purpose, don't include it in your project -->
<link rel="stylesheet" href="/css/demo.css" />
<style>
.side2[data-background-color="dark"] {
background: #433c2f !important;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<div class="sidebar side2" data-background-color="dark">
<div class="sidebar-logo">
<!-- Logo Header -->
<div class="logo-header side2" data-background-color="dark">
<a href="/" class="logo">
<img src="/images/logo/Logo-AgroSense-white.png" alt="navbar brand"
class="navbar-brand" height="30" />
</a>
<div class="nav-toggle">
<button class="btn btn-toggle toggle-sidebar">
<i class="gg-menu-right"></i>
</button>
<button class="btn btn-toggle sidenav-toggler">
<i class="gg-menu-left"></i>
</button>
</div>
<button class="topbar-toggler more">
<i class="gg-more-vertical-alt"></i>
</button>
</div>
<!-- End Logo Header -->
</div>
</li>
<li class="nav-section">
<span class="sidebar-mini-icon">
<i class="fa fa-ellipsis-h"></i>
</span>
<h4 class="text-section">Funções</h4>
</li>
<li class="nav-item">
<a data-bs-toggle="collapse" href="#forms">
<i class="fas fa-pen-square"></i>
<p>Formulários</p>
<span class="caret"></span>
</a>
<div class="collapse" id="forms">
<ul class="nav nav-collapse">
@php
$isOrganizationMember = \App\Models\
OrganizationMember::where('user_id', Auth::id())->exists();
@endphp
@if ($isOrganizationMember)
@else
<li>
<a href="/manager/addOrganization">
<span class="sub-item">Cadastrar
organização</span>
</a>
</li>
@endif
<li>
<a href="/manager/addPlace">
<span class="sub-item">Registrar área de
monitoramento</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item active submenu">
<a data-bs-toggle="collapse" href="#tables">
<i class="fas fa-table"></i>
<p>Tabelas</p>
<span class="caret"></span>
</a>
<div class="collapse" id="tables">
<ul class="nav nav-collapse">
@php
$isOrganizationMember = \App\Models\
OrganizationMember::where('user_id', Auth::id())->exists();
@endphp
@if ($isOrganizationMember)
<li class="active">
<a href="/manager/supervisors">
<span class="sub-item">Supervisores</span>
</a>
</li>
@endif
</ul>
</div>
</li>
<li class="nav-item">
<a data-bs-toggle="collapse" href="#maps">
<i class="fas fa-map-marker-alt"></i>
<p>Mapas</p>
<span class="caret"></span>
</a>
<div class="collapse" id="maps">
<ul class="nav nav-collapse">
<li>
<a href="/manager/maps">
<span class="sub-item">Áreas de
monitoramento</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="/manager/charts">
<i class="far fa-chart-bar"></i>
<p>Gráficos</p>
</a>
</li>
@php
$isOrganizationMember = \App\Models\
OrganizationMember::where('user_id', Auth::id())->exists();
@endphp
@if ($isOrganizationMember)
<li class="nav-item">
<a href="/manager/myorganization">
<i class="fas fa-desktop"></i>
<p>Minha Organização</p>
<!--<span class="badge
badge-success">4</span>-->
</a>
</li>
@endif
<li class="nav-item">
<a href="/manager/reports">
<i class="fas fa-file"></i>
<p>Leituras</p>
<span class="badge badge-secondary">{{ $sensores-
>count() }}</span>
</a>
</li>
<li class="nav-item">
<a href="/manager/profile">
<i class="fas fa-user"></i>
<p>Perfil</p>
</a>
</li>
<li class="nav-item">
<a href="/">
<i class="fas fa-home"></i>
<p>Home</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- End Sidebar -->
<div class="main-panel">
<div class="main-header">
<div class="main-header-logo">
<!-- Logo Header -->
<div class="logo-header side2" data-background-color="dark">
<a href="index.html" class="logo">
<img src="/images/logo/Logo-AgroSense-white.png" alt="navbar brand"
class="navbar-brand" height="20" />
</a>
<div class="nav-toggle">
<button class="btn btn-toggle toggle-sidebar">
<i class="gg-menu-right"></i>
</button>
<button class="btn btn-toggle sidenav-toggler">
<i class="gg-menu-left"></i>
</button>
</div>
<button class="topbar-toggler more">
<i class="gg-more-vertical-alt"></i>
</button>
</div>
<!-- End Logo Header -->
</div>
<!-- Navbar Header -->
<nav class="navbar navbar-header navbar-header-transparent navbar-expand-lg
border-bottom">
<div class="container-fluid">
<nav class="navbar navbar-header-left navbar-expand-lg navbar-form nav-
search p-0 d-none d-lg-flex">
<div class="input-group">
<div class="input-group-prepend">
<button type="submit" class="btn btn-search pe-1">
<i class="fa fa-search search-icon"></i>
</button>
</div>
<input type="text" placeholder="Pesquisar..." class="form-
control" />
</div>
</nav>
@auth
<a href="{{ route('logout') }}"
title="Logout"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();"
class="dropdown-item">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}"
method="POST" style="display: none;">
@csrf
</form>
@endauth
{{--
<a class="dropdown-item" href="#">Logout</a>
--}}
</li>
</div>
</ul>
</li>
</ul>
</div>
</nav>
<!-- End Navbar -->
</div>
<div class="container">
<div class="page-inner">
<div class="page-header">
<h3 class="fw-bold mb-3">Supervisores</h3>
<ul class="breadcrumbs mb-3">
<li class="nav-home">
<a href="/">
<i class="icon-home"></i>
</a>
</li>
<li class="separator">
<i class="icon-arrow-right"></i>
</li>
<li class="nav-item">
<a href="#">Tabelas</a>
</li>
<li class="separator">
<i class="icon-arrow-right"></i>
</li>
<li class="nav-item">
<a href="/manager/supervisors">Supervisores</a>
</li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="d-flex align-items-center">
<h4 class="card-title">Adicionar
supervisor</h4>
<button class="btn btn-primary btn-
round ms-auto" data-bs-toggle="modal"
data-bs-target="#addRowModal">
<i class="fa fa-plus"></i>
Adicionar
</button>
</div>
</div>
<div class="card-body">
<!-- Modal Add Supervisor -->
<div class="modal fade" id="addRowModal"
tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog"
role="document">
<form
action="{{ route('supervisors.store') }}" method="POST">
@csrf
<div class="modal-content">
<div class="modal-header
border-0">
<h5 class="modal-title">
<span class="fw-
mediumbold"> Novo</span>
<span class="fw-light">
Supervisor </span>
</h5>
<button type="button"
class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
</div>
<div class="modal-body">
<p class="small">
Crie um novo supervisor
aqui, tenha certeza
de preencher tudo
</p>
<input type="hidden"
name="accountType" value="Supervisor">
<div class="row">
<div class="col-sm-
12">
<div
class="form-group form-group-default">
<label>Nome</label>
<input
id="addName" type="text" class="form-control"
<label>Email</label>
<input
id="addPosition" type="email" name="email"
class="form-control"
<label>Senha</label>
<input
id="addPassword" name="password" type="password"
class="form-control"
placeholder="Senha" required/>
</div>
</div>
</div>
</div>
<div class="modal-footer
border-0">
<button type="submit"
id="addRowButton" class="btn btn-primary">
Adicionar
</button>
<button type="button"
class="btn btn-danger" data-bs-dismiss="modal">Fechar</button>
</div>
</div>
</form>
</div>
</div>
<input type="hidden"
id="editUserId" name="user_id">
<div class="modal-content">
<div class="modal-header
border-0">
<h5 class="modal-
title">
<span class="fw-
mediumbold"> Editar</span>
<span class="fw-
light"> Supervisor </span>
</h5>
<button type="button"
class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
</div>
<div class="modal-body">
<p class="small">Editar
informações do supervisor.</p>
<div class="row">
<div class="col-sm-
12">
<div
class="form-group form-group-default">
<label>Editar nome</label>
<input
id="editName" type="text" class="form-control" name="name" required />
</div>
</div>
<div class="col-md-
6 pe-0">
<div
class="form-group form-group-default">
<label>Editar email</label>
<input
id="editEmail" type="email" class="form-control" name="email" required />
</div>
</div>
<div class="col-md-
6">
<div
class="form-group form-group-default">
<label>Editar senha</label>
<input
id="editPassword" name="password" type="password" class="form-control"
placeholder="Nova Senha (opcional)" />
</div>
</div>
</div>
</div>
<div class="modal-footer
border-0">
<button type="submit"
id="editRowButton" class="btn btn-primary">Guardar</button>
<button type="button"
class="btn btn-danger" data-bs-dismiss="modal">Fechar</button>
</div>
</div>
</form>
</div>
</div>
<div class="table-responsive">
<table id="add-row" class="display
table table-striped table-hover">
<thead>
<tr>
<th>Nome</th>
<th>Função</th>
<th>Área de
monitoramento</th>
<th style="width:
10%">Ações</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nome</th>
<th>Função</th>
<th>Àrea de
monitoramento</th>
<th>Ações</th>
</tr>
</tfoot>
<tbody>
@foreach($users as $user)
<tr>
<td>{{ $user-
>name }}</td>
<td>{{ $user-
>accountType }}</td>
<td>
@php
// Busca a área
cujo user_id corresponde ao ID do usuário atual
$userArea =
$areas->where('user_id', $user->id)->first();
@endphp
{{ $userArea ?
$userArea->name : 'Nenhuma' }}
</td>
<td>
<div class="form-
button-action">
<button
type="button" class="btn btn-link btn-primary btn-lg edit-button"
data-
id="{{ $user->id }}"
data-name="{{
$user->name }}"
data-
email="{{ $user->email }}"
title="Editar"
data-bs-
toggle="modal"
data-bs-
target="#editRowModal">
<i class="fa
fa-edit"></i>
</button>
<button
type="button" class="btn btn-link btn-danger" data-bs-toggle="tooltip"
onclick="confirmRemoval({{ $user->id }})" title="Eliminar">
<i
class="fa fa-times"></i>
</button>
<form
action="{{ route('supervisor.destroy', $user->id) }}" method="POST" id="delete-
form-{{ $user->id }}">
@csrf
@method('DELETE')
</form>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid d-flex justify-content-between">
<nav class="pull-left">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="/">
AgroSense
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Ajuda </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Termos e privacidade </a>
</li>
</ul>
</nav>
<div class="copyright">
2024, made with <i class="fa fa-heart heart text-
danger"></i> by
<a href="/">AgroSense</a>
</div>
<!--
<div>
Distributed by
<a target="_blank"
href="https://themewagon.com/">ThemeWagon</a>.
</div>
-->
</div>
</footer>
</div>
</div>
<!-- Core JS Files -->
<script src="/js/core/jquery-3.7.1.min.js"></script>
<script src="/js/core/popper.min.js"></script>
<script src="/js/core/bootstrap.min.js"></script>
<!-- Chart JS -->
<script src="/js/plugin/chart.js/chart.min.js"></script>
<!-- jQuery Scrollbar -->
<script src="/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<!-- Kaiadmin JS -->
<script src="/js/kaiadmin.min.js"></script>
<!-- Kaiadmin DEMO methods, don't include it in your project! -->
<script src="/js/setting-demo2.js"></script>
$("#multi-filter-select").DataTable({
pageLength: 5,
initComplete: function () {
this.api()
.columns()
.every(function () {
var column = this;
var select = $(
'<select class="form-select"><option
value=""></option></select>'
)
.appendTo($(column.footer()).empty())
.on("change", function () {
var val = $.fn.dataTable.util.escapeRegex($
(this).val());
column
.search(val ? "^" + val + "$" : "", true,
false)
.draw();
});
column
.data()
.unique()
.sort()
.each(function (d, j) {
select.append(
'<option value="' + d + '">' + d +
"</option>"
);
});
});
},
});
// Add Row
$("#add-row").DataTable({
pageLength: 5,
});
var action =
'<td> <div class="form-button-action"> <button type="button" data-
bs-toggle="tooltip" title="" class="btn btn-link btn-primary btn-lg" data-original-
title="Edit Task"> <i class="fa fa-edit"></i> </button> <button type="button" data-
bs-toggle="tooltip" title="" class="btn btn-link btn-danger" data-original-
title="Remove"> <i class="fa fa-times"></i> </button> </div> </td>';
$("#addRowButton").click(function () {
$("#add-row")
.dataTable()
.fnAddData([
$("#addName").val(),
$("#addPosition").val(),
$("#addPassword").val(),
action,
]);
$("#addRowModal").modal("hide");
});
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const editButtons = document.querySelectorAll(".edit-button");
editButtons.forEach(button => {
button.addEventListener("click", function () {
const userId = this.getAttribute("data-id");
const userName = this.getAttribute("data-name");
const userEmail = this.getAttribute("data-email");
document.getElementById("editUserId").value = userId;
document.getElementById("editName").value = userName;
document.getElementById("editEmail").value = userEmail;
<!--SweetAlert2-->
<script src="{{ asset('swalert/[email protected]') }}"></script>
@if (session('success'))
<script>
Swal.fire({
title: 'Supervisor',
text: '{{ session('success') }}',
icon: 'success',
width: 400,
heightAuto: false,
showConfirmButton: false,
timer: 5000,
});
</script>
@endif
@if (session('updated'))
<script>
Swal.fire({
title: 'Supervisor',
text: '{{ session('updated') }}',
icon: 'success',
width: 400,
heightAuto: false,
showConfirmButton: false,
timer: 5000,
});
</script>
@endif
@if (session('supervisor_deleted'))
<script>
Swal.fire({
title: 'Supervisor',
text: '{{ session('supervisor_deleted') }}',
icon: 'success',
width: 400,
heightAuto: false,
showConfirmButton: false,
timer: 5000,
});
</script>
@endif
@if (session('updated_not'))
<script>
Swal.fire({
title: 'Supervisor',
text: '{{ session('updated_not') }}',
icon: 'error',
width: 400,
heightAuto: false,
showConfirmButton: false,
timer: 5000,
});
</script>
@endif
@if (session('member_not'))
<script>
Swal.fire({
title: 'Organização',
text: '{{ session('member_not') }}',
icon: 'error',
width: 400,
heightAuto: false,
showConfirmButton: false,
timer: 5000,
});
</script>
@endif
<script>
function confirmRemoval(userId) {
Swal.fire({
title: 'Tem certeza?',
text: "Você realmente deseja eliminar este supervisor?",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#3085d6',
confirmButtonText: 'Sim, excluir!',
cancelButtonText: 'Cancelar'
}).then((result) => {
if (result.isConfirmed) {
document.getElementById('delete-form-' + userId).submit();
}
});
}
</script>
</body>
</html>