Implement a hooks page

core/templates/base.html

@@ -201,6 +201,11 @@
           <a class="navbar-item" href="{% url 'home' %}">
             Home
           </a>
+          {% if user.is_authenticated %}
+            <a class="navbar-item" href="{% url 'hooks' type='page' %}">
+              Hooks
+            </a>
+          {% endif %}
           {% if settings.STRIPE_ENABLED %}
             {% if user.is_authenticated %}
               <a class="navbar-item" href="{% url 'billing' %}">
@@ -285,6 +290,12 @@
       <div class="container">
         {% block content %}
         {% endblock %}
+        <div id="modals-here">
+        </div>
+        <div id="items-here">
+        </div>
+        <div id="widgets-here" style="display: none;">
+        </div>
       </div>
     </section>
   </body>

core/templates/index.html

@@ -81,13 +81,6 @@
       }
     });
   </script>
-
-  <div id="modals-here">
-  </div>
-  <div id="items-here">
-  </div>
-  <div id="widgets-here" style="display: none;">
-  </div>
   <script>
 
   </script>

core/templates/modals/modal.html

@@ -1,5 +0,0 @@
-{% extends 'wm/modal.html' %}
-
-{% block modal_content %}
-  {% include 'window-content/main.html' %}
-{% endblock %}

core/templates/widgets/widget.html

@@ -1,20 +0,0 @@
-{% extends 'wm/widget.html' %}
-{% load static %}
-
-{% block widget_options %}
-  gs-w="10" gs-h="1" gs-y="10" gs-x="1"
-{% endblock %}
-
-{% block heading %}
-  Widget
-{% endblock %}
-
-{% block close_button %}
-  <i
-    class="fa-solid fa-xmark has-text-grey-light float-right"
-    onclick='grid.removeWidget("widget-{{ unique }}"); //grid.compact();'></i>
-{% endblock %}
-
-{% block panel_content %}
-  {% include 'window-content/main.html' %}
-{% endblock %}

core/templates/window-content/hooks.html

@@ -0,0 +1,47 @@
+<div class="buttons">
+  <button
+    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+    hx-get="#"
+    hx-trigger="click"
+    hx-target="#modals-here"
+    class="button is-info">
+    <span class="icon-text">
+      <span class="icon">
+        <i class="fa-solid fa-plus"></i>
+      </span>
+      <span>Hook</span>
+    </span>
+  </button>
+</div>
+
+{% include 'partials/notify.html' %}
+<table class="table is-fullwidth is-hoverable">
+  <thead>
+    <th>user</th>
+    <th>hook</th>
+    <th>received hooks</th>
+    <th>actions</th>
+  </thead>
+  {% for item in hooks %}
+    <tr>
+      <td>{{ item.user }}</td>
+      <td>{{ item.hook }}</td>
+      <td>{{ item.received }}</td>
+      <td>
+        <button
+          hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+          hx-get="#"
+          hx-trigger="click"
+          hx-target="#modals-here"
+          class="button is-info">
+          <span class="icon-text">
+            <span class="icon">
+              <i class="fa-solid fa-pencil"></i>
+            </span>
+            <span>Hook</span>
+          </span>
+        </button>
+      </td>
+    </tr>
+  {% endfor %}
+</table>

core/templates/window-content/main.html

@@ -3,7 +3,7 @@
 <div class="buttons">
   <button
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-    hx-get="{% url 'modal' %}"
+    hx-get="{% url 'hooks' type='modal' %}"
     hx-trigger="click"
     hx-target="#modals-here"
     class="button is-info">
@@ -16,7 +16,7 @@
   </button>
   <button
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-    hx-get="{% url 'widget' %}"
+    hx-get="{% url 'hooks' type='widget' %}"
     hx-trigger="click"
     hx-target="#widgets-here"
     class="button is-info">
@@ -29,7 +29,7 @@
   </button>
   <button
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-    hx-get="{% url 'window' %}"
+    hx-get="{% url 'hooks' type='window' %}"
     hx-trigger="click"
     hx-target="#items-here"
     hx-swap="afterend"

core/templates/windows/window.html

@@ -1,9 +0,0 @@
-{% extends 'wm/magnet.html' %}
-
-{% block heading %}
-  Window
-{% endblock %}
-
-{% block panel_content %}
-  {% include 'window-content/main.html' %}
-{% endblock %}

core/templates/wm/modal.html

@@ -12,6 +12,7 @@
   <div class="modal-content">
     <div class="box">
       {% block modal_content %}
+        {% include window_content %}
       {% endblock %}
       <button class="modal-close is-large" aria-label="close"></button>
     </div>

core/templates/wm/page.html

@@ -0,0 +1,6 @@
+{% extends "base.html" %}
+
+
+{% block content %}
+  {% include window_content %}
+{% endblock %}

core/templates/wm/widget.html

@@ -1,5 +1,5 @@
 <div id="widget">
-  <div id="widget-{{ unique }}" class="grid-stack-item" {% block widget_options %}{% endblock %}>
+  <div id="widget-{{ unique }}" class="grid-stack-item" {% block widget_options %}gs-w="10" gs-h="1" gs-y="10" gs-x="1"{% endblock %}>
     <div class="grid-stack-item-content">
 
       <nav class="panel">
@@ -14,11 +14,13 @@
             class="fa-solid fa-arrows-minimize has-text-grey-light float-right"
             onclick='grid.compact();'></i>
           {% block heading %}
+            {{ title }}
           {% endblock %}
         </p>
         <article class="panel-block is-active">
           <div class="control">
             {% block panel_content %}
+              {% include window_content %}
             {% endblock %}
           </div>
         </article>

core/templates/wm/window.html

@@ -1,8 +1,10 @@
 <magnet-block attract-distance="10" align-to="outer|center" class="floating-window">
   {% extends 'wm/panel.html' %}
   {% block heading %}
+    {{ title }}
   {% endblock %}
 
   {% block panel_content %}
+    {% include window_content %}
   {% endblock %}
 </magnet-block>