From f6a5934439c70635d69f4428896ce475776d0528 Mon Sep 17 00:00:00 2001
From: tschneider <torsten.schneider@programmschmiede.de>
Date: Tue, 23 Feb 2021 09:42:50 +0100
Subject: [PATCH] Working on tipp4 layout

---
 pfosten/resources/views/tipps/edit4.blade.php | 154 ++++++++--------
 .../views/tipps/edit4_backup.blade.php        | 173 ++++++++++++++++++
 2 files changed, 255 insertions(+), 72 deletions(-)
 create mode 100644 pfosten/resources/views/tipps/edit4_backup.blade.php

diff --git a/pfosten/resources/views/tipps/edit4.blade.php b/pfosten/resources/views/tipps/edit4.blade.php
index 9e3a1a89..461e842c 100644
--- a/pfosten/resources/views/tipps/edit4.blade.php
+++ b/pfosten/resources/views/tipps/edit4.blade.php
@@ -1,100 +1,111 @@
 @extends('layouts.layout')
 
 @section('content')
-    <div class="container">
+    <style>
 
-        <h4 style="display:flex;">{{$round->name}}</h4>
+        .centered-header {
+            width:50%;
 
-        <div >
-            <form method="POST" action="/tipps/store4">
-                {{ csrf_field() }}
-                <!-- 1 -->
-                    <div>
-                        <h5>
-                            <div style="display:flex;">
-                                <span>{{ $game1->team1 }}</span>       <span>:</span>     <span>{{ $game1->team2 }}</span>
+            margin:auto;
+            margin-bottom: 25px;
+        }
 
-                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score1_1" value="{{ $tipp1->score1==-1? '': $tipp1->score1 }}" required>
+        .page-container {
+            width: 800px;
+            height: 80vh;
+            /*
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            */
+        }
+
+        .grid-container {
+            width:780px;
+            display: grid;
+            margin: auto;
+
+            height: 100vh;
+            grid-template-columns: 125px 5px 125px 25px 5px 25px 75px 15px 0;
+            grid-template-rows: 50px 50px 50px 50px;
+        }
+    </style>
 
 
-                            <p style="float:left; width:25px;">&nbsp; : &nbsp;</p>
-                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score2_1" value="{{ $tipp1->score2==-1? '': $tipp1->score2 }}" required>
-                            <label class="lead" style="float:left; width:50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Joker &nbsp;</label>
-                            </div>
-                        </h5>
-                    </div>
+    <div class="page-container">
 
-                    <span >
-                        <input type="checkbox" name="joker_1" id="joker_1" @if($tipp1->joker===1) checked @endif>
-                    </span>
-                    <input type="hidden" name="tipp_id_1" value="{{ $tipp1->id }}">
-                    <input type="hidden" name="game_id_1" value="{{ $game1->id }}">
-                    <!-- round_id is the same for all 4 games. -->
-                    <input type="hidden" name="round_id" value="{{ $game1->round_id }}">
+        <h2 class="centered-header">{{$round->name}}</h2>
 
+        <form class="grid-container" method="POST" action="/tipps/store4">
+            {{ csrf_field() }}
+            <!-- 1 -->
+            <div>{{ $game1->team1 }}</div>
+            <span>:</span>
+            <span>{{ $game1->team2 }}</span>
 
+            <input type="text" class="lead" name="score1_1" value="{{ $tipp1->score1==-1? '': $tipp1->score1 }}" required>
+            <span>:</span>
+            <input type="text" class="lead" name="score2_1" value="{{ $tipp1->score2==-1? '': $tipp1->score2 }}" required>
+            <label style="padding:5px;justify-content: center;">Joker</label>
+            <input type="checkbox" name="joker_1" id="joker_1" @if($tipp1->joker===1) checked @endif>
 
-                <!-- 2 -->
+            <span>
+                <input type="hidden" name="tipp_id_1" value="{{ $tipp1->id }}">
+                <input type="hidden" name="game_id_1" value="{{ $game1->id }}">
+                <!-- round_id is the same for all 4 games. -->
+                <input type="hidden" name="round_id" value="{{ $game1->round_id }}">
+            </span>
 
