Add multiple select

src/howitz/endpoints.py

@@ -57,6 +57,7 @@ def auth_handler(username, password):
  current_app.logger.debug('User is Zino authenticated %s', current_app.event_manager.is_authenticated)
  login_user(user)
  flash('Logged in successfully.')
+ session["selected_events"] = []
  return user
  return None
 
@@ -68,6 +69,7 @@ def logout_handler():
  current_app.event_manager.disconnect()
  current_app.logger.debug("Zino session was disconnected")
  flash('Logged out successfully.')
+ session.pop('selected_events', [])
  current_app.logger.info("Logged out successfully.")
 
 
@@ -226,6 +228,7 @@ def get_events():
 @main.route('/events/<event_id>/expand_row', methods=["GET"])
 def expand_event_row(event_id):
  event_id = int(event_id)
+ selected_events = session.get("selected_events", []) or []
  expanded_events = session.get("expanded_events", []) or []
  expanded_events.append(event_id)
  current_app.logger.debug('EXPANDED EVENTS %s', expanded_events)
@@ -235,12 +238,14 @@ def expand_event_row(event_id):
 
  return render_template('/components/row/expanded-row.html', event=event, id=event_id, event_attr=event_attr,
  event_logs=event_logs,
- event_history=event_history, event_msgs=event_msgs)
+ event_history=event_history, event_msgs=event_msgs,
+ is_selected=str(event_id) in selected_events)
 
 
 @main.route('/events/<event_id>/collapse_row', methods=["GET"])
 def collapse_event_row(event_id):
  event_id = int(event_id)
+ selected_events = session.get("selected_events", []) or []
  expanded_events = session.get("expanded_events", []) or []
  try:
  expanded_events.remove(event_id)
@@ -251,7 +256,8 @@ def collapse_event_row(event_id):
 
  event = create_table_event(current_app.event_manager.create_event_from_id(event_id))
 
- return render_template('/responses/collapse-row.html', event=event, id=event_id)
+ return render_template('/responses/collapse-row.html', event=event, id=event_id,
+ is_selected=str(event_id) in selected_events)
 
 
 @main.route('/event/<event_id>/update_status', methods=['GET', 'POST'])
@@ -261,6 +267,8 @@ def update_event_status(event_id):
  current_state = event.adm_state
 
  if request.method == 'POST':
+ selected_events = session.get("selected_events", []) or []
+
  new_state = request.form['event-state']
  new_history = request.form['event-history']
 
@@ -275,7 +283,7 @@ def update_event_status(event_id):
 
  return render_template('/components/row/expanded-row.html', event=event, id=event_id, event_attr=event_attr,
  event_logs=event_logs,
- event_history=event_history, event_msgs=event_msgs)
+ event_history=event_history, event_msgs=event_msgs, is_selected=str(event_id) in selected_events)
 
  elif request.method == 'GET':
  return render_template('/responses/get-update-event-status-form.html', id=event_id, current_state=current_state)
@@ -286,6 +294,35 @@ def cancel_update_event_status(event_id):
  return render_template('/responses/hide-update-event-status-form.html', id=event_id)
 
 
+
+@main.route('/event/<i>/unselect', methods=["GET"])
+def unselect_event(i):
+ try:
+ session["selected_events"].remove(i)
+ session.modified = True
+ current_app.logger.debug("SELECTED EVENTS %s", session["selected_events"])
+ except ValueError:
+ pass
+
+ return render_template('/responses/toggle-select.html', id=i, is_checked=False,
+ is_menu=len(session["selected_events"]) > 0)
+
+
+@main.route('/event/<i>/select', methods=["GET"])
+def select_event(i):
+ try:
+ session["selected_events"].append(i)
+ session.modified = True
+ current_app.logger.debug("SELECTED EVENTS %s", session["selected_events"])
+ except ValueError:
+ pass
+
+ # print("SELECTED EVENTS", session["selected_events"])
+
+ return render_template('/responses/toggle-select.html', id=i, is_checked=True,
+ is_menu=len(session["selected_events"]) > 0)
+
+
 @main.route('/navbar/show-user-menu', methods=["GET"])
 def show_user_menu():
  return render_template('/responses/show-user-menu.html')

