First Final Version

leitstelle/templates/leitstelle/create.html

@@ -3,14 +3,25 @@
 
 {% block content %}
 
+<script>
+    function checkSW(){
+        let item = document.getElementById("sw_select").value;
+        if (item != "0"){
+            document.getElementById("submit_alarm").classList.remove("disabled")
+        } else {
+            document.getElementById("submit_alarm").classList.add("disabled")
+        }
+    }
+</script>
+
 <div id="box1">
     <h4 style="color: red; text-transform: uppercase; margin-bottom: 2rem"><b>Einsatzgenerierung</b></h4>
-    <form action="" method="post">
+    <form method="post">{% csrf_token %}
         <div class="row mb-5">
             <div class="col-5" style="text-align: left;">
                 <div id="stichwort">
                     <h4>Stichwort:</h4>
-                    <select class="form-select" aria-label="Default select example" required>
+                    <select class="form-select" name="stichwort" id="sw_select" onchange="checkSW()" aria-label="Default select example" required>
                         <option selected value="0">Stichwort wählen...</option>
                         {% for sw in sw %}
                         <option value="1">{{sw.1}}</option>
@@ -24,7 +35,7 @@
             <div class="col-5">
                 <div id="zusatztext">
                     <h4>Freitext</h4>
-                    <input type="text" class="form-control" name="zusatztext" placeholder="z.B. ROLLER Markt" maxlength="15" required>
+                    <input type="text" class="form-control" name="freitext" placeholder="z.B. ROLLER Markt" maxlength="50" required>
                 </div>
             </div>
         </div>
@@ -34,28 +45,53 @@
                 let item_div = document.getElementById("fz_"+fzid+"_div")
                 let item_cb = document.getElementById("fz_"+fzid+"_cb")
                 if (!item_cb.checked){
-                    console.log("MOIN NÖ")
                     item_cb.checked = true;
                     item_div.classList.add("fz_activ")
                 } else {
-                    console.log("MOIN JA")
                     item_cb.checked = false;
                     item_div.classList.remove("fz_activ")
                 }
             }
+
+            function allFZ(){
+                let items = Array.from(document.getElementsByClassName("fz_item"))
+                var cb_all = document.getElementById("all_select")
+                var all_checked = false
+                if (cb_all.checked) {
+                    all_checked = true
+                    cb_all.checked = false
+                    document.getElementById("selAll").innerHTML = "Alle Auswählen"
+                } else {
+                    all_checked = false
+                    cb_all.checked = true
+                    document.getElementById("selAll").innerHTML = "Alle Abwählen"
+                }
+                items.forEach(function (item){
+                    let item_id = item.id
+                    let item_nr = item_id.replace("fz_", "").replace("_div", "")
+                    if (all_checked) {
+                        document.getElementById(item_id).classList.remove("fz_activ")
+                        document.getElementById("fz_"+item_nr+"_cb").checked = false
+                    } else {
+                        document.getElementById(item_id).classList.add("fz_activ")
+                        document.getElementById("fz_"+item_nr+"_cb").checked = true
+                    }
+                })
+            }   
         </script>
 
-        <h4 style="margin-bottom: 1rem;">Fahrzeuge</h4>
+        <h4 style="margin-bottom: 1rem;">Fahrzeuge<span class="btn btn-warning" style="margin-left: 2rem;" id="selAll" onclick="allFZ()">Alle Auswählen</span></h4>
+        <input type="checkbox" class="d-none" id="all_select">
         <div class="row mb-5">
             {% for fz in fz %}
-            <div class="col-3" id="fz_{{fz.0}}_div" onclick='fzcb("{{fz.0}}")' style="padding: 1rem; margin-left: 0.5rem; box-shadow: 0 0 1rem gray; border-radius: 1rem; align-items: center; cursor: pointer; text-align:center; margin-bottom:0.5rem;">
+            <div class="col-3 fz_item" id="fz_{{fz.0}}_div" onclick='fzcb("{{fz.0}}")' style="padding: 1rem; margin-left: 0.5rem; box-shadow: 0 0 1rem gray; border-radius: 1rem; align-items: center; cursor: pointer; text-align:center; margin-bottom:0.5rem;">
                 {{ fz.3 }} - {{ fz.2 }}
-                <input type="checkbox" class="d-none" id="fz_{{fz.0}}_cb">
+                <input type="checkbox" class="d-none" name="fz" value="{{fz.0}}" id="fz_{{fz.0}}_cb">
             </div>
             {% endfor %}
         </div>
 
-        <input class="btn-danger btn" type="submit" value="AUSLÖSEN"> 
+        <input class="btn-danger btn disabled" type="submit" id="submit_alarm" value="AUSLÖSEN"> 
         <a href="/leitstelle/" class="btn btn-secondary">ABBRUCH</a>
     </form>       
     </div>

