Add row hilghlight for selected events

Collapse/expand row works, but event update is still buggy with this implementation

src/howitz/endpoints.py

@@ -235,12 +235,14 @@ 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 []
+ session["expanded_events"].append(event_id)
+ session.modified = True
  expanded_events = session.get("expanded_events", []) or []
- expanded_events.append(event_id)
  current_app.logger.debug('EXPANDED EVENTS %s', expanded_events)
 
+ event_id = int(event_id)
+
  event_attr, event_logs, event_history, event_msgs = get_event_details(event_id)
  event = create_table_event(current_app.event_manager.create_event_from_id(event_id))
 
@@ -250,16 +252,20 @@ def expand_event_row(event_id):
 
 @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 []
+
+ selected_events = session["selected_events"]
+
  try:
- expanded_events.remove(event_id)
+ session["expanded_events"].remove(event_id)
+ session.modified = True
  except ValueError:
  pass
- session["expanded_events"] = expanded_events
+ # session["expanded_events"] = expanded_events
+ expanded_events = session.get("expanded_events", []) or []
  current_app.logger.debug('EXPANDED EVENTS %s', expanded_events)
 
+ event_id = int(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, is_selected=str(event_id) in selected_events)
@@ -268,6 +274,7 @@ def collapse_event_row(event_id):
 @main.route('/event/<event_id>/update_status', methods=['GET', 'POST'])
 def update_event_status(event_id):
  event_id = int(event_id)
+ selected_events = session.get("selected_events", []) or []
  event = current_app.event_manager.create_event_from_id(int(event_id))
  current_state = event.adm_state
 
@@ -286,7 +293,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)
@@ -307,7 +314,30 @@ def unselect_event(i):
  except ValueError:
  pass
 
- return render_template('/components/row/event-unchecked-box.html', id=i)
+ event_id = int(i)
+
+ event_attr, event_logs, event_history, event_msgs = get_event_details(event_id)
+ event = create_table_event(current_app.event_manager.create_event_from_id(event_id))
+
+ # expanded_events = session.get("expanded_events", []) or []
+ # is_expanded = str(i) in session["expanded_events"]
+ # current_app.logger.debug("EXPANDED EVENTS %s", session["expanded_events"])
+ # current_app.logger.debug("is Expanded %s", is_expanded)
+
+ # return render_template('/components/responses/select-expanded-row.html', event=event, id=event_id,
+ # is_selected=False)
+
+ # if is_expanded:
+ # return render_template('/responses/unselect-expanded-row.html', event=event, id=event_id, is_selected=False)
+ # else:
+ # return render_template('/components/row/event-row.html', event=event, id=event_id, is_selected=False)
+
+ return render_template('/responses/row-toggle-select.html', event=event, id=event_id, event_attr=event_attr,
+ event_logs=event_logs,
+ event_history=event_history, event_msgs=event_msgs, is_selected=False, is_expanded=str(i) in session["expanded_events"])
+
+
+ # return render_template('/components/row/event-unchecked-box.html', id=i)
 
 
 @main.route('/event/<i>/select', methods=["GET"])
@@ -322,7 +352,31 @@ def select_event(i):
 
  # print("SELECTED EVENTS", session["selected_events"])
 
- return render_template('/components/row/event-checked-box.html', id=i)
+ event_id = int(i)
+
+ event_attr, event_logs, event_history, event_msgs = get_event_details(event_id)
+ event = create_table_event(current_app.event_manager.create_event_from_id(event_id))
+
+ # is_expanded = str(i) in session["expanded_events"]
+ # current_app.logger.debug("EXPANDED EVENTS %s", session["expanded_events"])
+ # current_app.logger.debug("is Expanded %s", is_expanded)
+ #
+ # # return render_template('/components/responses/select-expanded-row.html', event=event, id=event_id,
+ # # is_selected=False)
+ #
+ # if is_expanded:
+ # return render_template('/responses/unselect-expanded-row.html', event=event, id=event_id, is_selected=True)
+ # else:
+ # return render_template('/components/row/selected-event-row.html', event=event, id=event_id, is_selected=True)
+
+ # # event_attr, event_logs, event_history, event_msgs = get_event_details(event_id)
+ # event = create_table_event(current_app.event_manager.create_event_from_id(event_id))
+ #
+ return render_template('/responses/row-toggle-select.html', event=event, id=event_id, event_attr=event_attr,
+ event_logs=event_logs,
+ event_history=event_history, event_msgs=event_msgs, is_selected=True, is_expanded=str(i) in session["expanded_events"])
+ #
+ # # return render_template('/components/row/event-checked-box.html', id=i)
 
 
 # TODO: replace this with some other HTMX pattern

