stylish new popup for state change

device/templates/details.html

@@ -2,11 +2,30 @@
 {% load i18n %}
 
 {% block content %}
-  <div class="row">
+
-    <div class="col">
+<div class="row">
-      <h3>{{ object.shortid }}</h3>
+  <div class="col">
-    </div>
+    <h3>{{ object.shortid }}</h3>
   </div>
+  <div class="col text-end">
+
+    <div class="dropdown">
+      <button class="btn btn-green-admin dropdown-toggle" type="button" id="addStateDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+        {% trans "Change state to" %}
+      </button>
+      <ul class="dropdown-menu" aria-labelledby="addStateDropdown">
+        {% for state in state_definitions %}
+          <li>
+            <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#addStateModal{{ state.id }}">
+              {{ state.state }}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  
+  </div>
+</div>
 
   <div class="row">
     <div class="col">
@@ -294,6 +313,64 @@
       </div>
     </div>
   </div>
+
+<!-- add state to device popup modal-->
+{% for state in state_definitions %}
+<div class="modal fade" id="addStateModal{{ state.id }}" tabindex="-1" aria-labelledby="addStateModalLabel{{ state.id }}" aria-hidden="true">
+  <div class="modal-dialog">
+
+    <form method="post" action="">
+      {% csrf_token %}
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="addStateModalLabel{{ state.id }}">{% trans "Summary of changes" %}</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body m-2">
+
+
+          <div class="mb-3">
+            <div class="d-flex align-items-center">
+              <i class="bi bi-arrow-right-circle text-danger me-2"></i>
+
+              <span class="text-danger fw-bold me-2">{% trans "From:" %}</span>
+              <span class="text-danger fw-italic">state_placeholder</span>
+            
+            </div>
+            <div class="d-flex align-items-center mt-2">
+              <i class="bi bi-arrow-right-circle text-success me-2"></i>
+              <span class="text-success fw-bold me-2">{% trans "To:" %}</span>
+              <span class="text-success fw-italic">{{ state.state }}</span>
+            </div>
+          </div>
+
+          <div class="form-check form-switch mt-3 d-flex justify-content-end">
+            <label class="form-check-label font-monospace" for="addNoteCheckbox{{ state.id }}">
+              {% trans "Add a note" %}
+            </label>
+            <input class="form-check-input ms-2" type="checkbox" id="addNoteCheckbox{{ state.id }}" data-bs-toggle="collapse" data-bs-target="#collapseInput{{ state.id }}" name="add_note">
+          </div>
+          
+          <div class="mb-3 mt-2 collapse" id="collapseInput{{ state.id }}">
+            <textarea type="text" class="form-control" id="stateNote{{ state.id }}" name="note" rows="4" maxlength="200" placeholder="{% trans "Max 200 characters" %}"></textarea>
+          </div>  
+          
+          <input type="hidden" name="state_id" value="{{ state.id }}">
+
+        </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 "Add State" %}</button>
+        </div>
+        
+      </div>
+    </form>
+    
+  </div>
+</div>
+{% endfor %}
+
+
 {% endblock %}
 
 {% block extrascript %}

device/views.py

@@ -14,6 +14,7 @@ from django.views.generic.edit import (
     DeleteView,
 )
 from django.views.generic.base import TemplateView
+from action.models import StateDefinition
 from dashboard.mixins import DashboardView, Http403
 from evidence.models import UserProperty, SystemProperty, Property
 from lot.models import LotTag
@@ -112,6 +113,7 @@ class DetailsView(DashboardView, TemplateView):
             'object': self.object,
             'snapshot': self.object.get_last_evidence(),
             'lot_tags': lot_tags,
+            "state_definitions": StateDefinition.objects.filter(institution=self.request.user.institution).order_by('order'),
         })
         return context