leitstelle/views.py

@@ -1,5 +1,5 @@
 from django.shortcuts import render
-from main.models import alarmierung_SW, fahrzeug, leitstelle
+from main.models import alarmierung_SW, fahrzeug, leitstelle, alarmierung, feuerwehr
 
 # Create your views here.
 def index(request):
@@ -8,6 +8,20 @@ def index(request):
 def create(request):
     sw_request = alarmierung_SW.objects.all().values_list()
     fz_request = fahrzeug.objects.all().order_by('Funkrufname').values_list()
+
+    if request.method == "POST":
+        print(request.POST)
+
+        newAlarm = alarmierung()
+        newAlarm.Stichwort = alarmierung_SW.objects.get(id=int(request.POST.get("stichwort")))
+        newAlarm.ft = request.POST.get("freitext")
+        # HINWEIS - NACHFOLGEND IST DAUERHAFT AUF "ALSFELD" GESTELLT DA NOCH KEINE AUSWAHL MÖGLICH
+        newAlarm.Standort = feuerwehr.objects.get(id=1)
+        fahrzeuge = request.POST.getlist("fz")
+        print(fahrzeuge)
+        newAlarm.fz = str(request.POST.getlist("fz"))
+        newAlarm.save()
+
     return render(request, 'leitstelle/create.html', {'sw':sw_request, 'fz':fz_request})
 
 def setStation(request):

main/models.py

@@ -28,7 +28,7 @@ class alarmierung_SW(models.Model):
 
 # ALARMIERUNG
 class alarmierung(models.Model):
-    timestamp = models.DateTimeField(auto_created=True)
+    timestamp = models.DateTimeField(auto_created=True, auto_now_add=True)
     sw = models.ForeignKey(alarmierung_SW, on_delete=models.CASCADE, name="Stichwort")
     ft = models.CharField(max_length=100, null=True)
     fz = models.CharField(max_length=100, null=True)

main/static/css/styles.css

@@ -34,3 +34,27 @@ img.pb {
 .form-control {
     height: 2.5rem;
 }
+
+.blink {
+    animation-name: animation_blink;
+    animation-timing-function: ease-in;
+    animation-duration: 2s; 
+    animation-iteration-count: infinite;
+}
+@keyframes animation_blink {
+    0% { opacity: 1; }
+    50% { opacity: 0.1; }
+    100% { opacity: 1; }    
+}
+
+.shadow_blink {
+    animation-name: shadow_blink;
+    animation-timing-function: ease-in;
+    animation-duration: 2s; 
+    animation-iteration-count: infinite;
+}
+@keyframes shadow_blink {
+    0% { box-shadow: 0 0 2rem rgb(255, 0, 0); }
+    50% { box-shadow: 0 0 2rem rgba(255, 0, 0, 0.109); }
+    100% { box-shadow: 0 0 2rem rgb(255, 0, 0); }    
+}

monitor/static/css/style.css

@@ -1,3 +0,0 @@
-#einsatz{
-
-}

monitor/templates/monitor/index.html

@@ -3,101 +3,68 @@
 
 
 {% block content %}
-<style>
-#einsatz{
-    margin: 3%;
-    text-align: center; 
-    border-width: 1px; 
-    border-color: black; 
-    border-style: solid;
-}
-#einsatz h1{
-    font-weight: bolder;
-    animation-duration: 1s;
-    animation-name: alarmh1;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-} 
-@keyframes alarmh1 {
-    from {color: red;}
-    to {color: black;}
-}
 
-</style>
+<script>
+    setInterval(function() {
+        location.reload();
+    }, 5000);
+</script>
 
-<div class="container-fluid row justify-content-start" style="padding: 0rem; margin-top: 2rem;" onload="startTime()">
+<div class="container-fluid row justify-content-between mb-5" style="padding: 0rem; margin-top: 2rem;" onload="startTime()">
     <div class="col-4 text-center row" style="height: 15vh; align-items: center; border-radius: 1rem; box-shadow: 0rem 0rem 2rem rgb(97, 97, 97);">
         <h1 id="date-time" style="font-size: clamp(1rem, 5vw, 10rem); text-align: center;"></h1>
     </div>
+    {% if alarm is not None %}
+    <div class="col-4 text-center"><img class="blink" width="150rem" style="" src="{% static 'img/alarm.png' %}" alt="User"></div>
+    {% endif %}
+    <div class="col-4"></div>
 </div>
 
-<button onclick="einsatzalarmfunktion(); playsound1()" style="position: absolute; bottom: 40px; left: 40px;">Klick mich hart!</button>
+{% if alarm is not None %}
 
-<div id="einsatz" style="visibility: hidden;">
+<audio id="audio">
-    <h1>ALARM</h1>
+    <source src="{% static 'sounds/Audio13.wav' %}">
+</audio>
 
