devicehub-django/admin/templates/states_panel.html

{% extends "base.html" %}
{% load i18n django_bootstrap5 %}

{% block content %}
<div class="row">
  <div class="col">
    <h3>{{ subtitle }}</h3>
  </div>
  <div class="col text-end">
    <button type="button" class="btn btn-green-admin" data-bs-toggle="modal" data-bs-target="#addStateModal">
      <i class="fas fa-plus text-secondary align-center p-1"></i>
      {% trans "Add" %}
    </button>
  </div>
</div>

<div class="row mt-4">
  <div class="col">
    {% if state_definitions %}
  <table class="table table-hover table-bordered align-middle">
    <caption class="text-muted small">
      {% trans 'Move and drag state definitions to reorder' %}
    </caption>
  <thead class="table-light">
    <tr>
      <th scope="col" width="1%">
      </th>
      <th scope="col" width="7%" class="text-center">#
      </th>
      <th scope="col" class="">{% trans "State" %}
      </th>
      <th scope="col" width="15%" class="text-center">{% trans "Actions" %}
      </th>
    </tr>
  </thead>
  <tbody id="sortable_list">
    {% for state_definition in state_definitions %}
      <tr
        data-lookup="{{ state_definition.id }}"
        style="cursor: grab;"
        class="align-items-center">

        <td class="text-center">
          <i class="bi bi-grip-vertical text-muted" aria-hidden="true">
          </i>
        </td>
        <td class="fw-bold text-center">
          {{ state_definition.order }}
        </td>
        <td>
          {{ state_definition.state }}
        </td>

        <!-- action buttons -->
        <td class="text-center">
          <div class="d-flex justify-content-center gap-1">
            <button
              type="button"
              class="btn btn-sm btn-info"
              data-bs-toggle="modal"
              data-bs-target="#editStateModal{{ state_definition.id }}">
              <i class="bi bi-pencil">
              </i>
            </button>
            <button
              type="button"
              id="delete-btn"
              class="btn btn-sm btn-danger"
              data-bs-toggle="modal"
              data-bs-target="#deleteStateModal{{ state_definition.id }}">
              <i class="bi bi-trash">
              </i>
            </button>
          </div>
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

  <form id="orderingForm" method="post" action="{% url 'admin:update_state_order' %}">
        {% csrf_token %}
        <input type="hidden" id="orderingInput" name="ordering">
         <button id="saveOrderBtn" class="btn btn-success mt-5 float-start collapse" >{% trans "Update Order" %}</button>
      </form>


    {% else %}  
      <div class="alert alert-primary text-center mt-5" role="alert">
        {% trans "No states found on current organization" %}
      </div>
    {% endif %}
  </div>
</div>

<!-- add state definition Modal -->
<div class="modal fade" id="addStateModal" tabindex="-1" aria-labelledby="addStateModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addStateModalLabel">{% trans "Add State Definition" %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

        <form method="post" action="{%url 'admin:add_state_definition'%}">
          {% csrf_token %}
          <div class="mb-3">
            <label for="stateInput" class="form-label">{% trans "State" %}</label>
            <input type="text" class="form-control" id="stateInput" name="state" maxlength="50" required>
            <div class="form-text">{% trans "Maximum 50 characters." %}</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
            <button type="submit" class="btn btn-primary">{% trans "Add state definition" %}</button>
          </div>
        </form>

      </div>
    </div>
  </div>
</div>

<!-- Edit State Definition Modals -->
{% for state_definition in state_definitions %}
<div class="modal fade" id="editStateModal{{ state_definition.id }}" tabindex="-1" aria-labelledby="editStateModalLabel{{ state_definition.id }}" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" action="{% url 'admin:edit_state_definition' state_definition.id %}">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title" id="editStateModalLabel{{ state_definition.id }}">
            {% trans "Edit State Definition" %}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
        </div>
        <div class="modal-body">
          <div class="alert alert-warning text-center" role="alert">
            {% trans "Existing devices with this state will not have their state names changed." %}
          </div>
          <div class="mb-3">
            <label for="editStateInput{{ state_definition.id }}" class="form-label">{% trans "State" %}</label>
            <input type="text" class="form-control" id="editStateInput{{ state_definition.id }}" name="state" maxlength="50" value="{{ state_definition.state }}" required>
            <div class="form-text">{% trans "Maximum 50 characters." %}</div>
          </div>

        <p class="text-muted text-end">{% trans "Any changes in order will not be saved." %}</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
          <button type="submit" class="btn btn-primary">{% trans "Save Changes" %}</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endfor %}


<!-- delete state definition Modal -->
{% for state_definition in state_definitions %}
<div class="modal fade" id="deleteStateModal{{ state_definition.id }}" tabindex="-1" aria-labelledby="deleteStateModalLabel{{ state_definition.id }}" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold" id="deleteStateModalLabel{{ state_definition.id }}">
          {% trans "Delete State Definition" %}
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
      </div>
      <div class="modal-body">
        <div class="alert alert-warning text-center" role="alert">
            {% trans "Devices with a State of this description will not have their State altered" %}
          </div>
        <div class="d-flex align-items-center border rounded p-3 mt-3">
          <span class="badge bg-secondary me-3 display-6">{{ state_definition.order }}</span>
          <div>
            <p class="mb-0 fw-bold">{{ state_definition.state }}</p>
          </div>
        </div>

        <p class="text-muted text-end mt-3">{% trans "Any changes in order will not be saved." %}</p>

      </div>

      <div class="modal-footer">
        <form method="post" action="{% url 'admin:delete_state_definition' state_definition.pk %}">
          {% csrf_token %}
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            {% trans "Cancel" %}
          </button>
          <button type="submit" class="btn btn-danger">
            {% trans "Delete" %}
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

{% endfor %}


<script>
  //following https://dev.to/nemecek_f/django-how-to-let-user-re-order-sort-table-of-content-with-drag-and-drop-3nlp
  const saveOrderingButton = document.getElementById('saveOrderBtn');
  const orderingForm = document.getElementById('orderingForm');
  const formInput = orderingForm.querySelector('#orderingInput');
  const sortable_table = document.getElementById('sortable_list');

  const sortable = new Sortable(sortable_table, {
      animation: 150,
      swapThreshold: 0.10,
      onChange: () => {
        //TODO: change hide/show animation to a nicer one 
        const collapse = new bootstrap.Collapse(saveOrderingButton, {
          toggle: false
        });
        collapse.show();
      }
    });

 function saveOrdering() {
    const rows = sortable_table.querySelectorAll('tr');
    let ids = [];
    for (let row of rows) {
        ids.push(row.dataset.lookup);
    }
    formInput.value = ids.join(',');
    orderingForm.submit();
 }

 saveOrderingButton.addEventListener('click', saveOrdering);

</script>


{% endblock %}