training/views/spiel.ejs

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

<h1><%= spiel.name %></h1>


<div id="view" class="mt-5">
    <h2>Material</h2>
        <p><%= spiel.material %></p>    
    <h2>Dauer</h2>
        <p><%= spiel.dauer %></p>    
    
    <h2>Regeln</h2>
        <p><%= spiel.regeln %></p>
            
    <h2>Variationen</h2>
    <p><%= spiel.variationen %></p>
        <% if (session && (session.role === 'user' || session.role==='admin')) {%>
    <button class="btn btn-primary" onclick="toggleDivs()">Zum Edit-Modus wechseln</button>

</div>

<div id="edit" class="mt-5 d-none">
    <form method="POST" action="/edit-Spiel">
        <input type="hidden" name="id" value="<%= spiel.id %>">
        <strong>Material: </strong><br><textarea name="material"><%= spiel.material %> </textarea><br>
        <strong>Dauer: </strong><input name="dauer" value="<%=spiel.dauer %>"><%=spiel.dauer %></input><br>
        <strong>Regeln: </strong><br><textarea name="regeln"><%= spiel.regeln %> </textarea><br>
        <strong>Variationen: </strong><br><textarea name="variationen"><%= spiel.variationen %> </textarea><br>
        <button type="submit">Speichern</button>
    </form>
    <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>

<% } else{ %>
</div>
<% } %>

</body>
</html>


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