-      Inhalt Alarm
+{% if alarm.5 is True %}
+<script>
+    document.getElementById("audio").play()
+</script>
+{% endif %}
 
+<div class="row mb-2">
+    <div class="text-center row shadow_blink" style="height: 60vh; align-items: top; border-radius: 1rem;">
+        <h1 style="font-size: clamp(1rem, 5vw, 10rem); text-align: center; color: red; margin-top:2rem;">NEUER EINSATZ</h1>
+        <div class="row" style="margin-top: 0rem;">
+            <div class="col-3 offset-1 text-start mb-5">
+                <h3>Stichwort:</h3>
+                <h1 style="font-size: 3rem;"><b>{{ alarm.2 }}</b></h1>
+            </div>
+            <div class="col-8 text-start">
+                <h3>Infos:</h3>
+                <h1><b>{{ alarm.3 }}</b></h1>
+            </div>
+        </div>
+        <div class="row" style="margin-top: -2rem;">
+            <div class="col-3 offset-1 text-start">
+                <h3><b>Fahrzeuge:</b></h3>
+            </div>
+        </div>
+        <div class="row" style="margin-top: -4rem;">
+            {% for fz in alarm.4 %}
+            <div class="col-2 offset-1 row justify-content-center" style="box-shadow: 0 0 1rem gray; height: 5vh; border-radius: 1rem; align-items:center; margin-top: -3">
+                <b style="font-size: 1.175rem;">{{ fz }}</b>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
 </div>
 
-<script src="{% static 'js/clock.js' %}" type="text/javascript"></script>
+{% endif %}
 
 
-<script>
-function einsatzalarmfunktion() {
-    var x = document.getElementById("einsatz");
-    if (x.style.visibility === "hidden") {
-      x.style.visibility = "visible";
-    } else {
-      x.style.visibility = "hidden";
-    }
-  } 
-</script>
-
-<script type="text/javascript">
 
-    // --  funktion um eine Audiodatei abzuspielen    
+<script src="{% static 'js/clock.js' %}" type="text/javascript"></script>
-        function playsound2(){
-          var audio = new Audio('audio1.mp3')
-          audio.play();
-        }
-    
-    //  --  repeat -> anzahl der audiodateien 
-    //  --  playlist -> name & reihenfolge audio dateien
-        var 
-        a1 = new Audio("static/sounds/audio1.mp3"),
-        a2 = new Audio("audio2.mp3"),
-        a3 = new Audio("audio3.mp3"),
-        a4 = new Audio("audio2.mp3"),
-        a5 = new Audio("audio5.mp3"),
-        a6 = new Audio("audio6.mp3"),
-        playlist = [a6, a1, a2, a5],
-        current = null,
-        idx = 0;
-        repeat = 4;
-    
-      function playsound1() {
-        if (current === null || current.ended) {
-          // go to next
-          current = playlist[idx++];
-    
-          // check if is the last of playlist and return to first
-          if (idx >= playlist.length)
-            idx = 0;
-    
-          // play
-          current.play();
-          repeat--;
-          }
-          if (repeat != 0) { 
-            setTimeout(playsound1, 100);
-          }
-        }
-      
-      
-    
-    //Playlist mit Javascript    https://www.webcodegeeks.com/html5/html5-audio-player-example/
-</script>
 
 
 {% endblock %}

monitor/views.py

@@ -1,5 +1,27 @@
 from django.shortcuts import render
+from main.models import alarmierung, alarmierung_SW, fahrzeug
+from datetime import timedelta
+from django.utils import timezone
+import ast
 
 # Create your views here.
 def index(request):
-    return render(request, 'monitor/index.html')
+    now = timezone.now()
+    fifteen_minutes_ago = now - timedelta(minutes=10)
+    fifteen_seconds_ago = now - timedelta(seconds=15)
+    alarm_request = alarmierung.objects.filter(timestamp__gte=fifteen_minutes_ago).order_by("-timestamp").values_list()[0] if alarmierung.objects.filter(timestamp__gte=fifteen_minutes_ago).values_list().__len__() > 0 else None
+    if alarm_request != None:
+        alarm_request = alarm_request[:2] + (alarmierung_SW.objects.get(id=int(alarm_request[2])).kürzel,) + alarm_request[3:]
+        fz_list = []
+        print(alarm_request[4])
+        for i in ast.literal_eval(alarm_request[4]):
+            fz = fahrzeug.objects.get(id=int(i))
+            fz_list.append(fz.Funkrufname + " - " + fz.kürzel)
+        alarm_request = alarm_request[:4] + (fz_list,)
+        if now - alarm_request[1] > timedelta(seconds=25):
+            alarm_request = alarm_request[:5] + (False,)
+        else:
+            alarm_request = alarm_request[:5] + (True,)
+
+
+    return render(request, 'monitor/index.html', {'alarm':alarm_request})