Tour Room UI update

This commit is contained in:
Torsten 2023-01-11 20:45:29 +01:00
parent 221aae6c36
commit 134ac6478f
5 changed files with 489 additions and 130 deletions

View file

@ -2,3 +2,8 @@
laravel new motorradig
cd motorradig
composer require laravel/ui --dev
mysql -ud0304938 -phubbabubba -h motorrad-ig.de d0304938

View file

@ -162,7 +162,7 @@ class TourController extends Controller
qry.free_slots,
COALESCE(qry.room_name,'Ungebucht') as room_name,
COALESCE(qry.room_name,'ZZZZZZZZZ') as room_sort_order
COALESCE(qry.room_id,'ZZZZZZZZZ') as room_sort_order
FROM
(
SELECT
@ -173,15 +173,16 @@ class TourController extends Controller
b.user_id,
(SELECT tr.capacity - count(*) from bookings where tour_id=tr.tour_id and room_id=tr.id) as free_slots
FROM
tour_rooms tr
LEFT JOIN bookings as b
ON b.tour_id = tr.tour_id AND b.room_id = tr.id
tour_rooms tr LEFT JOIN bookings as b
ON b.tour_id = tr.tour_id AND b.room_id = tr.id
WHERE
tr.tour_id= ".$tour_id."
) qry
LEFT JOIN users as u
ON qry.user_id = u.id
UNION
-- unbooked tour users
@ -205,7 +206,7 @@ class TourController extends Controller
b.user_id = u.id
AND
capacity is null
ORDER BY room_name, user_name
ORDER BY room_sort_order, user_name
;
";
@ -219,6 +220,7 @@ class TourController extends Controller
public function edit(Tour $tour)
{
if (Auth::user()->role != 'ADMIN') {return redirect('/tour');}
error_log("Tour:edit");
if ($tour->start<Carbon::now()) {
return view('tour.edit_old')->with('tour', $tour);
@ -229,6 +231,8 @@ class TourController extends Controller
$rooms = $this->fetch_rooms($tour->id);
return view('tour.edit')
->with('tour', $tour)
->with('rooms', $rooms);
@ -361,7 +365,7 @@ class TourController extends Controller
Log::info("create_room Controller started");
$user=Auth::user();
Booking::where('tour_id', $tour_id)->where('room_id', $room_id)->delete();
DB::update("UPDATE bookings SET room_id=0 WHERE room_id=".$room_id);
DB::delete("DELETE FROM tour_rooms WHERE tour_id = ? AND id = ?",[$tour_id, $room_id]);
return redirect('tour/'.$tour_id.'/edit');
}

View file

@ -13,7 +13,8 @@
<div class="card-body">
<form style="background-color: #fff;" class="text-dark" method="post" action="/tour/{{$tour->id}}" enctype="multipart/form-data">
<form style="background-color: #fff;" class="text-dark" method="post"
action="/tour/{{$tour->id}}" enctype="multipart/form-data">
@csrf
@ -23,59 +24,75 @@
<div class="form-group" style="display:flex;">
<!-- label class="ml-2 mt-4 col-form-label col-form-label-sm" style="width:150px; text-align:left;" for="name"><h4>Name:</h4></label> -->
<label class="ml-2 mt-3 col-form-label col-form-label-sm" style="width:180px; text-align:left;font-size:18px;" for="name">Name:</label>
<input class="mt-3 mr-2 form-control input-sm" type="text" id="name" name="name" value="{{ old('name') ?? $tour->name }}" required >
<label class="ml-2 mt-3 col-form-label col-form-label-sm"
style="width:180px; text-align:left;font-size:18px;" for="name">Name:</label>
<input class="mt-3 mr-2 form-control input-sm" type="text" id="name" name="name"
value="{{ old('name') ?? $tour->name }}" required>
</div>
<div class="form-group" style="display:flex;">
<label class="ml-2 mt-3" style="width:180px; text-align:left;font-size:18px;" for="name">Start:</label>
<input class="mt-3 mr-2 form-control input-sm" type="text" id="start" name="start" value="{{ $tour->start }}" required >
<label class="ml-2 mt-3" style="width:180px; text-align:left;font-size:18px;"
for="name">Start:</label>
<input class="mt-3 mr-2 form-control input-sm" type="text" id="start" name="start"
value="{{ $tour->start }}" required>
</div>
<div class="form-group" style="display:flex;">
<label class="ml-2 mt-4" style="width:180px; text-align:left;font-size:18px;" for="deadline">Anmeldeschluss:</label>
<input class="mt-3 mr-2 form-control" type="text" id="deadline" style="font-size:16px;" name="deadline" value="{{ old('deadline') ?? $tour->deadline }}" required >
<label class="ml-2 mt-4" style="width:180px; text-align:left;font-size:18px;"
for="deadline">Anmeldeschluss:</label>
<input class="mt-3 mr-2 form-control" type="text" id="deadline" style="font-size:16px;"
name="deadline" value="{{ old('deadline') ?? $tour->deadline }}" required>
</div>
<div class="form-group" style="display:flex;">
<label class="ml-2 mt-4" style="width:180px; text-align:left;font-size:18px;" for="name">Max Teilnehmer:</label>
<input class="mt-3 mr-2 form-control" type="text" id="max_participants" style="font-size:16px;" name="max_participants" type="number" min="1" max="99" value="{{ old('max_participants') ?? $tour->max_participants }}" required >
<label class="ml-2 mt-4" style="width:180px; text-align:left;font-size:18px;"
for="name">Max Teilnehmer:</label>
<input class="mt-3 mr-2 form-control" type="text" id="max_participants"
style="font-size:16px;" name="max_participants" type="number" min="1" max="99"
value="{{ old('max_participants') ?? $tour->max_participants }}" required>
</div>
<div class="form-group" style="display:flex;">
<label class="ml-2 mt-4" style="width:150px; text-align:left;" for="bild" ><h4>Bild:</h4></label>
<label class="ml-2 mt-4" style="width:150px; text-align:left;" for="bild"><h4>Bild:</h4>
</label>
@if(file_exists (public_path ('img/tour/'.$tour->id.'.jpg')))
<!--File exists -->
<a href="/img/tour/{{$tour->id}}_gross.jpg" data-lightbox="{{$tour->id}}_gross.jpg" data-title="{{ $tour->name }}">
<img src="/img/tour/{{$tour->id}}.jpg" class="mt-3 ml-3" >
<a href="/img/tour/{{$tour->id}}_gross.jpg" data-lightbox="{{$tour->id}}_gross.jpg"
data-title="{{ $tour->name }}">
<img src="/img/tour/{{$tour->id}}.jpg" class="mt-3 ml-3">
</a>
@else
<img src="/img/placeholder/tour128x100.jpg" class="mt-3 ml-3" >
<img src="/img/placeholder/tour128x100.jpg" class="mt-3 ml-3">
@endif
<input type="file" class="mt-3 mr-2 form-control" id="bild" style="font-size:20px;" name="bild" value="" >
<input type="file" class="mt-3 mr-2 form-control" id="bild" style="font-size:20px;"
name="bild" value="">
</div>
<div class="form-group" style="display:flex;">
<label class="ml-2 mt-3" style="width:140px; text-align:left;font-size:18px;" for="is_cancelled">Storniert:</label>
<input class="mt-3 mr-2 form-control" type="checkbox" id="is_cancelled" style="font-size:10px;width:20px;" name="is_cancelled"
@if($tour->is_cancelled)
checked
<label class="ml-2 mt-3" style="width:140px; text-align:left;font-size:18px;"
for="is_cancelled">Storniert:</label>
<input class="mt-3 mr-2 form-control" type="checkbox" id="is_cancelled"
style="font-size:10px;width:20px;" name="is_cancelled"
@if($tour->is_cancelled)
checked
@endif
>
</div>
<div class="form-group">
<textarea class="col-12" name="beschreibung" rows="10" cols="50" >{{ $tour->beschreibung }}
<textarea class="col-12" name="beschreibung" rows="10" cols="50">{{ $tour->beschreibung }}
</textarea>
</div>
<a href="/tour/{{$tour->id}}"><div type="submit" class="btn btn-success col-2 mb-2 float-right mr-2">Abbrechen</div></a>
<a href="/tour/{{$tour->id}}">
<div type="submit" class="btn btn-success col-2 mb-2 float-right mr-2">Abbrechen</div>
</a>
<button type="submit" class="btn btn-danger col-2 mb-2 float-right mr-2">Speichern</button>
</form>
@ -85,24 +102,27 @@
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<h2>Bitte Zimmer auswählen</h2>
<!-- Teilnehmer+Raum Anzeige/Auswahl: Nur buchbare -->
<div class="card-body">
<ul>
<!-- Intentional Assignment ! -->
@if ($room_id="") @endif
@foreach($rooms as $room)
@if( $room->room_id != 0 and $room->free_slots >0) <!-- Dont show "Ungebucht", room_id=0 and only with available slots -->
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<h2>Bitte Zimmer auswählen</h2>
<!-- Teilnehmer+Raum Anzeige/Auswahl: Nur buchbare -->
<div class="card-body">
<ul>
<!-- Intentional Assignment ! -->
@if ($room_id="") @endif
@foreach($rooms as $room)
@if( $room->room_id != 0 and $room->free_slots >0)
<!-- Dont show "Ungebucht", room_id=0 and only with available slots -->
@if ($room_id != $room->room_id)
@if(strlen($room_id))
<hr/>
@endif
<p style="list-style-type: none;">[{{$room->room_id}}]
<span>{{$room->room_name}}
</span><b><a id="booking_link" href="/tour/{{$tour->id}}/join4user/{{$room->room_id}}/#USER_ID"> ==> Buchen</a></b>
</span><b><a id="booking_link"
href="/tour/{{$tour->id}}/join4user/{{$room->room_id}}/#USER_ID">
==> Buchen</a></b>
</p>
<!-- Intentional Assignment ! -->
@ -113,93 +133,114 @@
<li> {{ $room->user_name}}
</li>
@endif
@endif
@endforeach
<li>Ungebucht / Kein Raum</li>
</ul>
</div>
@endif
@endforeach
</ul>
</div>
</div>
<!--Modal Anzeige end -->
</div>
<!--Modal Anzeige end -->
</div>
</div>
<div class="col-md-3 mt-2">
<div class="card mt-4">
<div class="card-header"><h5>Teilnehmer</h5></div>
<div class="card-body">
<p>
<!-- Intentional Assignment ! -->
@if ($room_id="") @endif
@foreach($rooms as $room)
@if ($room_id != $room->room_id)
@if(strlen($room_id))
<hr/>
@endif
<p><b>[{{$room->room_id}}] {{$room->room_name}}</b>
@if($room->room_id>0) <!-- Delete link only for real room ids -->
<a id="room_booking_link" class="text-primary ts_tooltip" href="/tour/{{$tour->id}}/delete_room/{{$room->room_id}}">
(X) <span class="ts_tooltiptext">Raum Löschen</span>
</a>
@endif
</p>
<!-- Intentional Assignment ! -->
@if ($room_id=$room->room_id) @endif
@endif
@if(strlen($room->user_name))
<li style="list-style:none"> {{ $room->user_name}}
@if(Auth::user()->role=="ADMIN")
<a href="/tour/{{$tour->id}}/cancelBookingAdmin/{{$room->user_id}}" class="text-primary ts_tooltip">
(-)
<span class="ts_tooltiptext">Ḱein Raum</span>
</a>
<a href="#" data-user_id="{{$room->user_id}}" id="myBtn" class="float-left">(Zimmer->)</a>
@endif
</li>
@endif
@endforeach
</ul>
<div class="card-header">
<a href="/tour/{{$tour->id}}/create_room/1" class="text-primary">+ Einzelzimmer</a>
<!-- <button type="submit" class="btn">+ Einzelzimmer</button> -->
</div>
&nbsp;
<div class="card-header">
<a href="/tour/{{$tour->id}}/create_room/2" class="text-primary">+ Doppelzimmer</a>
<!-- <button type="submit" class="btn">+ Doppelzimmer</button> -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 mt-2">
<div class="card mt-4">
<div class="card-header"><h5>Teilnehmer</h5></div>
<div class="card-body" >
<!-- Intentional Assignment ! -->
@if ($room_id="") @endif
@foreach($rooms as $room)
@if ($room_id != $room->room_id)
@if($room_id!="")
@if($room->room_name=="Ungebucht")
</div> <div style="height:30px;"></div>
@else
</div> <div style="height:2px;"></div>
@endif
@endif
<div style="border:solid;border-width:1px;">
<div><b>{{$room->room_name}}
@if( $room->room_name != "Ungebucht" )
<!-- Delete link only for real room ids -->
<a id="room_booking_link" class="text-primary ts_tooltip"
href="/tour/{{$tour->id}}/delete_room/{{$room->room_id}}">
(X) <span class="ts_tooltiptext">Raum Löschen</span>
</a>
@endif
</div>
<!-- Intentional Assignment ! -->
@if ($room_id=$room->room_id) @endif
@endif
@if(strlen($room->user_name))
<div> &nbsp; {{ $room->user_name}}
@if( $room->room_name == "Ungebucht" )
<a href="#" data-user_id="{{$room->user_id}}" id="myBtn"
class="float-left ts_tooltip">
(+)
<span class="ts_tooltiptext">Zimmer zuweisen</span>
</a>
@else
<a href="/tour/{{$tour->id}}/join4user/0/{{$room->user_id}}"
class="float-left ts_tooltip">
(-)
<span class="ts_tooltiptext">Zimmer-Zuweisung löschen</span>
</a>
@endif
</div>
@endif
@endforeach
</div> <div style="height:2px;"></div>
<div class="card-header">
<p>
<a href="/tour/{{$tour->id}}/create_room/1" class="text-primary">+ Einzelzimmer
erstellen</a>
<!-- <button type="submit" class="btn">+ Einzelzimmer</button> -->
</p>
<p>
<a href="/tour/{{$tour->id}}/create_room/2" class="text-primary">+ Doppelzimmer
erstellen</a>
<!-- <button type="submit" class="btn">+ Doppelzimmer</button> -->
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const elem = document.querySelector('input[name="start"]');
const datepicker_start = new Datepicker(elem, {
'autohide':true,
'format':'dd.mm.yyyy',
'autohide': true,
'format': 'dd.mm.yyyy',
'language': 'de'
});
const elem2 = document.querySelector('input[name="deadline"]');
const datepicker_deadline = new Datepicker(elem2, {
'autohide':true,
'format':'dd.mm.yyyy',
'language':'de'
'autohide': true,
'format': 'dd.mm.yyyy',
'language': 'de'
});
//////////////////////////////////////////////////
@ -208,10 +249,10 @@
// Get the button that opens the modal
//var btn = document.getElementById("myBtn");
var btns=document.querySelectorAll("#myBtn");
var btns = document.querySelectorAll("#myBtn");
for (let i = 0; i < btns.length; ++i) {
//btns[i].user_id=
btns[i].onclick = function(e) {
btns[i].onclick = function (e) {
console.log("** CLICK **")
console.log(this)
@ -240,7 +281,7 @@
// When the user clicks on <span> (x), close the modal, restore the links
span.onclick = function(e) {
span.onclick = function (e) {
e.preventDefault();
modal.style.display = "none";
@ -249,14 +290,14 @@
for (var i = 0; i < elems.length; i++) {
arr = elems[i].href.split("/")
arr.pop()
str = arr.join("/")+"/#USER_ID"
elems[i].href=str
str = arr.join("/") + "/#USER_ID"
elems[i].href = str
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}

View file

@ -2,13 +2,7 @@
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 mt-2">
<div class="card mt-4">
@ -79,7 +73,9 @@
</div>
<!-- TODO: Only if owner or admin -->
<a href="/tour/{{$tour->id}}/edit"><div type="submit" class="btn btn-danger col-3 mb-2 float-left mr-2">Bearbeiten</div></a>
@if(Auth::user()->role=="ADMIN")
<a href="/tour/{{$tour->id}}/edit"><div type="submit" class="btn btn-danger col-3 mb-2 float-left mr-2">Bearbeiten</div></a>
@endif
<a href="/tour" type="submit" class="btn btn-success col-3 mb-2 float-right mr-2">Ok</a>
@if(!App\Tour::has_participant($tour->id, Auth::user()->id))
@ -145,32 +141,39 @@
<!-- Teilnehmer+Raum Anzeige -->
<div class="card-body">
<ul>
<!-- Intentional Assignment ! -->
@if ($room_id="") @endif
@foreach($rooms as $room)
@if ($room_id != $room->room_id)
@if(strlen($room_id))
<p>-------------------------</p>
@if($room_id!="")
@if($room->room_name=="Ungebucht")
</div> <div style="height:30px;"></div>
@else
</div> <div style="height:2px;"></div>
@endif
@endif
<p><b>[{{$room->room_id}}] {{$room->room_name}}</b></p>
<div style="border:solid;border-width:1px;">
<div style="text-align:center;"><b>{{$room->room_name}}
@if( $room->room_name != "Ungebucht" )
_{{$room->room_id}}</b></div>
@endif
<!-- Intentional Assignment ! -->
@if ($room_id=$room->room_id) @endif
@endif
@if(strlen($room->user_name))
<li style="list-style:none"> {{ $room->user_name}}
@if(Auth::user()->role=="ADMIN")
<a href="/tour/{{$tour->id}}/cancelBookingAdmin/{{$room->user_id}}" class="text-primary ts_tooltip">(X)
<span class="ts_tooltiptext">Stornieren</span>
</a>
@endif
</li>
<div style="list-style:none"> &nbsp; {{ $room->user_name}}
</div>
@endif
@endforeach
</ul>
</div> <div style="height:2px;"></div>
</div>
</div>

File diff suppressed because one or more lines are too long