Gecko [ www.foryou-vip.com ]

Name	Size	Permission	Date
actives.blade.php	946 B	-rwxrwxrwx	2022-04-21 13:44
index.blade.php	25.71 KB	-rwxrwxrwx	2022-04-21 13:44
team.blade.php	20.4 KB	-rwxrwxrwx	2022-04-21 13:44

Rename

@extends('layouts.app', ['activePage' => 'teams', 'titlePage' => __('Gestion des équipes')])

@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-4" class="teamsContainer">
            <div class="card">
              <div class="card-header card-header-primary">
                <h4 class="card-title ">Équipes</h4>
                <p class="card-category">Gérez les équipes</p>
              </div>
              
              <div class="card-body">
                <div class="row">
                  <div class="col-12 text-right">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
                      Ajouter une équipe
                    </button>
                  </div>
                </div>
                <div class="table-responsive">
                  <table class="table">
                    <thead class=" text-primary">
                      <tr>
                        <th>
                          Nom
                        </th>
                        <th class="text-right">
                          Modifier
                        </th>
                      </tr>
                    </thead>
                    <tbody class="teamsTable">
                      @foreach($teams as $team)
                        <tr id="{{$team->id}}">
                          <td>
                            <a href="/teams/{{$team->id}}">{{$team->team_name}}</a>
                          </td>
                          <td class="td-actions text-right">
                                <a rel="tooltip" class="btn btn-success btn-link" data-toggle="modal" data-target="#updateTeamModal" id="update" href="#" data-original-title="" data-team-data="{{$team}}" data-team-id="{{$team->id}}">
                                <i class="material-icons" id="update" data-toggle="modal" data-target="#updateTeamModal" data-team-data="{{$team}}" data-team-id="{{$team->id}}">edit</i>
                                <div class="ripple-container"></div>
                              </a>
                          </td>
                        </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-header card-header-primary">
              <h4 class="card-title ">Intervenants</h4>
              <p class="card-category">Gérez la liste des intervenants</p>
            </div>
            
            <div class="card-body">
              <div class="row">
                <div class="col-12 text-right">
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addMemberModal">
                    Ajouter un intervenant
                  </button>
                </div>
              </div>
              <div class="table-responsive">
                <table class="table">
                  <thead class=" text-primary">
                    <tr>
                      <th>
                        Nom
                      </th>
                      <th class="text-right">
                        Modifier
                      </th>
                    </tr>
                  </thead>
                  <tbody class="membersTable">
                    @foreach($members as $member)
                      <tr id="{{$member->id}}">
                        <td>
                          {{$member->name}}
                        </td>
                        <td class="td-actions text-right">
                              <a rel="tooltip" class="btn btn-success btn-link" data-toggle="modal" data-target="#updateMemberModal" id="update" href="#" data-original-title="" data-member-data="{{$member}}" data-member-id="{{$member->id}}">
                              <i class="material-icons" id="update" data-toggle="modal" data-target="#updateMemberModal" data-member-data="{{$member}}" data-member-id="{{$member->id}}">edit</i>
                              <div class="ripple-container"></div>
                            </a>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-header card-header-primary">
              <h4 class="card-title ">Véhicules</h4>
              <p class="card-category">Gérez la liste des véhicules</p>
            </div>
            
            <div class="card-body">
              <div class="row">
                <div class="col-12 text-right">
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#carAddModal">
                    Ajouter un véhicule
                  </button>
                </div>
              </div>
              <div class="table-responsive">
                <table class="table">
                  <thead class=" text-primary">
                    <tr>
                      <th>
                        Nom
                      </th>
                      <th>
                        Matricule
                      </th>
                      <th class="text-right">
                        Modifier
                      </th>
                    </tr>
                  </thead>
                  <tbody class="carsTable">
                    @foreach($cars as $car)
                      <tr id="{{$car->id}}">
                        <td>
                          {{$car->car_name}}
                        </td>
                        <td>
                          {{$car->car_matricule}}
                        </td>
                        <td class="td-actions text-right">
                              <a rel="tooltip" class="btn btn-success btn-link" data-toggle="modal" data-target="#updateCarModal" id="update" href="#" data-original-title="" data-car-data="{{$car}}" data-car-id="{{$car->id}}">
                              <i class="material-icons" id="update" data-toggle="modal" data-target="#updateCarModal" data-car-data="{{$car}}" data-car-id="{{$car->id}}">edit</i>
                              <div class="ripple-container"></div>
                            </a>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="card-body">
      
      <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">Ajouter une équipe</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="addTeamForm" method="POST" action="teams/add">
                {{ @csrf_field() }}
                <div class="form-row  col-md-10">
                  <div class="col">
                    <input type="text" name="team_name" class="form-control" placeholder="Nom">
                  </div>
                </div>
                <div class="form-group col-md-10">
                  <label for="exampleFormControlSelect1">Responsable</label>
                  <select name="user_id" class="form-control">
                    @foreach($users as $user)
                      <option value="{{$user->id}}">{{$user->name}}</option>
                    @endforeach
                  </select>
                </div>
                <div class="form-group col-md-10">
                  <label for="exampleColorInput" class="form-label">Couleur</label>
                  <input name="color" type="color" class="form-control form-control-color" id="exampleColorInput" value="#00aaf1" title="Choose your color">
                </div>

