mirror of
https://github.com/vlang/v.git
synced 2025-09-14 23:12:33 +03:00
64 lines
No EOL
2.2 KiB
HTML
64 lines
No EOL
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>My TODO App</title>
|
|
<!-- include our css from the assets folder -->
|
|
@css '/assets/main.css'
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1>List of all my todos</h1>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Display a message when a new TODO is created -->
|
|
@if ctx.created_todo
|
|
<p class="form-success">Created a new todo!</p>
|
|
@endif
|
|
|
|
<section class="todos">
|
|
<div class="todo-list">
|
|
@if todos.len == 0
|
|
<p>Nothing to see here...</p>
|
|
@endif
|
|
<!-- Loop over all the current todo's -->
|
|
@for todo in todos
|
|
<div class="todo">
|
|
<p class="name"><span class="todo-id">(id: @{todo.id})</span>@{todo.name}</p>
|
|
@if !todo.completed
|
|
<!-- We can also call methods of properties inside a template -->
|
|
<p class="time">Created at: <span class="time">@{todo.created.hhmmss()}</span></p>
|
|
<!-- Pass the id of the TODO as a route parameter to '/complete/:id' -->
|
|
<form action="/todo/@{todo.id}/complete" method="post">
|
|
<button class="success" type="submit">Complete</button>
|
|
</form>
|
|
@else
|
|
<p class="time">Completed at: <span class="time">@{todo.updated.hhmmss()}</span></p>
|
|
<p class="completed">✔️</p>
|
|
<!-- Pass the id of the TODO as a route parameter to '/complete/:id' -->
|
|
<form action="/todo/@{todo.id}/delete" method="post">
|
|
<button class="error" type="submit">Delete</button>
|
|
</form>
|
|
@endif
|
|
</div>
|
|
@endfor
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section class="create-todo">
|
|
<h2>Create a new TODO item</h2>
|
|
<form action="/" method="post">
|
|
<label for="task-name">Name:</label>
|
|
<input autofocus id="task-name" type="text" name="name">
|
|
<button class="primary" type="submit">Create</button>
|
|
<p class="form-error">@{ctx.form_error}</p>
|
|
</form>
|
|
</section>
|
|
</main>
|
|
|
|
</body>
|
|
</html> |