views/partials/todo.hbs - main - kopython/_hyperscript-node

views/partials/todo.hbs
66 строк2 KB
Drew McDonald
* real init commit
29 ноя 2022, 02:51
29 ноя 2022, 02:5143e7026
{{#each data as |todo|}}
  <div
    id="todo-card-{{todo.id}}"
    class="card w-100 bg-base-100 shadow-xl mx-16 mb-8"
  >
    <form name="todo-{{todo.id}}">
      <input type="hidden" name="id" value="{{todo.id}}" />
      {{#if todo.isComplete}}
        <input type="hidden" name="isComplete" value="false" />
      {{else}}
        <input type="hidden" name="isComplete" value="true" />
      {{/if}}
      <div class="card-body">
        <div class="card-actions justify-between items-center mb-6">
          <h1 class="text-xl bold font-serif">{{todo.name}}</h1>
          {{#if isComplete}}
            <div class="badge badge-lg badge-success relative z-10 p-4 mb-8">
              <i class="fa fa-check mr-3"></i>
              Complete
            </div>
          {{/if}}
        </div>
        <p>{{todo.description}}</p>
        <div
          class="flex flex-col justify-between api-service-container relative mb-6"
        >
        </div>
        <hr class="my-2 md:min-w-full" />
        <div class="flex flex-col md:flex-row justify-end gap-4">
          <button
            type="submit"
            hx-delete="/html/todo"
            hx-confirm="Are you sure you wish to delete this TODO?"
            hx-target="#todo-container"
            class="btn btn-outline btn-error"
          ><i class="fa fa-trash mr-2"></i>
            Delete
          </button>
          <button
            type="submit"
            hx-get="/html/edit-todo/{{todo.id}}"
            hx-target="#todo-card-{{todo.id}}"
            class="btn btn-ghost"
          ><i class="fa fa-pencil mr-2"></i>
            Edit TODO
          </button>
          {{#if todo.isComplete}}
            <button
              hx-put="/html/todo/{{todo.id}}"
              hx-target="#todo-container"
              id="submit"
              class="btn"
            >Mark Incomplete</button>
          {{else}}
            <button
              hx-put="/html/todo/{{todo.id}}"
              hx-target="#todo-container"
              id="submit"
              class="btn"
            >Mark Complete</button>
          {{/if}}
        </div>
      </div>
    </form>
  </div>
{{/each}}