05/22 Enhance codes and fix bugs 3

app/templates/tickets/detail.html

@@ -811,11 +811,103 @@ function buildCommentEl(c) {
         {{ info_row('bi-person-check', 'Assigned to', ticket.assignee.full_name if ticket.assignee else '—') }}
         {{ info_row('bi-calendar3', 'Created', ticket.created_at | localtime("%b %d, %Y")) }}
         {{ info_row('bi-calendar-check', 'Updated', ticket.updated_at | localtime("%b %d, %Y")) }}
-        {% if ticket.due_date %}{{ info_row('bi-alarm', 'Due Date', ticket.due_date | localtime("%b %d, %Y")) }}{% endif %}
+        {% if ticket.due_date %}
+        {% set is_done = ticket.status in ('resolved', 'closed') %}
+        {% set overdue = not is_done and ticket.due_date < now %}
+        {% set due_str = ticket.due_date | localtime("%b %d, %Y") %}
+        {% if is_done %}
+          {% set sla_badge = '<span style="font-size:10px;padding:1px 6px;border-radius:4px;background:rgba(5,150,105,.12);color:var(--success);font-weight:600;margin-left:6px;">Completed</span>' %}
+        {% elif overdue %}
+          {% set sla_badge = '<span style="font-size:10px;padding:1px 6px;border-radius:4px;background:rgba(220,38,38,.12);color:var(--danger);font-weight:600;margin-left:6px;"><i class=\"bi bi-exclamation-triangle-fill\"></i> Overdue</span>' %}
+        {% else %}
+          {% set sla_badge = '<span style="font-size:10px;padding:1px 6px;border-radius:4px;background:rgba(5,150,105,.12);color:var(--success);font-weight:600;margin-left:6px;">On track</span>' %}
+        {% endif %}
+        {{ info_row('bi-alarm', 'SLA Due', due_str ~ sla_badge) }}
+        {% endif %}
         {% if ticket.resolved_at %}{{ info_row('bi-check-circle', 'Resolved', ticket.resolved_at | localtime("%b %d, %Y")) }}{% endif %}
       </div>
     </div>
 
+    <!-- Watch / Unwatch -->
+    <div class="card mb-3">
+      <div class="card-body py-2 px-3 d-flex align-items-center justify-content-between">
+        <span style="font-size:13px;color:var(--muted);">
+          <i class="bi bi-eye me-1"></i>
+          <span id="watch-label">{% if is_watching %}Watching this ticket{% else %}Not watching{% endif %}</span>
+        </span>
+        <button id="watch-btn" class="btn btn-sm {% if is_watching %}btn-secondary{% else %}btn-outline-secondary{% endif %}"
+                style="font-size:12px;"
+                onclick="toggleWatch({{ ticket.id }}, {{ 'true' if is_watching else 'false' }})">
+          <i class="bi {% if is_watching %}bi-eye-slash{% else %}bi-eye{% endif %}" id="watch-icon"></i>
+          <span id="watch-btn-text">{% if is_watching %}Unwatch{% else %}Watch{% endif %}</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- Time Tracking (IT staff only) -->
+    {% if current_user.is_it_staff %}
+    <div class="card mb-3">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <span><i class="bi bi-clock me-2"></i>Time Logged</span>
+        <span style="font-size:12px;color:var(--muted);" id="total-time-display">
+          {{ (total_minutes // 60) }}h {{ (total_minutes % 60) }}m total
+        </span>
+      </div>
+      <div class="card-body">
+        <form id="time-log-form" class="d-flex gap-2 align-items-end mb-2">
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+          <div style="flex:0 0 80px;">
+            <label class="form-label" style="font-size:11px;margin-bottom:3px;">Minutes</label>
+            <input type="number" name="minutes" min="1" max="480" class="form-control form-control-sm"
+                   placeholder="30" id="time-minutes-input"/>
+          </div>
+          <div style="flex:1;">
+            <label class="form-label" style="font-size:11px;margin-bottom:3px;">Note (optional)</label>
+            <input type="text" name="note" maxlength="200" class="form-control form-control-sm"
+                   placeholder="e.g. Investigated logs"/>
+          </div>
+          <button type="submit" class="btn btn-primary btn-sm">Log</button>
+        </form>
+        {% if time_entries %}
+        <div style="font-size:12px;">
+          {% for e in time_entries %}
+          <div class="d-flex justify-content-between py-1" style="border-top:1px solid var(--border);">
+            <span style="color:var(--muted);">{{ e.user.full_name.split()[0] }} — {{ e.note or '—' }}</span>
+            <span style="font-weight:600;white-space:nowrap;">{{ e.minutes }}m</span>
+          </div>
+          {% endfor %}
+        </div>
+        {% endif %}
+      </div>
+    </div>
+    <script>
+    (function() {
+      const form = document.getElementById('time-log-form');
+      if (!form) return;
+      form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        const data = new FormData(form);
+        fetch('{{ url_for("tickets.log_time", ticket_id=ticket.id) }}', {
+          method: 'POST',
+          headers: {'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content},
+          body: data,
+        })
+        .then(r => r.json())
+        .then(d => {
+          if (d.ok) {
+            const h = Math.floor(d.total_minutes / 60), m = d.total_minutes % 60;
+            document.getElementById('total-time-display').textContent = h + 'h ' + m + 'm total';
+            form.reset();
+            showToast('Time logged', d.minutes + ' minutes logged successfully.');
+          }
+        })
+        .catch(() => showToast('Error', 'Could not log time. Please try again.'));
+      });
+    })();
+    </script>
+    {% endif %}
+
     <!-- History -->
 <!-- ── Satisfaction rating (visible to creator + IT staff) ──────── -->
 {% if ticket.satisfaction %}
@@ -1050,4 +1142,28 @@ function buildCommentEl(c) {
   </div>
 </div>
 {% endif %}
+{% block scripts %}
+<script>
+function toggleWatch(ticketId, currently) {
+  const action = currently ? 'unwatch' : 'watch';
+  fetch('/tickets/' + ticketId + '/' + action, {
+    method: 'POST',
+    headers: {
+      'X-Requested-With': 'XMLHttpRequest',
+      'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content,
+    },
+  })
+  .then(r => r.json())
+  .then(d => {
+    const nowWatching = d.watching;
+    document.getElementById('watch-label').textContent = nowWatching ? 'Watching this ticket' : 'Not watching';
+    document.getElementById('watch-icon').className = nowWatching ? 'bi bi-eye-slash' : 'bi bi-eye';
+    document.getElementById('watch-btn-text').textContent = nowWatching ? 'Unwatch' : 'Watch';
+    const btn = document.getElementById('watch-btn');
+    btn.className = 'btn btn-sm ' + (nowWatching ? 'btn-secondary' : 'btn-outline-secondary');
+    btn.setAttribute('onclick', 'toggleWatch(' + ticketId + ', ' + (nowWatching ? 'true' : 'false') + ')');
+  })
+  .catch(() => {});
+}
+</script>
 {% endblock %}