Jun 24 - Set broadcast message limit to 500 characters

app/templates/admin/broadcast.html

@@ -48,9 +48,12 @@
                             Message <span class="text-danger">*</span>
                         </label>
                         <textarea class="form-control" id="body" name="body"
-                                  rows="4" required
+                                  rows="4" required maxlength="500"
                                   placeholder="e.g. A new version of JanitorialQC is available. Please update to v1.3 from the App Store."></textarea>
-                        <div class="form-text">The full message body shown in the notification and in-app inbox.</div>
+                        <div class="d-flex justify-content-between align-items-center mt-1">
+                            <span class="form-text mb-0">The full message body shown in the notification and in-app inbox.</span>
+                            <span id="bodyCounter" class="form-text mb-0 text-muted">0 / 500</span>
+                        </div>
                     </div>
 
                     <div class="mb-4">
@@ -149,4 +152,22 @@
     </div>
 
 </div><!-- /row -->
+
+{% block scripts %}
+<script>
+(function () {
+    var textarea = document.getElementById('body');
+    var counter  = document.getElementById('bodyCounter');
+    var MAX      = 500;
+
+    function update() {
+        var len = textarea.value.length;
+        counter.textContent = len + ' / ' + MAX;
+        counter.className = 'form-text mb-0 ' + (len >= MAX ? 'text-danger fw-semibold' : len >= MAX * 0.9 ? 'text-warning' : 'text-muted');
+    }
+
+    textarea.addEventListener('input', update);
+    update();
+})();
+</script>
 {% endblock %}