larger rooms maps divided into two parts with carousel

app/Http/Controllers/User/UserClassesController.php

@@ -105,7 +105,12 @@ class UserClassesController extends Controller
         if(!$room_arrangement) {
             $room_arrangement = Room::where('name', 'Inna sala')->first()->arrangement;
         }
-        return view('map.seat_map', ['student_name' => $student_name, 'student_surname' => $student_surname, 'student_id_number' => $student_id_number, 'classes_id' => $classes->id, 'seat_numbers' => $seat_numbers, 'room_arrangement' => $room_arrangement]);
+        if(count(explode("++", $room_arrangement)) > 4) {
+            $twoparts = true;
+        } else {
+            $twoparts = false;
+        }
+        return view('map.seat_map', ['student_name' => $student_name, 'student_surname' => $student_surname, 'student_id_number' => $student_id_number, 'classes_id' => $classes->id, 'seat_numbers' => $seat_numbers, 'room_arrangement' => $room_arrangement, 'twoparts' => $twoparts]);
     }
 
     public function save_classes_data(Request $request)
@@ -136,7 +141,12 @@ class UserClassesController extends Controller
             if(!$room_arrangement) {
                 $room_arrangement = Room::where('name', 'Inna sala')->first()->arrangement;
             }
+            if(count(explode("++", $room_arrangement)) > 4) {
+                $twoparts = true;
+            } else {
+                $twoparts = false;
             }
-        return view('user.user_preview_classes', ['classes_id' => $classes_id, 'room_arrangement' => $room_arrangement, 'attendances' => $attendances, 'seat_numbers' => $seat_numbers, 'orderBy' => $orderBy, 'orderDirection' => $orderDirection]);
+        }
+        return view('user.user_preview_classes', ['classes_id' => $classes_id, 'room_arrangement' => $room_arrangement, 'attendances' => $attendances, 'seat_numbers' => $seat_numbers, 'orderBy' => $orderBy, 'orderDirection' => $orderDirection, 'twoparts' => $twoparts]);
     }
 }

public/css/app.css

