added project delete + changed to list template

TimeDispatcher/urls.py

@@ -25,13 +25,16 @@ register_converter(DateConverter, "date")
 urlpatterns = [
     path("", views.dashboard_view, name="dashboard"),
     path("import/", views.import_view, name="import"),
-    path("projects/", views.projects_view, name="projects"),
+    path("projects/", views.ProjectsView.as_view(), name="projects"),
     path("parents/", views.ParentsView.as_view(), name="parents"),
     path("table/<date:start_date>/<date:end_date>/", views.get_table_data, name="table_data"),
     path("table/", views.table_view, name="table"),
+    path("parents/new/", views.new_parent_view, name="new_parent"),
+    path("parents/<int:id>/on_delete/", views.parent_on_delete_view, name="parent_on_delete"),
     path("parents/<int:id>/", views.parent_view, name="parent"),
+    path("projects/<int:id>/on_delete/", views.project_on_delete_view, name="project_on_delete"),
+    path("projects/<int:id>/set_parent/", views.set_parent, name="set_parent"),
     path("projects/<int:id>/", views.project_view, name="project"),
-    path("projects/<int:id>/set_parent", views.set_parent, name="set_parent"),
     path("stats/by-month/<int:year>/<int:month>/", views.get_stats_by_month, name="stats_by_month"),
     path("stats/between/<date:start_date>/<date:end_date>/", views.get_stats_between, name="stats_between"),
     path("clockings/<date:date>/", views.set_clocking, name="set_clocking")

dispatcher/static/base.css

@@ -7,6 +7,8 @@
     --light2: #e5e5e5;
     --light3: #cccccc;
     --light4: #c5c5c5;
+    --accent: #69c935;
+    --accent2: #61ba31;
 }
 
 * {
@@ -43,6 +45,16 @@ nav a {
     transition: background-color 0.2s;
 }
 
+nav a.logo {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+nav a.logo img {
+    object-fit: contain;
+    height: 2em;
+    width: 2em;
+}
+
 nav a.active {
     box-shadow: 0 -2px var(--light1) inset;
 }
@@ -70,6 +82,7 @@ main {
     display: flex;
     flex-direction: column;
     padding: 2em;
+    overflow-y: auto;
 }
 
 button, input, select {
@@ -95,5 +108,9 @@ button, select {
 }
 
 a {
-    color: #69c935
+    color: var(--accent);
+}
+
+ul {
+    padding-left: 2em;
 }

dispatcher/static/base.js

@@ -72,7 +72,7 @@ function formatPercentage(ratio) {
     return percentage + "%"
 }
 
-function req(url, options) {
+function req(url, options = {}) {
     let headers = options.headers || {}
     let csrftoken = document.querySelector("input[name='csrfmiddlewaretoken']").value
     headers["X-CSRFToken"] = csrftoken

dispatcher/static/form.css

@@ -42,7 +42,7 @@ form input[type="checkbox"] {
 
 form input[type="checkbox"]:checked::after {
     content: "";
-    background-color: #69c935;
+    background-color: var(--accent);
     width: 80%;
     height: 80%;
     border-radius: 10%;

dispatcher/static/list.css

@@ -1,10 +1,29 @@
-.list {
-    display: flex;
+.list-wrapper {
     width: 100%;
     max-width: 40em;
     align-self: center;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    overflow-y: auto;
+}
+
+.list-header {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1em;
+}
+
+.list-header button {
+    padding: 0.4em 1.2em;
+}
+
+.list {
+    display: flex;
     gap: 0.8em;
     flex-direction: column;
+    padding: 0;
+    overflow-y: auto;
 }
 
 .list li {
@@ -18,4 +37,61 @@
 
 .list li .actions {
     margin-left: auto;
+}
+
+.popup {
+    background-color: #00000040;
+    position: fixed;
+    inset: 0;
+    display: grid;
+    place-items: center;
+}
+
+.popup:not(.show) {
+    display: none;
+}
+
+.popup .popup-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    padding: 2em;
+    background-color: var(--dark1);
+    border-radius: 1em;
+    width: 100%;
+    max-width: 40em;
+    box-shadow: 0 0.2em 0.8em var(--dark3);
+}
+
+.popup .popup-container .elmt-name {
+    text-decoration: underline;
+}
+
+.popup .popup-container .actions {
+    display: flex;
+    justify-content: space-evenly;
+    gap: 1em;
+}
+
+.popup .popup-container .actions button {
+    padding: 0.4em 1.2em;
+}
+
+.popup .popup-container .actions .cancel {
+    background-color: var(--light2);
+}
+
+.popup .popup-container .actions .cancel:hover {
+    background-color: var(--light3);
+}
+
+.popup .popup-container .actions .delete {
+    --col: #f95f4b;
+    color: var(--col);
+    border-color: var(--col);
+    background-color: var(--dark1);
+}
+
+.popup .popup-container .actions .delete:hover {
+    background-color: var(--dark2);
 }

dispatcher/static/list.js

@@ -0,0 +1,55 @@
+function showDeletePopup(id, name) {
+    let popup = document.getElementById("delete-popup")
+    popup.dataset.id = id
+    popup.querySelectorAll(".elmt-name").forEach(elmt => {
+        elmt.innerText = name
+    })
+    popup.classList.add("show")
+}
+
+function deleteElement(id) {
+    let url = window.location.href
+    if (!url.endsWith("/")) {
+        url += "/"
+    }
+    url += `${id}/`
+    req(url, {
+        method: "DELETE"
+    }).then(res => {
+        return res.json()
+    }).then(res => {
+        if (res.status === "success") {
+            window.location.reload()
+        }
+    })
+}
+
+let onBeforeDelete = null
+
+window.addEventListener("load", () => {
+    document.querySelector("button.new").addEventListener("click", () => {
+        window.location.href = "new/"
+    })
+
+    document.querySelectorAll(".list li").forEach(row => {
+        let id = row.dataset.id
+        row.querySelector("button.edit")?.addEventListener("click", () => {
+            window.location.href = `${id}/`
+        })
+
+        row.querySelector("button.delete")?.addEventListener("click", async () => {
+            if (onBeforeDelete) {
+                await onBeforeDelete(row)
+            }
+            showDeletePopup(id, row.dataset.name)
+        })
+    })
+
+    let deletePopup = document.getElementById("delete-popup")
+    deletePopup.querySelector(".actions .cancel").addEventListener("click", () => {
+        deletePopup.classList.remove("show")
+    })
+    deletePopup.querySelector(".actions .delete").addEventListener("click", () => {
+        deleteElement(deletePopup.dataset.id)
+    })
+})

dispatcher/static/logo.svg

@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64"
+   height="64"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="logo.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="true"
+     inkscape:zoom="11.559708"
+     inkscape:cx="31.012894"
+     inkscape:cy="41.047749"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       id="grid1"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="1"
+       spacingy="1"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="8"
+       enabled="true"
+       visible="true" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1">
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect3"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,1,1,0,2,0,1 @ F,0,1,1,0,2,0,1 @ F,0,1,1,0,2,0,1 @ F,0,1,1,0,2,0,1 @ F,0,1,1,0,2,0,1 @ F,0,0,1,0,2,0,1 @ F,0,1,1,0,2,0,1 @ F,0,1,1,0,2,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g4">
+      <path
+         style="fill:#69c935;fill-opacity:1;stroke-width:6;stroke-linecap:square;stroke:none"
+         d="m 8,10 v 4 a 2,2 45 0 0 2,2 h 7 a 2,2 45 0 1 2,2 v 36 a 2,2 45 0 0 2,2 h 4 a 2,2 135 0 0 2,-2 V 18 a 2,2 135 0 1 2,-2 h 7 a 2,2 135 0 0 2,-2 V 10 A 2,2 45 0 0 36,8 H 10 a 2,2 135 0 0 -2,2 z"
+         id="path1"
+         sodipodi:nodetypes="ccccccccc"
+         inkscape:path-effect="#path-effect3"
+         inkscape:original-d="m 8,8 v 8 h 11 v 40 h 8 V 16 H 38 V 8 Z" />
+      <g
+         id="g3"
+         style="stroke:#61ba31;stroke-opacity:1;fill:none">
+        <path
+           id="path2"
+           style="fill:none;stroke:#61ba31;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+           d="M 44.834929,13.274537 C 51.52452,17.296808 56,24.625752 56,33 56,45.702549 45.702549,56 33,56"
+           sodipodi:nodetypes="csc" />
+        <path
+           style="fill:none;stroke:#61ba31;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 44,47 33,33 38,26"
+           id="path3" />
+      </g>
+    </g>
+  </g>
+</svg>

dispatcher/static/parents.css

@@ -1,3 +1,3 @@
 .productive {
-    box-shadow: 0.2em 0 0 #69c935 inset;
+    box-shadow: 0.2em 0 0 var(--accent) inset;
 }

dispatcher/static/parents.js

@@ -1,8 +1,11 @@
-window.addEventListener("load", () => {
-    document.querySelectorAll(".list li").forEach(row => {
-        let id = row.dataset.id
-        row.querySelector("button.edit").addEventListener("click", () => {
-            window.location.href = `${id}/`
-        })
+onBeforeDelete = async row => {
+    await req(`${row.dataset.id}/on_delete/`).then(res => {
+        return res.json()
+    }).then(res => {
+        if (res.status === "success") {
+            let popup = document.getElementById("delete-popup")
+            popup.querySelector(".project-count").innerText = res.projects
+            popup.querySelector(".task-count").innerText = res.tasks
+        }
     })
-})
+}

dispatcher/static/projects.css

@@ -1,4 +1,8 @@
+.productive {
+    box-shadow: 0.2em 0 0 var(--accent) inset;
+}
 
+/*
 .projects {
     width: 100%;
     max-width: 40em;
@@ -21,4 +25,5 @@
 
 .projects tbody tr:nth-child(even) {
     background-color: var(--dark2);
-}
+}
+*/

dispatcher/static/projects.js

@@ -1,18 +1,25 @@
+onBeforeDelete = async row => {
+    await req(`${row.dataset.id}/on_delete/`).then(res => {
+        return res.json()
+    }).then(res => {
+        if (res.status === "success") {
+            let popup = document.getElementById("delete-popup")
+            popup.querySelector(".task-count").innerText = res.tasks
+        }
+    })
+}
+
 window.addEventListener("load", () => {
-    document.querySelectorAll(".projects tbody tr").forEach(row => {
+    document.querySelectorAll(".list li").forEach(row => {
         let id = row.dataset.id
         let selector = row.querySelector(".parent-sel")
         selector.addEventListener("change", () => {
             let fd = new FormData()
             fd.set("parent_id", selector.value)
-            req(`${id}/set_parent`, {
+            req(`${id}/set_parent/`, {
                 method: "POST",
                 body: fd
             })
         })
-
-        row.querySelector("button.edit").addEventListener("click", () => {
-            window.location.href = `${id}/`
-        })
     })
 })

dispatcher/views.py

@@ -10,7 +10,7 @@ from django.views.decorators.http import require_POST
 
 from dispatcher.core import import_tasks
 from dispatcher.forms import ProjectForm, ImportForm, ParentForm
-from dispatcher.models import Project, Parent, Clocking
+from dispatcher.models import Project, Parent, Clocking, Task
 from dispatcher.serializers import ClockingSerializer
 
 
@@ -23,6 +23,7 @@ def dashboard_view(request):
 
 def projects_view(request):
     context = {
+        "class_name": "parent",
         "projects": Project.objects.all(),
         "parents": Parent.objects.all()
     }
@@ -31,6 +32,11 @@ def projects_view(request):
 
 def parent_view(request, id):
     parent = get_object_or_404(Parent, id=id)
+
+    if request.method == "DELETE":
+        parent.delete()
+        return JsonResponse({"status": "success"})
+
     context = {
         "class": "parent",
         "id": id
@@ -38,11 +44,48 @@ def parent_view(request, id):
     form = ParentForm(request.POST or None, request.FILES or None, instance=parent)
     if form.is_valid():
         form.save()
+        return redirect("parents")
     context["form"] = ParentForm(instance=parent)
     return render(request, "edit.html", context)
 
+def parent_on_delete_view(request, id):
+    parent = get_object_or_404(Parent, id=id)
+    projects = parent.project_set.count()
+    tasks = Task.objects.filter(project__parent=parent).count()
+
+    return JsonResponse({
+        "status": "success",
+        "projects": projects,
+        "tasks": tasks
+    })
+
+def project_on_delete_view(request, id):
+    project = get_object_or_404(Project, id=id)
+    tasks = project.task_set.count()
+
+    return JsonResponse({
+        "status": "success",
+        "tasks": tasks
+    })
+
+def new_parent_view(request):
+    context = {
+        "class": "parent"
+    }
+    form = ParentForm(request.POST or None, request.FILES or None)
+    if form.is_valid():
+        form.save()
+        return redirect("parents")
+    context["form"] = form
+    return render(request, "add.html", context)
+
 def project_view(request, id):
     project = get_object_or_404(Project, id=id)
+
+    if request.method == "DELETE":
+        project.delete()
+        return JsonResponse({"status": "success"})
+
     context = {
         "class": "project",
         "id": id
@@ -59,7 +102,7 @@ def table_view(request):
 @require_POST
 def set_parent(request, id):
     project = get_object_or_404(Project, id=id)
-    parent_id = request.POST.get("parent_id")
+    parent_id = request.POST.get("parent_id") or None
     try:
         parent = Parent.objects.get(id=parent_id)
     except Parent.DoesNotExist:
@@ -152,6 +195,16 @@ class ParentsView(generic.ListView):
     template_name = "parents.html"
     context_object_name = "elements"
 
+class ProjectsView(generic.ListView):
+    model = Project
+    template_name = "projects.html"
+    context_object_name = "elements"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["parents"] = Parent.objects.all()
+        return context
+
 
 def get_table_data(request, start_date: datetime.date, end_date: datetime.date):
     end_date = end_date + timedelta(days=1)

templates/add.html

@@ -0,0 +1,16 @@
+{% extends "base.html" %}
+{% load static %}
+{% block title %}New {{ class }}{% endblock %}
+{% block head %}
+    <link rel="stylesheet" href="{% static "form.css" %}">
+{% endblock %}
+{% block main %}
+    <div class="container">
+        <h2>New {{ class }}</h2>
+        <form action="" method="POST">
+            {% csrf_token %}
+            {{ form }}
+            <button type="submit">Create</button>
+        </form>
+    </div>
+{% endblock %}

templates/base.html

@@ -4,6 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <title>{% block title %}Title{% endblock %}</title>
+    <link rel="shortcut icon" href="{% static "logo.svg" %}" type="image/x-svg">
     <link rel="stylesheet" href="{% static "base.css" %}">
     <script src="{% static "base.js" %}"></script>
     {% block head %}{% endblock %}
@@ -11,6 +12,7 @@
 <body>
     <header>
         <nav>
+            <a class="logo" href="{% url "dashboard" %}"><img src="{% static "logo.svg" %}" alt="Time Dispatcher logo"></a>
             {% for nav_link in nav_links %}
                 <a href="{% url nav_link.view %}" {% if request.resolver_match.view_name == nav_link.view %}class="active"{% endif %}>{{ nav_link.label }}</a>
             {% endfor %}

templates/edit.html

@@ -2,7 +2,7 @@
 {% load static %}
 {% block title %}Editing {{ class }} {{ id }}{% endblock %}
 {% block head %}
-    <link rel="stylesheet" href="{% static "edit.css" %}">
+    <link rel="stylesheet" href="{% static "form.css" %}">
 {% endblock %}
 {% block main %}
     <div class="container">

templates/import.html

@@ -1,12 +1,19 @@
 {% extends "base.html" %}
+{% load static %}
 {% block title %}Import tasks{% endblock %}
+{% block head %}
+    <link rel="stylesheet" href="{% static "form.css" %}">
+{% endblock %}
 {% block main %}
-    <form action="" method="POST" enctype="multipart/form-data">
-        {% csrf_token %}
-        <div>
-            <label for="file">File</label>
-            <input type="file" name="file" id="file">
-        </div>
-        <button type="submit">Import</button>
-    </form>
+    <div class="container">
+        <h1>Import tasks</h1>
+        <form action="" method="POST" enctype="multipart/form-data">
+            {% csrf_token %}
+            <div>
+                <label for="file">File</label>
+                <input type="file" name="file" id="file">
+            </div>
+            <button type="submit">Import</button>
+        </form>
+    </div>
 {% endblock %}

templates/list.html

@@ -2,19 +2,36 @@
 {% load static %}
 {% block head %}
     <link rel="stylesheet" href="{% static "list.css" %}">
+    <script src="{% static "list.js" %}"></script>
     {% block extra-head %}{% endblock %}
 {% endblock %}
 {% block main %}
-    <ul class="list">
-        {% for element in elements %}
-            <li data-id="{{ element.id }}" class="{% block extra-class %}{% endblock %}">
-                {% block element %}{% endblock %}
-                <div class="actions">
-                    {% block actions %}{% endblock %}
-                </div>
-            </li>
-        {% empty %}
-            <li class="empty">No {% block element_name %}{% endblock %} defined yet</li>
-        {% endfor %}
-    </ul>
+    {% csrf_token %}
+    <div class="list-wrapper">
+        <div class="list-header">
+            <button class="new">New {{ class_name }}</button>
+        </div>
+        <ul class="list">
+            {% for element in elements %}
+                <li data-id="{{ element.id }}" data-name="{% block element-name %}{% endblock %}" class="{% block extra-class %}{% endblock %}">
+                    {% block element %}{% endblock %}
+                    <div class="actions">
+                        {% block actions %}{% endblock %}
+                    </div>
+                </li>
+            {% empty %}
+                <li class="empty">No {{ class_name }} defined yet</li>
+            {% endfor %}
+        </ul>
+    </div>
+    <div class="popup" id="delete-popup">
+        <div class="popup-container">
+            <h2 class="title">Delete <span class="elmt-name"></span> ?</h2>
+            <p class="desc">{% block delete-desc %}{% endblock %}</p>
+            <div class="actions">
+                <button class="cancel">Cancel</button>
+                <button class="delete">Delete</button>
+            </div>
+        </div>
+    </div>
 {% endblock %}

templates/parents.html

@@ -1,16 +1,27 @@
 {% extends "list.html" %}
 {% load static %}
 {% block title %}Parents{% endblock %}
-{% block element_name %}parent{% endblock %}
 {% block extra-head %}
     <link rel="stylesheet" href="{% static "parents.css" %}">
     <script src="{% static "parents.js" %}"></script>
 {% endblock %}
 {% block extra-class %}{% if element.is_productive %}productive{% endif %}{% endblock %}
+{% block element-name %}{{ element.name }}{% endblock %}
 {% block element %}
     <div class="name">{{ element.name }}</div>
-    <div class="project_num">({{ element.project_num }})</div>
+    {% if element.project_num %}
+        <div class="project_num">({{ element.project_num }})</div>
+    {% endif %}
 {% endblock %}
 {% block actions %}
     <button class="edit">Edit</button>
-{% endblock %}
+    <button class="delete">Delete</button>
+{% endblock %}
+{% block delete-desc %}
+    Are sure you want to delete <span class="elmt-name"></span> ?
+    This action is <u>IRREVERSIBLE</u> ! By deleting this element, you will also delete:
+    <ul>
+        <li><span class="project-count"></span> project(s)</li>
+        <li><span class="task-count"></span> task imputation(s)</li>
+    </ul>
+{% endblock %}

templates/projects.html

@@ -1,39 +1,29 @@
-{% extends "base.html" %}
+{% extends "list.html" %}
 {% load static %}
 {% block title %}Projects{% endblock %}
-{% block head %}
+{% block extra-head %}
     <link rel="stylesheet" href="{% static "projects.css" %}">
     <script src="{% static "projects.js" %}"></script>
 {% endblock %}
-{% block footer %}{% endblock %}
-{% block main %}
-    {% csrf_token %}
-    <table class="projects">
-        <thead>
-            <tr>
-                <th>Project</th>
-                <th>Parent</th>
-                <th>Actions</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for project in projects %}
-                <tr data-id="{{ project.id }}">
-                    <td>{{ project.name }}</td>
-                    <td>
-                        <select class="parent-sel">
-                            <option value=""></option>
-                            {% for parent in parents %}
-                                <option value="{{ parent.id }}" {% if project.parent.id == parent.id %}selected{% endif %}>{{ parent.name }}</option>
-                            {% endfor %}
-                        </select>
-                    </td>
-                    <td>
-                        <button class="edit">Edit</button>
-                        <button class="delete">Delete</button>
-                    </td>
-                </tr>
-            {% endfor %}
-        </tbody>
-    </table>
-{% endblock %}
+{% block extra-class %}{% if element.parent.is_productive %}productive{% endif %}{% endblock %}
+{% block element-name %}{{ element.name }}{% endblock %}
+{% block element %}
+    <div class="name">{{ element.name }}</div>
+{% endblock %}
+{% block actions %}
+    <select class="parent-sel">
+        <option value=""></option>
+        {% for parent in parents %}
+            <option value="{{ parent.id }}" {% if element.parent.id == parent.id %}selected{% endif %}>{{ parent.name }}</option>
+        {% endfor %}
+    </select>
+    <button class="edit">Edit</button>
+    <button class="delete">Delete</button>
+{% endblock %}
+{% block delete-desc %}
+    Are sure you want to delete <span class="elmt-name"></span> ?
+    This action is <u>IRREVERSIBLE</u> ! By deleting this element, you will also delete:
+    <ul>
+        <li><span class="task-count"></span> task imputation(s)</li>
+    </ul>
+{% endblock %}