src/howitz/templates/components/row/collapse-btn.html

@@ -1,6 +1,6 @@
 <td
  id="toggle-row-btn-{{ id }}"
- class="{{ padding }} border border-slate-700 relative"
+ class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }} relative"
  hx-get="/events/{{ id }}/collapse_row"
  hx-trigger="click"
  hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"

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

@@ -3,7 +3,7 @@
  <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">
+<td class="{{ padding }} text-center font-medium whitespace-nowrap border border-slate-{{ border_color_level if border_color_level else '700' }} text-{{ color }}-500">
  <div class="relative z-0">
  <div class="h-2 bg-{{ color }}-200 opacity-30 blur-xl">
  {{ event.op_state }}
@@ -13,7 +13,7 @@
  </div>
  </div>
 </td>
-<td class="{{ padding }} text-center font-medium whitespace-nowrap border border-slate-700 text-{{ color }}-500">
+<td class="{{ padding }} text-center font-medium whitespace-nowrap border border-slate-{{ border_color_level if border_color_level else '700' }} text-{{ color }}-500">
  <div class="relative z-0">
  <div class="h-2 bg-{{ color }}-200 opacity-30 blur-xl">
  {{ event.adm_state }}

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

@@ -3,14 +3,14 @@
 {% 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">{{
+<td class="{{ padding }} text-center border border-slate-{{ border_color_level if border_color_level else '700' }}">{{ event.id }}</td>
+<td class="{{ padding }} text-center font-medium whitespace-nowrap text-white border border-slate-{{ border_color_level if border_color_level else '700' }}">{{
  event.op_state }}
 </td>
-<td class="{{ padding }} text-center font-medium text-white border border-slate-700">{{ event.adm_state }}</td>
+<td class="{{ padding }} text-center font-medium text-white border border-slate-{{ border_color_level if border_color_level else '700' }}">{{ event.adm_state }}</td>
 {% endif %}
-<td class="{{ padding }} border border-slate-700">{{ event.age }}</td>
-<td class="{{ padding }} border border-slate-700">{{ event.downtime }}</td>
-<td class="{{ padding }} border border-slate-700">{{ event.router }}</td>
-<td class="{{ padding }} border border-slate-700">{{ event.port }}</td>
-<td class="{{ padding }} border border-slate-700">{{ event.description }}</td>
+<td class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }}">{{ event.age }}</td>
+<td class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }}">{{ event.downtime }}</td>
+<td class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }}">{{ event.router }}</td>
+<td class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }}">{{ event.port }}</td>
+<td class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }}">{{ event.description }}</td>

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

@@ -6,7 +6,7 @@
  checked
  hx-get="/event/{{ id }}/unselect"
  hx-trigger='click from:#unselect-event-{{ id }}, dblclick from:#unselect-event-{{ id }} consume'
- hx-target="closest td"
+ hx-target="#event-accordion-row-{{ id }}"
  hx-swap="outerHTML"
  >
  <label for="unselect-event-{{ id }}" class="sr-only">checkbox event {{ id }}</label>

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

@@ -5,8 +5,9 @@
  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="closest td"
+ hx-target="#event-accordion-row-{{ id }}"
  hx-swap="outerHTML"
+
  >
  <label for="select-event-{{ id }}" class="sr-only">checkbox event {{ id }}</label>
  </div>

src/howitz/templates/components/row/expand-btn.html

@@ -1,6 +1,6 @@
 <td
  id="toggle-row-btn-{{ id }}"
- class="{{ padding }} border border-slate-700 relative"
+ class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }} relative"
  hx-get="/events/{{ id }}/expand_row"
  hx-trigger="click"
  hx-target="#event-accordion-row-{{ id }}"

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