<div class="form-group row">
                  <div class="col-sm-10">
                    <input type="password" name="password" class="form-control" id="inputPassword" placeholder="Mot de passe">
                  </div>
                </div>
                
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                  <button type="submit" class="btn btn-primary" id="addTeam">Ajouter</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="card-body">
      
      <div class="modal fade" id="updateTeamModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">Modifier les informations de l'équipe</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body" id="updateTeamFormContainer">
              {{-- The form will rendered here --}}
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="card-body">
      
      <div class="modal fade" id="addMemberModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">Ajouter un intervenant</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="addMemberForm" method="POST" action="member/add">
                {{ @csrf_field() }}
                <div class="form-row  col-md-10">
                  <div class="col">
                    <input type="text" name="member_name" class="form-control" placeholder="Nom">
                  </div>
                </div>
                
                <div class="form-group col-md-10">
                  <input type="email" name="email" class="form-control" id="inputEmail4" placeholder="Email">
                </div>
                <div class="form-group row">
                  <div class="col-sm-10">
                    <input type="password" name="password" class="form-control" id="inputMemberPassword" placeholder="Mot de passe">
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                  <button type="submit" class="btn btn-primary" id="addMember">Ajouter</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      
      <div class="modal fade" id="updateMemberModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">Modifier les informations de l'intervenant</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body" id="updateMemberFormContainer">
              {{-- The form will rendered here --}}
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="card-body">
        
        <div class="modal fade" id="carAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Ajouter un véhicule</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <form id="addCarForm" method="POST" action="car/add">
                  {{ @csrf_field() }}
                  <div class="form-row  col-md-10">
                    <div class="col">
                      <input type="text" name="car_name" class="form-control" placeholder="Nom">
                    </div>
                  </div>
                  <div class="form-row  col-md-10">
                    <div class="col">
                      <input type="text" name="car_matricule" class="form-control" placeholder="Matricule">
                    </div>
                  </div>
                  
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                    <button type="submit" class="btn btn-primary" id="addCar">Ajouter</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        
        <div class="modal fade" id="updateCarModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modifier les informations du véhicule</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body" id="updateCarFormContainer">
                {{-- The form will rendered here --}}
              </div>
            </div>
          </div>
        </div>
      </div>
    
  </div>
@endsection

