From b1ad6657380600c84b81d1e030c0df986042a331 Mon Sep 17 00:00:00 2001 From: s416422 Date: Thu, 19 Dec 2019 15:23:49 +0100 Subject: [PATCH] larger rooms maps divided into two parts with carousel --- .../User/UserClassesController.php | 14 +- public/css/app.css | 3 + public/css/map/seatchart-preview.css | 23 +- public/css/map/seatchart.css | 12 +- public/js/map/seatchart-preview.js | 29 ++- public/js/map/seatchart.js | 214 ++++++++++-------- resources/views/map/seat_map.blade.php | 33 ++- resources/views/map/start_map.blade.php | 3 +- .../views/user/user_preview_classes.blade.php | 28 ++- 9 files changed, 238 insertions(+), 121 deletions(-) diff --git a/app/Http/Controllers/User/UserClassesController.php b/app/Http/Controllers/User/UserClassesController.php index b038492..ccd216a 100644 --- a/app/Http/Controllers/User/UserClassesController.php +++ b/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]); } } diff --git a/public/css/app.css b/public/css/app.css index 52a91bc..20ea729 100644 --- a/public/css/app.css +++ b/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%); +} diff --git a/public/css/map/seatchart-preview.css b/public/css/map/seatchart-preview.css index 178feee..0389dce 100644 --- a/public/css/map/seatchart-preview.css +++ b/public/css/map/seatchart-preview.css @@ -53,20 +53,19 @@ body { .preview-attendance-table, .seat-chart-wrapper { margin: 0 30px; } -.seatCharts-space { - background-color: unset!important; +div.seatCharts-space { + background-color: unset; } -.seatCharts-container { - width: 100%!important; +div.seatCharts-row { + height: 130px; + justify-content: flex-start; + margin: 0 auto; + width: auto; } -.seatCharts-row { - width: 100%!important; - height: 130px!important; -} -.seatCharts-cell { - width: 120px!important; - height: 120px!important; - line-height: 37px!important; +div.seatCharts-cell { + width: 120px; + height: 120px; + line-height: 37px; } .preview-name { color: rgba(0,0,0,0.7); diff --git a/public/css/map/seatchart.css b/public/css/map/seatchart.css index a7d5070..333daad 100644 --- a/public/css/map/seatchart.css +++ b/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: center; + justify-content: flex-start; + 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 { diff --git a/public/js/map/seatchart-preview.js b/public/js/map/seatchart-preview.js index b01504f..a72a295 100644 --- a/public/js/map/seatchart-preview.js +++ b/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(`${seat_number}
${name} ${surname}`) 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'); - console.log($(this)); - } + $(this).addClass('taken');} }); } } +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); }); diff --git a/public/js/map/seatchart.js b/public/js/map/seatchart.js index 39126bb..85beb85 100644 --- a/public/js/map/seatchart.js +++ b/public/js/map/seatchart.js @@ -1,101 +1,133 @@ -var firstSeatLabel = 1; - $(document).ready(function() { - const seat_map = $('#room_arrangement').val().split('++'); - var $cart = $('#selected-seats'), - seatNumber = '', - $counter = $('#counter'), - $total = $('#total'), - sc = $('#seat-map').seatCharts({ - map: seat_map, - seats: { - h: { - price : 2500, - classes : 'student-class', - category: 'Student Seat' + function createMap(seats_rows, seats_container) { + let $cart = $('#selected-seats'); + let seat_selected = false; + seats_container.seatCharts({ + map: seats_rows, + naming: { + rows: ['', '', '', ''], + top: false, + left: false, }, - }, - 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: { + node: $('#legend'), + items: [ + ['c', 'available', 'Dostępne miejsce'], + ['f', 'unavailable', 'Zajęte miejsce'] + ] }, - }, - legend : { - node : $('#legend'), - items : [ - [ 'c', 'available', 'Dostępne miejsce'], - [ 'f', 'unavailable', 'Zajęte miejsce'] - ] - }, - click: function () { - if (this.status() == 'available' && recalculateTotal(sc) < 1) { - //let's create a new
  • which we'll add to the cart items - $(' '+this.settings.label+ '') - .attr('id', 'cart-item-'+this.settings.id) - .data('seatId', this.settings.id) - .appendTo($cart); - - 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') { - //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(); - $('#item-'+this.settings.id).remove(); - - //seat has been vacated - return 'available'; - } else if (this.status() == 'unavailable') { - //seat has been already booked - return 'unavailable'; - } else { - return this.style(); + click: function () { + if (this.status() === 'available' && !seat_selected) { + // let's create a new
  • which we'll add to the cart items + $(' ' + this.settings.label + '') + .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(); + } } - } - }); + }); + } - //this will handle "[cancel]" link clicks - $('#selected-seats').on('click', '.cancel-cart-item', function () { - //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here - sc.get($(this).parents('li:first').data('seatId')).click(); - }); + 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
  • which we'll add to the cart items + $(' ' + this.settings.label + ' [x]') + .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 - //sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable'); + seat_container_second.seatCharts({ + map: seat_rows_second, + naming: { + rows: ['', '', '', ''], + top: false, + left: false, + }, + click: function () { + if (this.status() === 'available' && !seat_selected) { + // //let's create a new
  • which we'll add to the cart items + $(' ' + this.settings.label + ' [x]') + .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(); + } + } + }); + + $('#selected-seats').on('click', '.cancel-cart-item', function () { + 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; -} diff --git a/resources/views/map/seat_map.blade.php b/resources/views/map/seat_map.blade.php index 93d16e0..e333712 100644 --- a/resources/views/map/seat_map.blade.php +++ b/resources/views/map/seat_map.blade.php @@ -12,7 +12,7 @@ @section('map_content')
    -
    + @if($twoparts)

    {{ App\Subject::find(App\Classes::find($classes_id)->subject_id)->name }}, @@ -21,7 +21,36 @@ sala {{ App\Room::find(App\Subject::find(App\Classes::find($classes_id)->subject_id)->room_id)->name }}

    -
    + + @else +
    +
    +

    + {{ 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 }}, + sala {{ App\Room::find(App\Subject::find(App\Classes::find($classes_id)->subject_id)->room_id)->name }} +

    +
    +
    + @endif

    diff --git a/resources/views/map/start_map.blade.php b/resources/views/map/start_map.blade.php index 89f540e..973dac0 100644 --- a/resources/views/map/start_map.blade.php +++ b/resources/views/map/start_map.blade.php @@ -7,6 +7,7 @@ @endsection @section('map_content') +

    Kod: {{ $classes_code }}

    Przyłóż legitymację do czytnika

    @@ -36,6 +37,6 @@ // Move to a new location or you can do something else window.location.href = window.location.href; - }, 3000); + }, 5000); @endsection diff --git a/resources/views/user/user_preview_classes.blade.php b/resources/views/user/user_preview_classes.blade.php index c99f31a..1b4ebb3 100644 --- a/resources/views/user/user_preview_classes.blade.php +++ b/resources/views/user/user_preview_classes.blade.php @@ -47,10 +47,32 @@ @include('user.attendances_table_preview', ['attendances' => $attendances, 'export' => 0])
    -
    - + @if($twoparts) + + @else +
    + @endif
    - @foreach($seat_numbers as $seat_number) + + + @foreach($seat_numbers as $seat_number) @endforeach