@@ -1,33 +1,65 @@
 {% 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"
->
+ {% if is_selected %}
+ <tr
+ class="bg-white border-2 dark:bg-gray-700 dark:border-gray-500 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' %}
 
- {% if is_selected %}
- {% include "/components/row/event-checked-box.html" %}
+ {% if is_selected %}
+ {% include "/components/row/event-checked-box.html" %}
+ {% else %}
+ {% include "/components/row/event-unchecked-box.html" %}
+ {% endif %}
+
+ {% with event=event, border_color_level = '500' if is_selected else '700' %}
+ {% include "/components/row/data-cells.html" %}
+ {% endwith %}
+
+ {% with id=id, color=event.color, border_color_level = '500' if is_selected else '700' %}
+ {% include "/components/row/collapse-btn.html" %}
+ {% endwith %}
+
+ {% endwith %}
+
+ </tr>
  {% else %}
- {% include "/components/row/event-unchecked-box.html" %}
- {% endif %}
+ <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' %}
+
+ {% if is_selected %}
+ {% include "/components/row/event-checked-box.html" %}
+ {% else %}
+ {% include "/components/row/event-unchecked-box.html" %}
+ {% endif %}
 
- {% with event=event %}
- {% include "/components/row/data-cells.html" %}
- {% endwith %}
+  {% with event=event %}
+  {% include "/components/row/data-cells.html" %}
+  {% endwith %}
 
- {% with id=id, color=event.color %}
- {% include "/components/row/collapse-btn.html" %}
- {% endwith %}
+ {% with id=id, color=event.color %}
+ {% include "/components/row/collapse-btn.html" %}
+ {% endwith %}
+
+ {% endwith %}
+
+ </tr>
+ {% endif %}
 
- {% endwith %}
 
-</tr>
 
-{% include "/components/accordion/event-details.html" %}
+ {% include "/components/accordion/event-details.html" %}
 
 {% endblock content %}

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

@@ -0,0 +1,28 @@
+<tr
+ class="bg-white border-2 dark:bg-gray-700 dark:border-gray-500 hover:bg-gray-50 dark:hover:bg-gray-600"
+ id="event-accordion-row-{{ id }}"
+ hx-get="/events/{{ id }}/expand_row"
+ hx-trigger="dblclick"
+ hx-target="#event-accordion-row-{{ id }}"
+ hx-swap="outerHTML"
+>
+ {% with padding='px-3 py-2' %}
+
+ {% if is_selected %}
+ {% include "/components/row/event-checked-box.html" %}
+ {% else %}
+ {% include "/components/row/event-unchecked-box.html" %}
+ {% endif %}
+
+ {% with event=event, border_color_level = '500' if is_selected else '700' %}
+ {% include "/components/row/data-cells.html" %}
+ {% endwith %}
+
+ {% with id=id, color=event.color, border_color_level = '500' if is_selected else '700' %}
+ {% include "/components/row/expand-btn.html" %}
+ {% endwith %}
+
+ {% endwith %}
+
+</tr>
+

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

@@ -0,0 +1,65 @@
+{% block content %}
+
+ {% if is_selected %}
+ <tr
+ class="bg-white border-2 dark:bg-gray-700 dark:border-gray-500 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' %}
+
+ {% if is_selected %}
+ {% include "/components/row/event-checked-box.html" %}
+ {% else %}
+ {% include "/components/row/event-unchecked-box.html" %}
+ {% endif %}
+
+ {% with event=event, border_color_level = '500' if is_selected else '700' %}
+ {% include "/components/row/data-cells.html" %}
+ {% endwith %}
+
+ {% with id=id, color=event.color, border_color_level = '500' if is_selected else '700' %}
+ {% include "/components/row/collapse-btn.html" %}
+ {% endwith %}
+
+ {% endwith %}
+
+ </tr>
+ {% else %}
+ <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' %}
+
+ {% if is_selected %}
+ {% include "/components/row/event-checked-box.html" %}
+ {% else %}
+ {% include "/components/row/event-unchecked-box.html" %}
+ {% endif %}
+
+ {% with event=event %}
+ {% include "/components/row/data-cells.html" %}
+ {% endwith %}
+
+ {% with id=id, color=event.color %}
+ {% include "/components/row/collapse-btn.html" %}
+ {% endwith %}
+
+ {% endwith %}
+
+ </tr>
+ {% endif %}
+
+
+
+ {% include "/components/accordion/event-details.html" %}
+
+{% endblock content %}

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

@@ -1,5 +1,5 @@
 <table
- class="border-collapse border border-slate-500 w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto"
+ class="border-collapse border border-slate-500 w-full text-sm text-left text-gray-600 dark:text-gray-300 table-auto"
  hx-get="/get_events"
  hx-swap="innerHTML"
  hx-target="#eventlist-list"