s452108/atcheck
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

larger rooms maps divided into two parts with carousel

Browse Source
This commit is contained in:
s416422 2019-12-19 15:23:49 +01:00
parent 8bd2e03bc8
commit b1ad665738
9 changed files with 238 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/Http/Controllers/User/UserClassesController.php
View File

@ -105,7 +105,12 @@ class UserClassesController extends Controller
if(!$room_arrangement) { if(!$room_arrangement) {
$room_arrangement = Room::where('name', 'Inna sala')->first()->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) public function save_classes_data(Request $request)
@ -136,7 +141,12 @@ class UserClassesController extends Controller
if(!$room_arrangement) { if(!$room_arrangement) {
$room_arrangement = Room::where('name', 'Inna sala')->first()->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]);
} }
} }

3
public/css/app.css
View File

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

23
public/css/map/seatchart-preview.css
View File

@ -53,20 +53,19 @@ body {
.preview-attendance-table, .seat-chart-wrapper { .preview-attendance-table, .seat-chart-wrapper {
margin: 0 30px; 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 { .preview-name {
color: rgba(0,0,0,0.7); color: rgba(0,0,0,0.7);

12
public/css/map/seatchart.css
View File

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

29
public/js/map/seatchart-preview.js
View File

@ -1,10 +1,19 @@
function assignPlaces() { function assignPlaces() {
const attendances = $('.attendance-id'); const attendances = $('.attendance-id');
const twoparts = $('#twoparts').val();
attendances.each(function() { attendances.each(function() {
const seat_number = $(this).attr('id').split('++')[0]; const seat_number = $(this).attr('id').split('++')[0];
const name = $(this).attr('id').split('++')[1]; const name = $(this).attr('id').split('++')[1];
const surname = $(this).attr('id').split('++')[2]; 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.html(`<b>${seat_number}</b> <br><span class="preview-name">${name} ${surname}</span>`)
map_seat.on('mouseover', () => { map_seat.on('mouseover', () => {
map_seat.css('backgroundColor', 'lightgrey'); map_seat.css('backgroundColor', 'lightgrey');
@ -33,14 +42,26 @@ function checkForUnavailablePlaces() {
if(unavailablePlaces){ if(unavailablePlaces){
allPlaces.each(function(){ allPlaces.each(function(){
if(unavailablePlaces.includes($(this).text().split(" ")[0]) && !$(this).parent().hasClass('seatCharts-legendItem')) { 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(){ $(document).ready(function(){
assignPlaces(); assignPlaces();
checkForUnavailablePlaces(); checkForUnavailablePlaces();
$('#map-carousel').on('slid.bs.carousel', checkMap);
}); });

214
public/js/map/seatchart.js
View File

@ -1,101 +1,133 @@
var firstSeatLabel = 1;
$(document).ready(function() { $(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, left: false,
classes : 'student-class',
category: 'Student Seat'
}, },
}, legend: {
naming : { node: $('#legend'),
rows: ['','','',''], items: [
top : false, ['c', 'available', 'Dostępne miejsce'],
left: false, ['f', 'unavailable', 'Zajęte miejsce']
getLabel : function (character, row, column) { ]
if (row === '1') {
return column;
} else if (row === '2') {
return column;
} else if (row === '3') {
return column;
}
}, },
}, click: function () {
legend : { if (this.status() === 'available' && !seat_selected) {
node : $('#legend'), // let's create a new <li> which we'll add to the cart items
items : [ $('<span> ' + this.settings.label + '</span>')
[ 'c', 'available', 'Dostępne miejsce'], .attr('id', 'cart-item-' + this.settings.id)
[ 'f', 'unavailable', 'Zajęte miejsce'] .data('seatId', this.settings.id)
] .appendTo($cart);
}, seat_selected = true;
click: function () { return 'selected';
if (this.status() == 'available' && recalculateTotal(sc) < 1) { } else if (this.status() === 'selected') {
//let's create a new <li> which we'll add to the cart items //remove the item from our cart
$('<span> '+this.settings.label+ '</span>') $('#cart-item-' + this.settings.id).remove();
.attr('id', 'cart-item-'+this.settings.id) $('#item-' + this.settings.id).remove();
.data('seatId', this.settings.id) seat_selected = false;
.appendTo($cart); return 'available';
} else if (this.status() === 'unavailable') {
seatNumber = 'rząd: ' + this.settings.row + ' miejsce: ' + this.settings.label; return 'unavailable';
localStorage.setItem('myElement', seatNumber); } else {
/* return this.style();
* 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();
} }
} });
}); }
//this will handle "[cancel]" link clicks function createTwoPartsMap(seat_rows_first, seat_rows_second, seat_container_first, seat_container_second) {
$('#selected-seats').on('click', '.cancel-cart-item', function () { let $cart = $('#selected-seats');
//let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here let seat_selected = false;
sc.get($(this).parents('li:first').data('seatId')).click(); 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();
}
}
});
//let's pretend some seats have already been booked seat_container_second.seatCharts({
//sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable'); map: seat_rows_second,
naming: {
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();
}
}
});
$('#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;
}

33
resources/views/map/seat_map.blade.php
View File

@ -12,7 +12,7 @@
@section('map_content') @section('map_content')
<div class="seat-chart-wrapper"> <div class="seat-chart-wrapper">
<div id="seat-map"> @if($twoparts)
<div class="front-indicator"> <div class="front-indicator">
<p class="seat-p"> <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)->name }},
@ -21,7 +21,36 @@
<b>sala {{ App\Room::find(App\Subject::find(App\Classes::find($classes_id)->subject_id)->room_id)->name }}</b> <b>sala {{ App\Room::find(App\Subject::find(App\Classes::find($classes_id)->subject_id)->room_id)->name }}</b>
</p> </p>
</div> </div>
</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">
{{ 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>
@endif
</div> </div>
<br/> <br/>
<div class='seat-stat-wrapper'> <div class='seat-stat-wrapper'>

3
resources/views/map/start_map.blade.php
View File

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

28
resources/views/user/user_preview_classes.blade.php
View File

@ -47,10 +47,32 @@
@include('user.attendances_table_preview', ['attendances' => $attendances, 'export' => 0]) @include('user.attendances_table_preview', ['attendances' => $attendances, 'export' => 0])
</div> </div>
<div class="seat-chart-wrapper"> <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> </div>
@foreach($seat_numbers as $seat_number) <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 }}"> <input type="hidden" class="unavailable_place" value="{{ $seat_number }}">
@endforeach @endforeach
</div> </div>