src/howitz/templates/components/popups/bulk-update-menu/bulk-update-buttons.html

@@ -0,0 +1,29 @@
+<div class="flex gap-x-4 rounded-md shadow-xs" role="group">
+
+ <button
+ id="update-event-{{ id }}"
+ hx-get="/event/{{ id }}/update_status"
+ hx-target="#hidden-li-{{ id }}"
+ hx-swap="outerHTML show:bottom"
+ hx-swap-oob="{{ oob_swap if oob_swap is not none else 'false' }}"
+ class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3.5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+ >
+ Update Status
+ </button>
+
+ <button
+ disabled
+ id="poll-event-{{ id }}"
+ class="text-white bg-blue-400 dark:bg-blue-500 cursor-not-allowed font-medium rounded-lg text-sm px-3.5 py-2.5 mr-2 mb-2 text-center"
+ >
+ Poll
+ </button>
+
+ <button
+ disabled
+ id="clear-flapping-{{ id }}"
+ class="text-white bg-blue-400 dark:bg-blue-500 cursor-not-allowed font-medium rounded-lg text-sm px-3.5 py-2.5 mr-2 mb-2 text-center">
+ Clear Flapping
+ </button>
+
+</div>

src/howitz/templates/components/popups/bulk-update-menu/bulk-update-menu.html

@@ -0,0 +1,6 @@
+<div id="bulk-update-menu" tabindex="-1" hx-swap-oob="true"
+ class="sticky bottom-0 z-50 flex justify-between w-full max-h-fit p-2 border-t bg-slate-700 border-slate-600">
+ <div class="flex items-center mx-auto">
+ {% include "/components/popups/bulk-update-menu/bulk-update-buttons.html" %}
+ </div>
+</div>

src/howitz/templates/components/row/colored-data-cells.html

@@ -1,8 +1,3 @@
-<td class="{{ padding }} text-center relative z-0">
- {{ event.id }}
- <div class="absolute inset-y-0 left-0 z-10 bg-{{ color }}-500 w-1 h-full"></div>
-</td>
-
 <td class="{{ padding }} text-center font-medium whitespace-nowrap border border-slate-700 text-{{ color }}-500">
  <div class="relative z-0">
  <div class="h-2 bg-{{ color }}-200 opacity-30 blur-xl">

src/howitz/templates/components/row/data-cells.html

@@ -1,9 +1,9 @@
+<td class="{{ padding }} text-center border border-slate-700">{{ event.id }}</td>
 {% if event.color != "" and event.color is not none %}
 {% with color=event.color %}
 {% include "/components/row/colored-data-cells.html" %}
 {% endwith %}
 {% else %}
-<td class="{{ padding }} text-center border border-slate-700">{{ event.id }}</td>
 <td class="{{ padding }} text-center font-medium whitespace-nowrap text-white border border-slate-700">{{
  event.op_state }}
 </td>

src/howitz/templates/components/row/event-checkbox.html

@@ -0,0 +1,9 @@
+<td class="w-4 p-4">
+ <div class="flex items-center">
+ <input id="select-event-{{ id }}"
+ type="checkbox"
+ class="w-4 h-4 text-white rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
+ >
+ <label for="select-event-{{ id }}" class="sr-only">checkbox event {{ id }}</label>
+ </div>
+</td>

src/howitz/templates/components/row/event-checked-box.html

