training/views/mitglied.ejs

<%- include('partials/header') %>
<% birthday = new Date(mitglied.geburtsdatum) %>

<h1> <%= mitglied.vorname %> <%= mitglied.nachname %> </h1>

<div id="view" class="mt-5">
<strong> Geburtsdatum: </strong> <%= birthday.getDate() %>.<%= birthday.getMonth() + 1 %>.<%= birthday.getFullYear() %>  (<%= mitglied.age %>)</br>
<strong> Adresse: </strong> <%= mitglied.adresse %> </br>
<strong> Riege: </strong> <%= (riege == 0) ? 'keine' : riege %> </br>
<% if (mitglied.probe) { %> <strong>Probetraining</strong></br> <% } %> 
<strong> Anwesend: </strong> <%= anwesend %> Mal </br>

<% numbers.forEach(number => { %>
    <% if (number.verbindung === 4) { %>
        <strong> Telefonnummer: </strong> <%= number.nummer %> </br>
    <% }}) %>

<h2>Notfallnummern</h2>
<p>
<% numbers.forEach(number => { %>
<% if (number.verbindung != 4) { %>
<strong><%= number.bezeichnung %> - <%= number.name %>: </strong> <%= number.nummer %> <% if (number.stand) { %>(stand: <%= ("00" + birthday.getDate()).slice(-2) %>.<%= ("00" + (birthday.getMonth() + 1)).slice(-2) %>.<%= number.stand.getFullYear() %>) <% } %></br>
<% }}) %>
</p>

<% if (session && session.role === 'admin') { %>
    <button class="btn btn-primary" onclick="toggleDivs()">Zum Edit-Modus wechseln</button>
  <% } %>
</div>

<% if (session && session.role === 'admin') { %>
<div id="edit" class="mt-5 d-none">

    <form method="POST" action="/update-mitglied">
        <fieldset class="scheduler-border">
            <legend >Stammdaten</legend>
            <div class="form-row">
                <div class="form-group col-md-3">
                    <label for="vorname">Vorname:</label>
                    <input class="form-control" name="vorname" type="text" value="<%= mitglied.vorname %>">
                </div>
                <div class="form-group col-md-3">
                    <label for="nachname">Nachname:</label>
                    <input class="form-control" name="nachname" type="text" value="<%= mitglied.nachname %>"></br>
                </div>   
            </div> 
                
                <div class="form-group col-md-6">
                    <label for="geburt">Geburtsdatum:</label>
                    <input type="date" id="geburt" name="geburt" value="<%= birthday.getFullYear() %>-<%= ('00' + (birthday.getMonth() + 1)).slice(-2) %>-<%= ('00' + birthday.getDate()).slice(-2) %>"></br>
                </div>

                <input type="hidden" name="id" value="<%= id %>">
                <input type="hidden" name="type" value="adresse">

                <div class="form-group col-md-3">
                    <label for="adresse"> Adresse: </label>
                    <input class="form-control" name="adresse" type="text" value="<%= mitglied.adresse %>"></br>
                </div>

                <label for="probe"> Probetraining: </label> 
                <input class="form-check-input" type="checkbox" name="probe" value="true" <%= mitglied.probe  ? 'checked' : ''  %>></br>
                
                <label for="probe"> Helfer_in: </label> 
                <input class="form-check-input" type="checkbox" name="helfer" value="true" <%= mitglied.helfer  ? 'checked' : ''  %>></br>
                
                <button class="btn btn-success" type="submit">Speichern</button>
        </fieldset>
        
    </form>
    
    <form method="POST" action="/set-Riege">
        <fieldset>
                <legend>Riege</legend>
    <input type="hidden" name="id" value="<%= id %>">
    <strong>Riege: </strong><select class="custom-select" name="riege">
        <option value=0 <% if ( riege === 0) { %> selected <% } %>> keine</option>
        <option value=1 <% if ( riege === 1) { %> selected <% } %>> Riege 1</option>
        <option value=2 <% if ( riege === 2) { %> selected <% } %>> Riege 2</option>
        <option value=3 <% if ( riege === 3) { %> selected <% } %>> Riege 3</option>
        <option value=4 <% if ( riege === 4) { %> selected <% } %>> Riege 4</option>
        <option value=5 <% if ( riege === 5) { %> selected <% } %>> Riege 5</option>
      </select>
      <button type="submit">Speichern</button>
    </fieldset>
</form>

<fieldset>
        <legend>Notfallnummern</legend>
    <p>
    <% numbers.forEach(number => { %>
    <form method="POST" action="/update-mitglied">    
        <input type="hidden" name="telid" value="<%= number.id %>">
        <input type="hidden" name="type" value="tel-delete">
        <input type="hidden" name="id" value="<%= id %>">
        <strong><%= number.bezeichnung %> - <%= number.name %>: </strong> <%= number.nummer %>
        <button type="submit">löschen</button>  
    </form>
    <% }) %>
    </p>
</fieldset>

<fieldset>
        <legend>Telefonnummern hinzufügen</legend>
<form method="POST" action="/update-mitglied">
    <input type="hidden" name="id" value="<%= id %>">
    <input type="hidden" name="type" value="tel">
    <select name="verbindung">
        <option value=1>Mutter</option>
        <option value=2>Vater</option>
        <option value=3>Eltern</option>
        <option value=4>Eigene</option>
        <option value=5>Oma</option>
        <option value=6>Opa</option>
      </select>
      <input name="name" placeholder="Name" type="text"  >
      <input name="nummer" placeholder="+49 123 456 789" type="text">
      <button type="submit">Speichern</button>
</form>
</fieldset>
<p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
  Mitglied löschen
</button></br>
</p>
<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Mitglied löschen</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Möchtest du das Mitglied <%= mitglied.vorname %> <%= mitglied.nachname %> wirklich löschen?
        Diese Aktion kann nicht rüchgängig gemacht werden!
    </p>  
    </div>
      <div class="modal-footer">
        
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <form method="POST" action="/deleteMember">
            <input type="hidden" name="id" value="<%= id %>">
            <button type="submit"  class="btn btn-danger">Löschen</button>
        </form>
      </div>
    </div>
  </div>
</div>

<button class="btn btn-secondary" onclick="toggleDivs()">Zum View-Modus wechseln</button>
</div>
<% } %>

<script>
    function toggleDivs() {
        $('#view').toggleClass('d-none d-block');
        $('#edit').toggleClass('d-none d-block');
    }
</script>


<%- include('partials/footer') %>