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) {
$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]);
}
}

3
public/css/app.css
View File

@ -11210,3 +11210,6 @@ a.text-dark:focus {
.form-custom {
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 {
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);

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

@ -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 {

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

@ -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');
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);
});

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

@ -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 <li> which we'll add to the cart items
$('<span> '+this.settings.label+ '</span>')
.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 <li> which we'll add to the cart items
$('<span> ' + this.settings.label + '</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();
}
}
}
});
});
}
//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 <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
//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 <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')
<div class="seat-chart-wrapper">
<div id="seat-map">
@if($twoparts)
<div class="front-indicator">
<p class="seat-p">
{{ 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>
</p>
</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>
<br/>
<div class='seat-stat-wrapper'>

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

@ -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

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

@ -47,10 +47,32 @@
@include('user.attendances_table_preview', ['attendances' => $attendances, 'export' => 0])
</div>
<div class="seat-chart-wrapper">
<div id="seat-map"></div>
<input type="hidden" class="room_arrangement" name="room_arrangement" id="room_arrangement" value="{{ $room_arrangement }}">
@if($twoparts)
<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>
@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 }}">
@endforeach
</div>