@@ -0,0 +1,35 @@
+{% if color != "" and color is not none %}
+ <td class="w-4 p-4 {{ padding }} text-center relative z-0">
+ <div id="checked-box-{{ id }}"
+ class="flex items-center">
+ <input id="unselect-event-{{ id }}"
+ type="checkbox"
+ class="w-4 h-4 text-white rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
+ checked
+ hx-get="/event/{{ id }}/unselect"
+ hx-trigger='click from:#unselect-event-{{ id }}, dblclick from:#unselect-event-{{ id }} consume'
+ hx-target="#checked-box-{{ id }}"
+ hx-swap="outerHTML"
+ hx-select="#unchecked-box-{{ id }}"
+ >
+ <label for="unselect-event-{{ id }}" class="sr-only">checkbox event {{ id }}</label>
+ </div>
+ <div class="absolute inset-y-0 left-0 z-10 bg-{{ color }}-500 w-1 h-full"></div>
+ </td>
+{% else %}
+ <td class="w-4 p-4">
+ <div class="flex items-center">
+ <input id="unselect-event-{{ id }}"
+ type="checkbox"
+ class="w-4 h-4 text-white rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
+ checked
+ hx-get="/event/{{ id }}/unselect"
+ hx-trigger='click from:#unselect-event-{{ id }}, dblclick from:#unselect-event-{{ id }} consume'
+ hx-target="#checked-box-{{ id }}"
+ hx-swap="outerHTML"
+ hx-select="#unchecked-box-{{ id }}"
+ >
+ <label for="unselect-event-{{ id }}" class="sr-only">checkbox event {{ id }}</label>
+ </div>
+ </td>
+{% endif %}

src/howitz/templates/components/row/event-row.html

@@ -8,13 +8,21 @@
 >
  {% with padding='px-3 py-2' %}
 
- {% with event=event %}
- {% include "/components/row/data-cells.html" %}
- {% endwith %}
+ {% with color=event.color if event.color %}
+ {% if is_selected %}
+ {% include "/components/row/event-checked-box.html" %}
+ {% else %}
+ {% include "/components/row/event-unchecked-box.html" %}
+ {% endif %}
+ {% endwith %}
 
- {% with id=id, color=event.color %}
- {% include "/components/row/expand-btn.html" %}
- {% endwith %}
+ {% with event=event %}
+ {% include "/components/row/data-cells.html" %}
+ {% endwith %}
+
+ {% with id=id, color=event.color %}
+ {% include "/components/row/expand-btn.html" %}
+ {% endwith %}
 
  {% endwith %}
 

src/howitz/templates/components/row/event-unchecked-box.html

@@ -0,0 +1,32 @@
+{% if color != "" and color is not none %}
+ <td class="w-4 p-4 {{ padding }} text-center relative z-0">
+ <div id="unchecked-box-{{ id }}" class="flex items-center">
+ <input id="select-event-{{ id }}"
+ type="checkbox"
+ class="w-4 h-4 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
+ hx-get="/event/{{ id }}/select"
+ hx-trigger='click from:#select-event-{{ id }}, dblclick from:#select-event-{{ id }} consume'
+ hx-target="#unchecked-box-{{ id }}"
+ hx-swap="outerHTML"
+ hx-select="#checked-box-{{ id }}"
+ >
+ <label for="select-event-{{ id }}" class="sr-only">checkbox event {{ id }}</label>
+ </div>
+ <div class="absolute inset-y-0 left-0 z-10 bg-{{ color }}-500 w-1 h-full"></div>
+ </td>
+{% else %}
+ <td class="w-4 p-4">
+ <div class="flex items-center">
+ <input id="select-event-{{ id }}"
+ type="checkbox"
+ class="w-4 h-4 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
+ hx-get="/event/{{ id }}/select"
+ hx-trigger='click from:#select-event-{{ id }}, dblclick from:#select-event-{{ id }} consume'
+ hx-target="#unchecked-box-{{ id }}"
+ hx-swap="outerHTML"
+ hx-select="#checked-box-{{ id }}"
+ >
+ <label for="select-event-{{ id }}" class="sr-only">checkbox event {{ id }}</label>
+ </div>
+ </td>
+{% endif %}

src/howitz/templates/components/row/expanded-row.html

@@ -1,27 +1,37 @@
 {% block content %}
 