@@ -11210,3 +11210,6 @@ a.text-dark:focus {
 .form-custom {
   width: auto;
 }
+.carousel-control-prev, .carousel-control-next {
+  filter: invert(100%);
+}

public/css/map/seatchart-preview.css

@@ -53,20 +53,19 @@ body {
 .preview-attendance-table, .seat-chart-wrapper {
     margin: 0 30px;
 }
-.seatCharts-space {
+div.seatCharts-space {
-    background-color: unset!important;
+    background-color: unset;
 }
-.seatCharts-container {
+div.seatCharts-row {
-    width: 100%!important;
+    height: 130px;
+    justify-content: flex-start;
+    margin: 0 auto;
+    width: auto;
 }
-.seatCharts-row {
+div.seatCharts-cell {
-    width: 100%!important;
+    width: 120px;
-    height: 130px!important;
+    height: 120px;
-}
+    line-height: 37px;
-.seatCharts-cell {
-    width: 120px!important;
-    height: 120px!important;
-    line-height: 37px!important;
 }
 .preview-name {
     color: rgba(0,0,0,0.7);

public/css/map/seatchart.css

@@ -72,10 +72,10 @@ div.seatCharts-seat {
 }
 div.seatCharts-row {
     height: 100px;
-    width: 90%;
     display: flex;
-    /*align-items: center;*/
+    justify-content: flex-start;
-    justify-content: center;
+    margin: 0 auto;
+    width: auto;
 }
 div.seatCharts-seat.available {
     background-color: #649a24;
@@ -94,10 +94,10 @@ div.seatCharts-seat.unavailable {
 }
 
 div.seatCharts-container {
-    width: 80%;
-    padding: 20px 0;
-    margin: 0 auto;
     text-align: center;
+    width: fit-content;
+    padding: 30px;
+    margin: auto;
 
 }
 div.seatCharts-legend {

public/js/map/seatchart-preview.js

@@ -1,10 +1,19 @@
 function assignPlaces() {
     const attendances = $('.attendance-id');
+    const twoparts = $('#twoparts').val();
     attendances.each(function() {
         const seat_number = $(this).attr('id').split('++')[0];
         const name = $(this).attr('id').split('++')[1];
         const surname = $(this).attr('id').split('++')[2];
-        const map_seat = $('#seat-map').find(`#${seat_number}`);
+        let map_seat = '';
+        if(!twoparts) {
+            map_seat = $('#seat-map').find(`#${seat_number}`);
+        } else {
+            map_seat = $('#seat-map-first').find(`#${seat_number}`);
+            if (!map_seat.length) {
+                map_seat = $('#seat-map-second').find(`#${seat_number}`);
+            }
+        }
         map_seat.html(`<b>${seat_number}</b> <br><span class="preview-name">${name} ${surname}</span>`)
         map_seat.on('mouseover', () => {
             map_seat.css('backgroundColor', 'lightgrey');
@@ -33,14 +42,26 @@ function checkForUnavailablePlaces() {
     if(unavailablePlaces){
         allPlaces.each(function(){
             if(unavailablePlaces.includes($(this).text().split(" ")[0]) && !$(this).parent().hasClass('seatCharts-legendItem')) {
-                $(this).addClass('taken');
+                $(this).addClass('taken');}
-                console.log($(this));
-            }
         });
     }
 }
 
+function checkMap() {
+    const $this = $('#map-carousel');
+    if ($('.carousel-inner .item:first').hasClass('active')) {
+        $this.children('.left.carousel-control').hide();
+        $this.children('.right.carousel-control').show();
+    } else if ($('.carousel-inner .item:last').hasClass('active')) {
+        $this.children('.right.carousel-control').hide();
+        $this.children('.left.carousel-control').show();
+    } else {
+        $this.children('.carousel-control').show();
+    }
+}
+
 $(document).ready(function(){
     assignPlaces();
     checkForUnavailablePlaces();
+    $('#map-carousel').on('slid.bs.carousel', checkMap);
 });

public/js/map/seatchart.js

@@ -1,76 +1,79 @@
-var firstSeatLabel = 1;
-
 $(document).ready(function() {
-    const seat_map = $('#room_arrangement').val().split('++');
 
-    var $cart = $('#selected-seats'),
+    function createMap(seats_rows, seats_container) {
-        seatNumber = '',
+        let $cart = $('#selected-seats');
-        $counter = $('#counter'),
+        let seat_selected = false;
-        $total = $('#total'),
+        seats_container.seatCharts({
-        sc = $('#seat-map').seatCharts({
+            map: seats_rows,
-        map: seat_map,
+            naming: {
-        seats: {
+                rows: ['', '', '', ''],
-            h: {
+                top: false,
-                price   : 2500,
-                classes : 'student-class',
-                category: 'Student Seat'
-            },
-        },
-        naming : {
-            rows: ['','','',''],
-            top : false,
                 left: false,
-            getLabel : function (character, row, column) {
-              if (row === '1') {
-                return column;
-              } else if (row === '2') {
-                return column;
-              } else if (row === '3') {
-                return column;
-              }
             },
-        },
+            legend: {
-        legend : {
+                node: $('#legend'),
-            node : $('#legend'),
+                items: [
-            items : [
+                    ['c', 'available', 'Dostępne miejsce'],
-                [ 'c', 'available', 'Dostępne miejsce'],
+                    ['f', 'unavailable', 'Zajęte miejsce']
-                [ 'f', 'unavailable', 'Zajęte miejsce']
                 ]
             },
             click: function () {
-            if (this.status() == 'available' && recalculateTotal(sc) < 1) {
+                if (this.status() === 'available' && !seat_selected) {
-                //let's create a new <li> which we'll add to the cart items
+                    // let's create a new <li> which we'll add to the cart items
-                $('<span> '+this.settings.label+ '</span>')
+                    $('<span> ' + this.settings.label + '</span>')
-                    .attr('id', 'cart-item-'+this.settings.id)
+                        .attr('id', 'cart-item-' + this.settings.id)
                         .data('seatId', this.settings.id)
                         .appendTo($cart);
-
+                    seat_selected = true;
-                seatNumber = 'rząd: ' + this.settings.row + ' miejsce: ' + this.settings.label;
-                localStorage.setItem('myElement', seatNumber);
-                /*
-                 * Lets update the counter and total
-                 *
-                 * .find function will not find the current seat, because it will change its stauts only after return
-                 * 'selected'. This is why we have to add 1 to the length and the current seat price to the total.
-                 */
-                $counter.text(sc.find('selected').length+1);
-                $total.text(recalculateTotal(sc)+1);
-
                     return 'selected';
-            } else if (this.status() == 'selected') {
+                } else if (this.status() === 'selected') {
-                //update the counter
-                $counter.text(sc.find('selected').length-1);
-                //and total
-                $total.text(recalculateTotal(sc)-1);
-
                     //remove the item from our cart
-                $('#cart-item-'+this.settings.id).remove();
+                    $('#cart-item-' + this.settings.id).remove();
-                $('#item-'+this.settings.id).remove();
+                    $('#item-' + this.settings.id).remove();
-
+                    seat_selected = false;
-                //seat has been vacated
                     return 'available';
-            } else if (this.status() == 'unavailable') {
+                } else if (this.status() === 'unavailable') {
-                //seat has been already booked
+                    return 'unavailable';
+                } else {
+                    return this.style();
+                }
+            }
+        });
+    }
+
+    function createTwoPartsMap(seat_rows_first, seat_rows_second, seat_container_first, seat_container_second) {
+        let $cart = $('#selected-seats');
+        let seat_selected = false;
+        seat_container_first.seatCharts({
+            map: seat_rows_first,
+            naming: {
+                rows: ['', '', '', ''],
+                top: false,
+                left: false,
+            },
+            legend: {
+                node: $('#legend'),
+                items: [
+                    ['c', 'available', 'Dostępne miejsce'],
+                    ['f', 'unavailable', 'Zajęte miejsce']
+                ]
+            },
+            click: function () {
+                if (this.status() === 'available' && !seat_selected) {
+                    // //let's create a new <li> which we'll add to the cart items
+                    $('<span> ' + this.settings.label + ' <a href="#" class="cancel-cart-item">[x]</a></span>')
+                        .attr('id', 'cart-item-' + this.settings.id)
+                        .data('seatId', this.settings.id)
+                        .appendTo($cart);
+                    seat_selected = true;
+                    return 'selected';
+                } else if (this.status() === 'selected') {
+                    // //remove the item from our cart
+                    $('#cart-item-' + this.settings.id).remove();
+                    $('#item-' + this.settings.id).remove();
+                    seat_selected = false;
+                    return 'available';
+                } else if (this.status() === 'unavailable') {
                     return 'unavailable';
                 } else {
                     return this.style();
@@ -78,24 +81,53 @@ $(document).ready(function() {
             }
         });
 
-    //this will handle "[cancel]" link clicks
+        seat_container_second.seatCharts({
-    $('#selected-seats').on('click', '.cancel-cart-item', function () {
+            map: seat_rows_second,
-        //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
+            naming: {
-        sc.get($(this).parents('li:first').data('seatId')).click();
+                rows: ['', '', '', ''],
+                top: false,
+                left: false,
+            },
+            click: function () {
+                if (this.status() === 'available' && !seat_selected) {
+                    // //let's create a new <li> which we'll add to the cart items
+                    $('<span> ' + this.settings.label + ' <a href="#" class="cancel-cart-item">[x]</a></span>')
+                        .attr('id', 'cart-item-' + this.settings.id)
+                        .data('seatId', this.settings.id)
+                        .appendTo($cart);
+                    seat_selected = true;
+                    return 'selected';
+                } else if (this.status() === 'selected') {
+                    // //remove the item from our cart
+                    $('#cart-item-' + this.settings.id).remove();
+                    $('#item-' + this.settings.id).remove();
+                    seat_selected = false;
+                    return 'available';
+                } else if (this.status() === 'unavailable') {
+                    return 'unavailable';
+                } else {
+                    return this.style();
+                }
+            }
+
         });
 
-    //let's pretend some seats have already been booked
+        $('#selected-seats').on('click', '.cancel-cart-item', function () {
-    //sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');
+            const id = $(this).parent().data('seatId');
+            $('#twoparts-map').find(`#${id}`).click();
+        });
+    }
 
+    const seat_map = $('#room_arrangement').val().split('++');
+    if (seat_map.length > 4) {
+        const first_part = seat_map.slice(0, 4);
+        const second_part = seat_map.slice(5);
+        const seats_container_first = $('#seat-map-first');
+        const seats_container_second = $('#seat-map-second');
+        createTwoPartsMap(first_part, second_part, seats_container_first, seats_container_second);
+    } else {
+        const seats_container = $('#seat-map');
+        createMap(seat_map, seats_container);
+    }
 });
 
-function recalculateTotal(sc) {
-var total = 0;
-
-//basically find every selected seat and sum its price
-sc.find('selected').each(function () {
-    total += 1;//this.data().price;
-});
-
-return total;
-}

resources/views/map/seat_map.blade.php

@@ -12,6 +12,34 @@
 
 @section('map_content')
     <div class="seat-chart-wrapper">
+        @if($twoparts)
+            <div class="front-indicator">
+                <p class="seat-p">
+                    {{ App\Subject::find(App\Classes::find($classes_id)->subject_id)->name }},
+                    {{ App\Subject::find(App\Classes::find($classes_id)->subject_id)->weekday }}
+                    {{ App\Classes::find($classes_id)->date }} {{ App\Subject::find(App\Classes::find($classes_id)->subject_id)->time }},
+                    <b>sala {{ App\Room::find(App\Subject::find(App\Classes::find($classes_id)->subject_id)->room_id)->name }}</b>
+                </p>
+            </div>
+            <div id="map-carousel" class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false">
+                <div class="carousel-inner" id="twoparts-map">
+                    <div class="carousel-item active">
+                        <div id="seat-map-first"></div>
+                    </div>
+                    <div class="carousel-item">
+                        <div id="seat-map-second"></div>
+                    </div>
+                </div>
+                <a class="carousel-control-prev" href="#map-carousel" role="button" data-slide="prev">
+                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                    <span class="sr-only">Pierwsza część</span>
+                </a>
+                <a class="carousel-control-next" href="#map-carousel" role="button" data-slide="next">
+                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                    <span class="sr-only">Druga część</span>
+                </a>
+            </div>
+        @else
             <div id="seat-map">
                 <div class="front-indicator">
                     <p class="seat-p">
@@ -22,6 +50,7 @@
                     </p>
                 </div>
             </div>
+        @endif
     </div>
     <br/>
     <div class='seat-stat-wrapper'>

resources/views/map/start_map.blade.php

@@ -7,6 +7,7 @@
 @endsection
 
 @section('map_content')
+    <div id="refresh"></div>
     <p class="code-p"> <b>Kod:</b> {{ $classes_code }}</p>
     <h1 class="main-text main-seat-text">Przyłóż legitymację do czytnika</h1>
     <div class="czytnik">
@@ -36,6 +37,6 @@
             // Move to a new location or you can do something else
             window.location.href = window.location.href;
 
-        }, 3000);
+        }, 5000);
     </script>
 @endsection

resources/views/user/user_preview_classes.blade.php

@@ -47,9 +47,31 @@
             @include('user.attendances_table_preview', ['attendances' => $attendances, 'export' => 0])
         </div>
         <div class="seat-chart-wrapper">
-            <div id="seat-map"></div>
+            @if($twoparts)
-            <input type="hidden" class="room_arrangement" name="room_arrangement" id="room_arrangement" value="{{ $room_arrangement }}">
+                <div id="map-carousel" class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false">
+                    <div class="carousel-inner" id="twoparts-map">
+                        <div class="carousel-item active">
+                            <div id="seat-map-first"></div>
                         </div>
+                        <div class="carousel-item">
+                            <div id="seat-map-second"></div>
+                        </div>
+                    </div>
+                    <a class="carousel-control-prev" href="#map-carousel" role="button" data-slide="prev">
+                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                        <span class="sr-only">Pierwsza część</span>
+                    </a>
+                    <a class="carousel-control-next" href="#map-carousel" role="button" data-slide="next">
+                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                        <span class="sr-only">Druga część</span>
+                    </a>
+                </div>
+            @else
+                <div id="seat-map"></div>
+            @endif
+        </div>
+        <input type="hidden" class="room_arrangement" name="room_arrangement" id="room_arrangement" value="{{ $room_arrangement }}">
+        <input type="hidden" class="twoparts" name="twoparts" id="twoparts" value="{{ $twoparts }}">
     @foreach($seat_numbers as $seat_number)
             <input type="hidden" class="unavailable_place" value="{{ $seat_number }}">
         @endforeach