@push('js')
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="form-group col-md-10">
            <input type="password" name="password" class="form-control" id="inputPassword" placeholder="Mot de passe">
          </div>
          
          <div class="modal-footer form-row  col-md-12">
            <button type="button" class="btn btn-secondary col-md-3" data-dismiss="modal">Fermer</button>
            <button type="button" class="btn btn-danger col-md-3"  id="deleteTeam">Supprimer</button>
            <button type="submit" class="btn btn-primary col-md-4" id="updateTeam">Mettre à jour</button>
          </div>
        </form>
      `;
    }

function renderUpdateMemberForm(member){
      return `
        <form  id="updateMemberForm" method="POST" action="member/update/${member.id}">
          {{ @csrf_field() }}
          <div class="form-row col-md-10">
            <div class="col">
              <input type="text" name="member_name" class="form-control" placeholder="Nom" value=" ${member.name}">
            </div>
          </div>
          <div class="form-group col-md-10">
            <input type="email" name="email" class="form-control" id="inputEmail5" placeholder="Email"  value="${member.email}">
          </div>
          <div class="form-group row">
            <div class="col-sm-10">
              <input type="password" name="password" class="form-control" id="inputMemberPassword" placeholder="Mot de passe">
            </div>
          </div>
          <div class="modal-footer form-row  col-md-12">
            <button type="button" class="btn btn-secondary col-md-3" data-dismiss="modal">Fermer</button>
            <button type="button" class="btn btn-danger col-md-3"  id="deleteMember">Supprimer</button>
            <button type="submit" class="btn btn-primary col-md-4" id="updateMember">Mettre à jour</button>
          </div>
        </form>
      `;
    }

function renderUpdateCarForm(car){
      return `
        <form  id="updateCarForm" method="POST" action="car/update/${car.id}">
          {{ @csrf_field() }}
          <div class="form-row col-md-10">
            <div class="col">
              <input type="text" name="car_name" class="form-control" placeholder="Nom" value=" ${car.car_name}">
            </div>
          </div>
          <div class="form-row col-md-10">
            <div class="col">
              <input type="text" name="car_matricule" class="form-control" placeholder="Nom" value=" ${car.car_matricule}">
            </div>
          </div>
          <div class="modal-footer form-row  col-md-12">
            <button type="button" class="btn btn-secondary col-md-3" data-dismiss="modal">Fermer</button>
            <button type="button" class="btn btn-danger col-md-3"  id="deleteCar">Supprimer</button>
            <button type="submit" class="btn btn-primary col-md-4" id="updateCar">Mettre à jour</button>
          </div>
        </form>
      `;
    }

window.onload = function() 
    {
      
      let params = (new URL(document.location)).searchParams;
      let message = params.get('message');
      if (message === "teamAlreadyExist") {
        Swal.fire({
          icon: 'error',
          title: 'Attention',
          text: 'L\'équipe que vous avez saisi existe déjà.'
        })
      }else if(message === "carAlreadyExist"){
        Swal.fire({
          icon: 'error',
          title: 'Attention',
          text: 'Le véhicule que vous avez saisi existe déjà.'
        })
      }else if(message === "emptyField"){
        Swal.fire({
          icon: 'error',
          title: 'Attention',
          text: 'Un ou plusieurs champs sont vides.'
        })
      }else if(message ==="teamNotFound"){
        Swal.fire({
          icon: 'error',
          title: 'Attention',
          text: 'Équipe introuvable.'
        })
      }else if(message ==="userNotFound"){
        Swal.fire({
          icon: 'error',
          title: 'Attention',
          text: 'Intervenant introuvable.'
        })
      }

let teamsTable = document.querySelector(".teamsTable");
      let membersTable = document.querySelector(".membersTable");
      let carsTable = document.querySelector(".carsTable");

let updateTeamFormContainer = document.getElementById("updateTeamFormContainer");
      let updateMemberFormContainer = document.getElementById("updateMemberFormContainer");
      let updateCarFormContainer = document.getElementById("updateCarFormContainer");

teamsTable.addEventListener('click', function(event) {
        if (event.target.id === "update") {

let teamData = JSON.parse(event.target.dataset.teamData);
          updateTeamFormContainer.innerHTML = renderUpdateTeamForm(teamData);;
          
          let updateTeamModale = document.getElementById('updateTeamForm')
          let nameInput = updateTeamModale.querySelector("[name='team_name']")
          let userIdSelect = updateTeamModale.querySelector("[name='user_id']")
          let passwordInput = updateTeamModale.querySelector("[name='password']")
          let updateTeamBtn = updateTeamModale.querySelector('#updateTeam');
          let deleteTeamBtn = updateTeamModale.querySelector('#deleteTeam');
          
          let options = userIdSelect.options;
          for (let i = 0; i < options.length; i++) {
            if (options[i].value == teamData.user_id) {
              userIdSelect.value = options[i].value;
            }
          }

updateTeamBtn.addEventListener('click', function(event){
            if (nameInput.value.trim() == '' && passwordInput.value.trim() == '') {
              event.preventDefault();
              Swal.fire({
                icon: 'error',
                title: 'Attention',
                text: 'Un ou plusieurs champs sont vides.'
              })
            }
          })

deleteTeamBtn.addEventListener('click', function(event){
            Swal.fire({
              title: 'Attention',
              text: "Voulez-vous vraiment supprimer l'équipe "+ teamData.team_name,
              icon: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Confirmer', 
              cancelButtonText: 'Annuler'
            }).then((result) => {
              if (result.isConfirmed) {
                window.location = "/teams/delete/" + teamData.id;
              }
            })
          })
        }
      })

membersTable.addEventListener('click', function(event) {
        if (event.target.id === "update") {

let memberData = JSON.parse(event.target.dataset.memberData);
          updateMemberFormContainer.innerHTML = renderUpdateMemberForm(memberData);;
          
          let updateMemberModale = document.getElementById('updateMemberForm')
          let nameInput = updateMemberModale.querySelector("[name='member_name']")
          let passwordInput = updateMemberModale.querySelector("[name='password']")
          let updateMemberBtn = updateMemberModale.querySelector('#updateMember');
          let deleteMemberBtn = updateMemberModale.querySelector('#deleteMember');

updateMemberBtn.addEventListener('click', function(event){
            if (nameInput.value.trim() == '' && passwordInput.value.trim() == '') {
              event.preventDefault();
              Swal.fire({
                icon: 'error',
                title: 'Attention',
                text: 'Un ou plusieurs champs sont vides.'
              })
            }
          })

deleteMemberBtn.addEventListener('click', function(event){
            Swal.fire({
              title: 'Attention',
              text: "Voulez-vous vraiment supprimer l'intervenant "+ memberData.name,
              icon: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Confirmer', 
              cancelButtonText: 'Annuler'
            }).then((result) => {
              if (result.isConfirmed) {
                window.location = "/member/delete/" + memberData.id;
              }
            })
          })
        }
      })

carsTable.addEventListener('click', function(event) {
        if (event.target.id === "update") {

let carData = JSON.parse(event.target.dataset.carData);
          updateCarFormContainer.innerHTML = renderUpdateCarForm(carData);;
          
          let updateCarModale = document.getElementById('updateCarForm')
          let nameInput = updateCarModale.querySelector("[name='car_name']")
          let matriculeInput = updateCarModale.querySelector("[name='car_matricule']")
          let updateCarBtn = updateCarModale.querySelector('#updateCar');
          let deleteCarBtn = updateCarModale.querySelector('#deleteCar');

updateCarBtn.addEventListener('click', function(event){
            if (nameInput.value.trim() == '' && matriculeInput.value.trim() == '') {
              event.preventDefault();
              Swal.fire({
                icon: 'error',
                title: 'Attention',
                text: 'Un ou plusieurs champs sont vides.'
              })
            }
          })

deleteCarBtn.addEventListener('click', function(event){
            Swal.fire({
              title: 'Attention',
              text: "Voulez-vous vraiment supprimer le véhicule "+ carData.car_name,
              icon: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Confirmer', 
              cancelButtonText: 'Annuler'
            }).then((result) => {
              if (result.isConfirmed) {
                window.location = "/car/delete/" + carData.id;
              }
            })
          })
        }
      })
    }

</script>
@endpush