-<tr
- class="bg-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600"
- id="event-accordion-row-{{ id }}"
- hx-get="/events/{{ id }}/collapse_row"
- hx-trigger="dblclick"
- hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
->
+ <tr
+  class="bg-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600"
+  id="event-accordion-row-{{ id }}"
+  hx-get="/events/{{ id }}/collapse_row"
+  hx-trigger="dblclick"
+  hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
+ >
 
- {% with padding='px-3 py-2' %}
+  {% with padding='px-3 py-2' %}
 
- {% with event=event %}
- {% include "/components/row/data-cells.html" %}
- {% endwith %}
+ {% with color=event.color if event.color %}
+ {% if is_selected %}
+ {% include "/components/row/event-checked-box.html" %}
+ {% else %}
+ {% include "/components/row/event-unchecked-box.html" %}
+ {% endif %}
+ {% endwith %}
 
- {% with id=id, color=event.color %}
- {% include "/components/row/collapse-btn.html" %}
- {% endwith %}
 
- {% endwith %}
 
-</tr>
+ {% with event=event %}
+ {% include "/components/row/data-cells.html" %}
+ {% endwith %}
 
-{% include "/components/accordion/event-details.html" %}
+ {% with id=id, color=event.color %}
+ {% include "/components/row/collapse-btn.html" %}
+ {% endwith %}
+
+ {% endwith %}
+
+ </tr>
+
+ {% include "/components/accordion/event-details.html" %}
 
 {% endblock content %}

src/howitz/templates/components/row/table-row-skeleton.html

@@ -2,7 +2,7 @@
  class="htmx-indicator animate-pulse bg-white border-b dark:bg-gray-500"
 >
 
- {% for n in range(9) %}
+ {% for n in range(10) %}
  <td class="h-10 px-6 py-4">
  <div class="h-2 bg-slate-700 rounded-full"></div>
  </td>

src/howitz/templates/components/table/events-table.html

@@ -7,6 +7,7 @@
 >
  <thead class="text-xs text-center text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-300">
  <tr>
+ <th scope="col" class="border border-slate-600 px-4 py-2"></th>
  <th scope="col" class="border border-slate-600 px-4 py-2">#</th>
  <th scope="col" class="border border-slate-600 px-4 py-2">OP-STATE</th>
  <th scope="col" class="border border-slate-600 px-4 py-2">ADM-STATE</th>

src/howitz/templates/layouts/base.html

@@ -9,7 +9,9 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <!-- HTMX -->
- <script src="https://unpkg.com/[email protected]"></script>
+ <script src="https://unpkg.com/[email protected]"
+ integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO"
+ crossorigin="anonymous"></script>
 
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
@@ -23,7 +25,7 @@
  hx-ext="[{% block extensions %}{% endblock %}]"
  class="h-full"
 >
- {% block content %} {% endblock content %}
+{% block content %} {% endblock content %}
 
 </body>
 </html>

src/howitz/templates/responses/checked-box.html

@@ -0,0 +1,13 @@
+<div id="checked-box-{{ id }}"
+ class="flex items-center">
+ <input id="unselect-event-{{ id }}"
+ type="checkbox"
+ class="w-4 h-4 text-white rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
+ checked
+ hx-get="/event/{{ id }}/unselect"
+ hx-trigger='click from:#unselect-event-{{ id }}, dblclick from:#unselect-event-{{ id }} consume'
+ hx-target="closest div"
+ hx-swap="outerHTML"
+ >
+ <label for="unselect-event-{{ id }}" class="sr-only">checkbox event {{ id }}</label>
+</div>

src/howitz/templates/responses/toggle-select.html

@@ -0,0 +1,15 @@
+{% if is_checked %}
+ {% include "/responses/checked-box.html" %}
+{% else %}
+ {% include "/responses/unchecked-box.html" %}
+{% endif %}
+
+{% if is_menu %}
+ {% include "/components/popups/bulk-update-menu/bulk-update-menu.html" %}
+{% else %}
+ <div id="bulk-update-menu" tabindex="-1"
+ hidden
+ hx-swap-oob="outerHTML"
+ >
+ </div>
+{% endif %}