-                <h1>&nbsp;</h1>
-                    <div>
-                        <h3>
-                            <span style="float:left; width:200px;">{{ $game2->team1 }} &nbsp; : &nbsp; </span>
-                            <span style="float:left; width:200px;">{{ $game2->team2 }}</span>
+            <!-- 2 -->
+                <div>{{ $game2->team1 }}</div>
+                <span>:</span>
+                <span>{{ $game2->team2 }}</span>
 
-                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score1_2" value="{{ $tipp2->score1==-1? '': $tipp2->score1 }}" required>
-                            <p style="float:left; width:25px;">&nbsp; : &nbsp;</p>
-                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score2_2" value="{{ $tipp2->score2==-1? '': $tipp2->score2 }}" required>
-                            <label class="lead" style="float:left; width:50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Joker &nbsp;</label>
-                        </h3>
-                    </div>
+                <input type="text" class="lead" id=""  name="score1_2" value="{{ $tipp2->score1==-1? '': $tipp2->score1 }}" required>
 
-                    <span >
-                        <input type="checkbox" name="joker_2" id="joker_2" @if($tipp2->joker===1) checked @endif>
-                    </span>
+                <span>:</span>
+                <input type="text" class="lead" id=""  name="score2_2" value="{{ $tipp2->score2==-1? '': $tipp2->score2 }}" required>
+                <label>Joker</label>
+                <input type="checkbox" name="joker_2" id="joker_2" @if($tipp2->joker===1) checked @endif>
+
+                <span>
                     <input type="hidden" name="tipp_id_2" value="{{ $tipp2->id }}">
                     <input type="hidden" name="game_id_2" value="{{ $game2->id }}">
-
+                </span>
 
                 <!-- 3 -->
-                    <h1>&nbsp;</h1>
-                    <div>
-                        <h3>
-                            <span style="float:left; width:200px;">{{ $game3->team1 }} &nbsp; : &nbsp; </span>
-                            <span style="float:left; width:200px;">{{ $game3->team2 }}</span>
+                <div>{{ $game3->team1 }}</div>
+                <span>:</span>
+                <span>{{ $game3->team2 }}</span>
 
-                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score1_3" value="{{ $tipp3->score1==-1? '': $tipp3->score1 }}" required>
-                            <p style="float:left; width:25px;">&nbsp; : &nbsp;</p>
-                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score2_3" value="{{ $tipp3->score2==-1? '': $tipp3->score2 }}" required>
-                            <label class="lead" style="float:left; width:50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Joker &nbsp;</label>
-                        </h3>
-                    </div>
+                <input type="text" class="lead" id=""  name="score1_3" value="{{ $tipp3->score1==-1? '': $tipp3->score1 }}" required>
 
-                    <span >
-                        <input type="checkbox" name="joker_3" id="joker_3" @if($tipp3->joker===1) checked @endif>
-                    </span>
-                    <input type="hidden" name="tipp_id_3" value="{{ $tipp3->id }}">
-                    <input type="hidden" name="game_id_3" value="{{ $game3->id }}">
+                <span>:</span>
+                <input type="text" class="lead" id=""  name="score2_3" value="{{ $tipp3->score2==-1? '': $tipp3->score2 }}" required>
+                <label>Joker</label>
+                <input type="checkbox" name="joker_3" id="joker_3" @if($tipp3->joker===1) checked @endif>
+
+                <span>
+                    <input type="hidden" name="tipp_id_2" value="{{ $tipp3->id }}">
+                    <input type="hidden" name="game_id_2" value="{{ $game3->id }}">
+                </span>
 
                 <!-- 4 -->
-                    <h1>&nbsp;</h1>
-                    <div>
-                        <h3>
-                            <span style="float:left; width:200px;">{{ $game4->team1 }} &nbsp; : &nbsp; </span>
-                            <span style="float:left; width:200px;">{{ $game4->team2 }}</span>
+                <div>{{ $game4->team1 }}</div>
+                <span>:</span>
+                <span>{{ $game4->team2 }}</span>
 
-                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score1_4" value="{{ $tipp4->score1==-1? '': $tipp4->score1 }}" required>
-                            <p style="float:left; width:25px;">&nbsp; : &nbsp;</p>
-                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score2_4" value="{{ $tipp4->score2==-1? '': $tipp4->score2 }}" required>
-                            <label class="lead" style="float:left; width:50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Joker &nbsp;</label>
-                        </h3>
-                    </div>
+                <input type="text" class="lead" id=""  name="score1_4" value="{{ $tipp4->score1==-1? '': $tipp4->score1 }}" required>
 
