v2 / examples / veb / todo / templates / index.html
64 lines · 58 sloc · 2.23 KB · ae1b9ed5711e171ed196208bd484db4b775c407b
Raw 


1<!DOCTYPE html>


2<html lang="en">


3<head>


4    <meta charset="UTF-8">


5    <meta name="viewport" content="width=device-width, initial-scale=1.0">


6    <title>My TODO App</title>


7    <!-- include our css from the assets folder -->


8    @css '/assets/main.css'


9</head>


10<body>


11


12<header>


13    <h1>List of all my todos</h1>


14</header>


15


16<main>


17    <!-- Display a message when a new TODO is created -->


18    @if ctx.created_todo


19    <p class="form-success">Created a new todo!</p>


20    @endif


21


22    <section class="todos">


23        <div class="todo-list">


24        @if todos.len == 0


25            <p>Nothing to see here...</p>


26        @endif


27        <!-- Loop over all the current todo's -->


28        @for todo in todos


29            <div class="todo">


30                <p class="name"><span class="todo-id">(id: @{todo.id})</span>@{todo.name}</p>


31                @if !todo.completed


32                    <!-- We can also call methods of properties inside a template -->


33                    <p class="time">Created at: <span class="time">@{todo.created.hhmmss()}</span></p>


34                    <!-- Pass the id of the TODO as a route parameter to '/complete/:id' -->


35                    <form action="/todo/@{todo.id}/complete" method="post">


36                        <button class="success" type="submit">Complete</button>


37                    </form>


38                @else


39                 <p class="time">Completed at: <span class="time">@{todo.updated.hhmmss()}</span></p>


40                    <p class="completed">✔️</p>


41                    <!-- Pass the id of the TODO as a route parameter to '/complete/:id' -->


42                    <form action="/todo/@{todo.id}/delete" method="post">


43                        <button class="error" type="submit">Delete</button>


44                    </form>


45                @endif


46            </div>


47        @endfor


48      


49        </div>


50    </section>


51


52    <section class="create-todo">


53        <h2>Create a new TODO item</h2>


54        <form action="/" method="post">


55            <label for="task-name">Name:</label>


56            <input autofocus id="task-name" type="text" name="name">


57            <button class="primary" type="submit">Create</button>


58            <p class="form-error">@{ctx.form_error}</p>


59        </form>


60    </section>


61</main>    


62


63</body>


64</html>