-                    <span >
-                        <input type="checkbox" name="joker_4" id="joker_4" @if($tipp4->joker===1) checked @endif>
-                    </span>
+                <span>:</span>
+                <input type="text" class="lead" id=""  name="score2_4" value="{{ $tipp4->score2==-1? '': $tipp4->score2 }}" required>
+                <label>Joker</label>
+                <input type="checkbox" name="joker_4" id="joker_4" @if($tipp4->joker===1) checked @endif>
+
+                <span>
                     <input type="hidden" name="tipp_id_4" value="{{ $tipp4->id }}">
                     <input type="hidden" name="game_id_4" value="{{ $game4->id }}">
+                </span>
 
                 <div class="form-group">
                     <p>&nbsp;</p>
@@ -102,10 +113,9 @@
                 </div>
 
             </form>
-        </div>
 
+    </div>
 
-     </div>
 
 <script>
     let checkbox1=document.getElementById('joker_1')
diff --git a/pfosten/resources/views/tipps/edit4_backup.blade.php b/pfosten/resources/views/tipps/edit4_backup.blade.php
new file mode 100644
index 00000000..9e3a1a89
--- /dev/null
+++ b/pfosten/resources/views/tipps/edit4_backup.blade.php
@@ -0,0 +1,173 @@
+@extends('layouts.layout')
+
+@section('content')
+    <div class="container">
+
+        <h4 style="display:flex;">{{$round->name}}</h4>
+
+        <div >
+            <form method="POST" action="/tipps/store4">
+                {{ csrf_field() }}
+                <!-- 1 -->
+                    <div>
+                        <h5>
+                            <div style="display:flex;">
+                                <span>{{ $game1->team1 }}</span>       <span>:</span>     <span>{{ $game1->team2 }}</span>
+
+                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score1_1" value="{{ $tipp1->score1==-1? '': $tipp1->score1 }}" required>
+
+
+                            <p style="float:left; width:25px;">&nbsp; : &nbsp;</p>
+                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score2_1" value="{{ $tipp1->score2==-1? '': $tipp1->score2 }}" required>
+                            <label class="lead" style="float:left; width:50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Joker &nbsp;</label>
+                            </div>
+                        </h5>
+                    </div>
+
+                    <span >
+                        <input type="checkbox" name="joker_1" id="joker_1" @if($tipp1->joker===1) checked @endif>
+                    </span>
+                    <input type="hidden" name="tipp_id_1" value="{{ $tipp1->id }}">
+                    <input type="hidden" name="game_id_1" value="{{ $game1->id }}">
+                    <!-- round_id is the same for all 4 games. -->
+                    <input type="hidden" name="round_id" value="{{ $game1->round_id }}">
+
+
+
+                <!-- 2 -->
+
+                <h1>&nbsp;</h1>
+                    <div>
+                        <h3>
+                            <span style="float:left; width:200px;">{{ $game2->team1 }} &nbsp; : &nbsp; </span>
+                            <span style="float:left; width:200px;">{{ $game2->team2 }}</span>
+
+                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score1_2" value="{{ $tipp2->score1==-1? '': $tipp2->score1 }}" required>
+                            <p style="float:left; width:25px;">&nbsp; : &nbsp;</p>
+                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score2_2" value="{{ $tipp2->score2==-1? '': $tipp2->score2 }}" required>
+                            <label class="lead" style="float:left; width:50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Joker &nbsp;</label>
+                        </h3>
+                    </div>
+
+                    <span >
+                        <input type="checkbox" name="joker_2" id="joker_2" @if($tipp2->joker===1) checked @endif>
+                    </span>
+                    <input type="hidden" name="tipp_id_2" value="{{ $tipp2->id }}">
+                    <input type="hidden" name="game_id_2" value="{{ $game2->id }}">
+
+
+                <!-- 3 -->
+                    <h1>&nbsp;</h1>
+                    <div>
+                        <h3>
+                            <span style="float:left; width:200px;">{{ $game3->team1 }} &nbsp; : &nbsp; </span>
+                            <span style="float:left; width:200px;">{{ $game3->team2 }}</span>
+
+                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score1_3" value="{{ $tipp3->score1==-1? '': $tipp3->score1 }}" required>
+                            <p style="float:left; width:25px;">&nbsp; : &nbsp;</p>
+                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score2_3" value="{{ $tipp3->score2==-1? '': $tipp3->score2 }}" required>
+                            <label class="lead" style="float:left; width:50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Joker &nbsp;</label>
+                        </h3>
+                    </div>
+
+                    <span >
+                        <input type="checkbox" name="joker_3" id="joker_3" @if($tipp3->joker===1) checked @endif>
+                    </span>
+                    <input type="hidden" name="tipp_id_3" value="{{ $tipp3->id }}">
+                    <input type="hidden" name="game_id_3" value="{{ $game3->id }}">
+
+                <!-- 4 -->
+                    <h1>&nbsp;</h1>
+                    <div>
+                        <h3>
+                            <span style="float:left; width:200px;">{{ $game4->team1 }} &nbsp; : &nbsp; </span>
+                            <span style="float:left; width:200px;">{{ $game4->team2 }}</span>
+
+                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score1_4" value="{{ $tipp4->score1==-1? '': $tipp4->score1 }}" required>
+                            <p style="float:left; width:25px;">&nbsp; : &nbsp;</p>
+                            <input style="float:left; width:50px;" type="text" class="lead" id=""  name="score2_4" value="{{ $tipp4->score2==-1? '': $tipp4->score2 }}" required>
+                            <label class="lead" style="float:left; width:50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Joker &nbsp;</label>
+                        </h3>
+                    </div>
+
+                    <span >
+                        <input type="checkbox" name="joker_4" id="joker_4" @if($tipp4->joker===1) checked @endif>
+                    </span>
+                    <input type="hidden" name="tipp_id_4" value="{{ $tipp4->id }}">
+                    <input type="hidden" name="game_id_4" value="{{ $game4->id }}">
+
+                <div class="form-group">
+                    <p>&nbsp;</p>
+                    <button type="submit" id="btn_submit" class="btn btn-primary">Ok</button>
+                </div>
+
+            </form>
+        </div>
+
+
+     </div>
+
+<script>
+    let checkbox1=document.getElementById('joker_1')
+    let checkbox2=document.getElementById('joker_2')
+    let checkbox3=document.getElementById('joker_3')
+    let checkbox4=document.getElementById('joker_4')
+    let btn_submit=document.getElementById('btn_submit');
+
+    if (checkbox1.checked==0 && checkbox2.checked==0 && checkbox3.checked==0 && checkbox4.checked==0) {
+        btn_submit.disabled=true;
+    }
+
+    checkbox1.addEventListener('change', function() {
+        if (this.checked) {
+            btn_submit.disabled=false;
+            checkbox2.checked=0;
+            checkbox3.checked=0;
+            checkbox4.checked=0;
+        } else {
+            if (checkbox2.checked==0 && checkbox3.checked==0 && checkbox4.checked==0) {
+                checkbox1.checked=1;
+            }
+        }
+    });
+
+    checkbox2.addEventListener('change', function() {
+        if (this.checked) {
+            btn_submit.disabled=false;
+            checkbox1.checked=0;
+            checkbox3.checked=0;
+            checkbox4.checked=0;
+        } else {
+            if (checkbox1.checked==0 &&  checkbox3.checked==0 && checkbox4.checked==0) {
+                checkbox2.checked=1;
+            }
+        }
+    });
+
+    checkbox3.addEventListener('change', function() {
+        if (this.checked) {
+            btn_submit.disabled=false;
+            checkbox1.checked=0;
+            checkbox2.checked=0;
+            checkbox4.checked=0;
+        } else {
+            if (checkbox1.checked==0 && checkbox2.checked==0 && checkbox4.checked==0) {
+                checkbox3.checked=1;
+            }
+        }
+    });
+    checkbox4.addEventListener('change', function() {
+        if (this.checked) {
+            btn_submit.disabled=false;
+            checkbox1.checked=0;
+            checkbox2.checked=0;
+            checkbox3.checked=0;
+        } else {
+            if (checkbox1.checked==0 && checkbox2.checked==0 && checkbox3.checked==0 ) {
+                checkbox4.checked=1;
+            }
+        }
+    });
+    //console.log("Event Listeners initiated");
+</script>
+@endsection
\ No newline at end of file