mapka folder deleted
This commit is contained in:
parent
ea92d2b906
commit
8d83d54657
|
|
@ -1,77 +0,0 @@
|
|||
/*
|
||||
div.seatCharts-container {
|
||||
min-width: 700px;
|
||||
}
|
||||
*/
|
||||
div.seatCharts-cell {
|
||||
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin: 3px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
font-size: 13px;
|
||||
line-height:16px;
|
||||
color: blue;
|
||||
|
||||
}
|
||||
div.seatCharts-seat {
|
||||
background-color: green;
|
||||
color: white;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
cursor: default;
|
||||
}
|
||||
div.seatCharts-seat:focus {
|
||||
border: none;
|
||||
}
|
||||
/*
|
||||
.seatCharts-seat:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
div.seatCharts-space {
|
||||
background-color: white;
|
||||
}
|
||||
*/
|
||||
div.seatCharts-row {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
div.seatCharts-row:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.selected {
|
||||
background-color: aqua;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.focused {
|
||||
background-color: #6db131;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.available {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.unavailable {
|
||||
background-color: red;
|
||||
|
||||
}
|
||||
|
||||
ul.seatCharts-legendList {
|
||||
list-style: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
li.seatCharts-legendItem {
|
||||
margin-top: 10px;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
li.seatCharts-legendItem > .seatCharts-cell {
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -1,627 +0,0 @@
|
|||
/*!
|
||||
* jQuery-Seat-Charts v1.1.5
|
||||
* https://github.com/mateuszmarkowski/jQuery-Seat-Charts
|
||||
*
|
||||
* Copyright 2013, 2016 Mateusz Markowski
|
||||
* Released under the MIT license
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
//'use strict';
|
||||
|
||||
$.fn.seatCharts = function (setup) {
|
||||
|
||||
//if there's seatCharts object associated with the current element, return it
|
||||
if (this.data('seatCharts')) {
|
||||
return this.data('seatCharts');
|
||||
}
|
||||
|
||||
var fn = this,
|
||||
seats = {},
|
||||
seatIds = [],
|
||||
legend,
|
||||
settings = {
|
||||
animate : false, //requires jQuery UI
|
||||
naming : {
|
||||
top : true,
|
||||
left : true,
|
||||
getId : function(character, row, column) {
|
||||
return row + '_' + column;
|
||||
},
|
||||
getLabel : function (character, row, column) {
|
||||
return column;
|
||||
}
|
||||
|
||||
},
|
||||
legend : {
|
||||
node : null,
|
||||
items : []
|
||||
},
|
||||
click : function() {
|
||||
|
||||
if (this.status() == 'available') {
|
||||
return 'selected';
|
||||
} else if (this.status() == 'selected') {
|
||||
return 'available';
|
||||
} else {
|
||||
return this.style();
|
||||
}
|
||||
|
||||
},
|
||||
focus : function() {
|
||||
|
||||
if (this.status() == 'available') {
|
||||
return 'focused';
|
||||
} else {
|
||||
return this.style();
|
||||
}
|
||||
},
|
||||
blur : function() {
|
||||
return this.status();
|
||||
},
|
||||
seats : {}
|
||||
|
||||
},
|
||||
//seat will be basically a seat object which we'll when generating the map
|
||||
seat = (function(seatCharts, seatChartsSettings) {
|
||||
return function (setup) {
|
||||
var fn = this;
|
||||
|
||||
fn.settings = $.extend({
|
||||
status : 'available', //available, unavailable, selected
|
||||
style : 'available',
|
||||
//make sure there's an empty hash if user doesn't pass anything
|
||||
data : seatChartsSettings.seats[setup.character] || {}
|
||||
//anything goes here?
|
||||
}, setup);
|
||||
|
||||
fn.settings.$node = $('<div></div>');
|
||||
|
||||
fn.settings.$node
|
||||
.attr({
|
||||
id : fn.settings.id,
|
||||
role : 'checkbox',
|
||||
'aria-checked' : false,
|
||||
focusable : true,
|
||||
tabIndex : -1 //manual focus
|
||||
})
|
||||
.text(fn.settings.label)
|
||||
.addClass(['seatCharts-seat', 'seatCharts-cell', 'available'].concat(
|
||||
//let's merge custom user defined classes with standard JSC ones
|
||||
fn.settings.classes,
|
||||
typeof seatChartsSettings.seats[fn.settings.character] == "undefined" ?
|
||||
[] : seatChartsSettings.seats[fn.settings.character].classes
|
||||
).join(' '));
|
||||
|
||||
//basically a wrapper function
|
||||
fn.data = function() {
|
||||
return fn.settings.data;
|
||||
};
|
||||
|
||||
fn.char = function() {
|
||||
return fn.settings.character;
|
||||
};
|
||||
|
||||
fn.node = function() {
|
||||
return fn.settings.$node;
|
||||
};
|
||||
|
||||
/*
|
||||
* Can either set or return status depending on arguments.
|
||||
*
|
||||
* If there's no argument, it will return the current style.
|
||||
*
|
||||
* If you pass an argument, it will update seat's style
|
||||
*/
|
||||
fn.style = function() {
|
||||
|
||||
return arguments.length == 1 ?
|
||||
(function(newStyle) {
|
||||
var oldStyle = fn.settings.style;
|
||||
|
||||
//if nothing changes, do nothing
|
||||
if (newStyle == oldStyle) {
|
||||
return oldStyle;
|
||||
}
|
||||
|
||||
//focused is a special style which is not associated with status
|
||||
fn.settings.status = newStyle != 'focused' ? newStyle : fn.settings.status;
|
||||
fn.settings.$node
|
||||
.attr('aria-checked', newStyle == 'selected');
|
||||
|
||||
//if user wants to animate status changes, let him do this
|
||||
seatChartsSettings.animate ?
|
||||
fn.settings.$node.switchClass(oldStyle, newStyle, 200) :
|
||||
fn.settings.$node.removeClass(oldStyle).addClass(newStyle);
|
||||
|
||||
return fn.settings.style = newStyle;
|
||||
})(arguments[0]) : fn.settings.style;
|
||||
};
|
||||
|
||||
//either set or retrieve
|
||||
fn.status = function() {
|
||||
|
||||
return fn.settings.status = arguments.length == 1 ?
|
||||
fn.style(arguments[0]) : fn.settings.status;
|
||||
};
|
||||
|
||||
//using immediate function to convienietly get shortcut variables
|
||||
(function(seatSettings, character, seat) {
|
||||
//attach event handlers
|
||||
$.each(['click', 'focus', 'blur'], function(index, callback) {
|
||||
|
||||
//we want to be able to call the functions for each seat object
|
||||
fn[callback] = function() {
|
||||
if (callback == 'focus') {
|
||||
//if there's already a focused element, we have to remove focus from it first
|
||||
if (seatCharts.attr('aria-activedescendant') !== undefined) {
|
||||
seats[seatCharts.attr('aria-activedescendant')].blur();
|
||||
}
|
||||
seatCharts.attr('aria-activedescendant', seat.settings.id);
|
||||
seat.node().focus();
|
||||
}
|
||||
|
||||
/*
|
||||
* User can pass his own callback function, so we have to first check if it exists
|
||||
* and if not, use our default callback.
|
||||
*
|
||||
* Each callback function is executed in the current seat context.
|
||||
*/
|
||||
return fn.style(typeof seatSettings[character][callback] === 'function' ?
|
||||
seatSettings[character][callback].apply(seat) : seatChartsSettings[callback].apply(seat));
|
||||
};
|
||||
|
||||
});
|
||||
//the below will become seatSettings, character, seat thanks to the immediate function
|
||||
})(seatChartsSettings.seats, fn.settings.character, fn);
|
||||
|
||||
fn.node()
|
||||
//the first three mouse events are simple
|
||||
.on('click', fn.click)
|
||||
.on('mouseenter', fn.focus)
|
||||
.on('mouseleave', fn.blur)
|
||||
|
||||
//keydown requires quite a lot of logic, because we have to know where to move the focus
|
||||
.on('keydown', (function(seat, $seat) {
|
||||
|
||||
return function (e) {
|
||||
|
||||
var $newSeat;
|
||||
|
||||
//everything depends on the pressed key
|
||||
switch (e.which) {
|
||||
//spacebar will just trigger the same event mouse click does
|
||||
case 32:
|
||||
e.preventDefault();
|
||||
seat.click();
|
||||
break;
|
||||
//UP & DOWN
|
||||
case 40:
|
||||
case 38:
|
||||
e.preventDefault();
|
||||
|
||||
/*
|
||||
* This is a recursive, immediate function which searches for the first "focusable" row.
|
||||
*
|
||||
* We're using immediate function because we want a convenient access to some DOM elements
|
||||
* We're using recursion because sometimes we may hit an empty space rather than a seat.
|
||||
*
|
||||
*/
|
||||
$newSeat = (function findAvailable($rows, $seats, $currentRow) {
|
||||
var $newRow;
|
||||
|
||||
//let's determine which row should we move to
|
||||
|
||||
if (!$rows.index($currentRow) && e.which == 38) {
|
||||
//if this is the first row and user has pressed up arrow, move to the last row
|
||||
$newRow = $rows.last();
|
||||
} else if ($rows.index($currentRow) == $rows.length-1 && e.which == 40) {
|
||||
//if this is the last row and user has pressed down arrow, move to the first row
|
||||
$newRow = $rows.first();
|
||||
} else {
|
||||
//using eq to get an element at the desired index position
|
||||
$newRow = $rows.eq(
|
||||
//if up arrow, then decrement the index, if down increment it
|
||||
$rows.index($currentRow) + (e.which == 38 ? (-1) : (+1))
|
||||
);
|
||||
}
|
||||
|
||||
//now that we know the row, let's get the seat using the current column position
|
||||
$newSeat = $newRow.find('.seatCharts-seat,.seatCharts-space').eq($seats.index($seat));
|
||||
|
||||
//if the seat we found is a space, keep looking further
|
||||
return $newSeat.hasClass('seatCharts-space') ?
|
||||
findAvailable($rows, $seats, $newRow) : $newSeat;
|
||||
|
||||
})($seat
|
||||
//get a reference to the parent container and then select all rows but the header
|
||||
.parents('.seatCharts-container')
|
||||
.find('.seatCharts-row:not(.seatCharts-header)'),
|
||||
$seat
|
||||
//get a reference to the parent row and then find all seat cells (both seats & spaces)
|
||||
.parents('.seatCharts-row:first')
|
||||
.find('.seatCharts-seat,.seatCharts-space'),
|
||||
//get a reference to the current row
|
||||
$seat.parents('.seatCharts-row:not(.seatCharts-header)')
|
||||
);
|
||||
|
||||
//we couldn't determine the new seat, so we better give up
|
||||
if (!$newSeat.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
//remove focus from the old seat and put it on the new one
|
||||
seat.blur();
|
||||
seats[$newSeat.attr('id')].focus();
|
||||
$newSeat.focus();
|
||||
|
||||
//update our "aria" reference with the new seat id
|
||||
seatCharts.attr('aria-activedescendant', $newSeat.attr('id'));
|
||||
|
||||
break;
|
||||
//LEFT & RIGHT
|
||||
case 37:
|
||||
case 39:
|
||||
e.preventDefault();
|
||||
/*
|
||||
* The logic here is slightly different from the one for up/down arrows.
|
||||
* User will be able to browse the whole map using just left/right arrow, because
|
||||
* it will move to the next row when we reach the right/left-most seat.
|
||||
*/
|
||||
$newSeat = (function($seats) {
|
||||
|
||||
if (!$seats.index($seat) && e.which == 37) {
|
||||
//user has pressed left arrow and we're currently on the left-most seat
|
||||
return $seats.last();
|
||||
} else if ($seats.index($seat) == $seats.length -1 && e.which == 39) {
|
||||
//user has pressed right arrow and we're currently on the right-most seat
|
||||
return $seats.first();
|
||||
} else {
|
||||
//simply move one seat left or right depending on the key
|
||||
return $seats.eq($seats.index($seat) + (e.which == 37 ? (-1) : (+1)));
|
||||
}
|
||||
|
||||
})($seat
|
||||
.parents('.seatCharts-container:first')
|
||||
.find('.seatCharts-seat:not(.seatCharts-space)'));
|
||||
|
||||
if (!$newSeat.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
//handle focus
|
||||
seat.blur();
|
||||
seats[$newSeat.attr('id')].focus();
|
||||
$newSeat.focus();
|
||||
|
||||
//update our "aria" reference with the new seat id
|
||||
seatCharts.attr('aria-activedescendant', $newSeat.attr('id'));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
})(fn, fn.node()));
|
||||
//.appendTo(seatCharts.find('.' + row));
|
||||
|
||||
}
|
||||
})(fn, settings);
|
||||
|
||||
fn.addClass('seatCharts-container');
|
||||
|
||||
//true -> deep copy!
|
||||
$.extend(true, settings, setup);
|
||||
|
||||
//Generate default row ids unless user passed his own
|
||||
settings.naming.rows = settings.naming.rows || (function(length) {
|
||||
var rows = [];
|
||||
for (var i = 1; i <= length; i++) {
|
||||
rows.push(i);
|
||||
}
|
||||
return rows;
|
||||
})(settings.map.length);
|
||||
|
||||
//Generate default column ids unless user passed his own
|
||||
settings.naming.columns = settings.naming.columns || (function(length) {
|
||||
var columns = [];
|
||||
for (var i = 1; i <= length; i++) {
|
||||
columns.push(i);
|
||||
}
|
||||
return columns;
|
||||
})(settings.map[0].split('').length);
|
||||
|
||||
if (settings.naming.top) {
|
||||
var $headerRow = $('<div></div>')
|
||||
.addClass('seatCharts-row seatCharts-header');
|
||||
|
||||
if (settings.naming.left) {
|
||||
$headerRow.append($('<div></div>').addClass('seatCharts-cell'));
|
||||
}
|
||||
|
||||
|
||||
$.each(settings.naming.columns, function(index, value) {
|
||||
$headerRow.append(
|
||||
$('<div></div>')
|
||||
.addClass('seatCharts-cell')
|
||||
.text(value)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
fn.append($headerRow);
|
||||
|
||||
//do this for each map row
|
||||
$.each(settings.map, function(row, characters) {
|
||||
|
||||
var $row = $('<div></div>').addClass('seatCharts-row');
|
||||
|
||||
if (settings.naming.left) {
|
||||
$row.append(
|
||||
$('<div></div>')
|
||||
.addClass('seatCharts-cell seatCharts-space')
|
||||
.text(settings.naming.rows[row])
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
* Do this for each seat (letter)
|
||||
*
|
||||
* Now users will be able to pass custom ID and label which overwrite the one that seat would be assigned by getId and
|
||||
* getLabel
|
||||
*
|
||||
* New format is like this:
|
||||
* a[ID,label]a[ID]aaaaa
|
||||
*
|
||||
* So you can overwrite the ID or label (or both) even for just one seat.
|
||||
* Basically ID should be first, so if you want to overwrite just label write it as follows:
|
||||
* a[,LABEL]
|
||||
*
|
||||
* Allowed characters in IDs areL 0-9, a-z, A-Z, _
|
||||
* Allowed characters in labels are: 0-9, a-z, A-Z, _, ' ' (space)
|
||||
*
|
||||
*/
|
||||
|
||||
$.each(characters.match(/[a-z_]{1}(\[[0-9a-z_]{0,}(,[0-9a-z_ ]+)?\])?/gi), function (column, characterParams) {
|
||||
var matches = characterParams.match(/([a-z_]{1})(\[([0-9a-z_ ,]+)\])?/i),
|
||||
//no matter if user specifies [] params, the character should be in the second element
|
||||
character = matches[1],
|
||||
//check if user has passed some additional params to override id or label
|
||||
params = typeof matches[3] !== 'undefined' ? matches[3].split(',') : [],
|
||||
//id param should be first
|
||||
overrideId = params.length ? params[0] : null,
|
||||
//label param should be second
|
||||
overrideLabel = params.length === 2 ? params[1] : null;
|
||||
|
||||
$row.append(character != '_' ?
|
||||
//if the character is not an underscore (empty space)
|
||||
(function(naming) {
|
||||
|
||||
//so users don't have to specify empty objects
|
||||
settings.seats[character] = character in settings.seats ? settings.seats[character] : {};
|
||||
|
||||
var id = overrideId ? overrideId : naming.getId(character, naming.rows[row], naming.columns[column]);
|
||||
seats[id] = new seat({
|
||||
id : id,
|
||||
label : overrideLabel ?
|
||||
overrideLabel : naming.getLabel(character, naming.rows[row], naming.columns[column]),
|
||||
row : row,
|
||||
column : column,
|
||||
character : character
|
||||
});
|
||||
|
||||
seatIds.push(id);
|
||||
return seats[id].node();
|
||||
|
||||
})(settings.naming) :
|
||||
//this is just an empty space (_)
|
||||
$('<div></div>').addClass('seatCharts-cell seatCharts-space')
|
||||
);
|
||||
});
|
||||
|
||||
fn.append($row);
|
||||
});
|
||||
|
||||
//if there're any legend items to be rendered
|
||||
settings.legend.items.length ? (function(legend) {
|
||||
//either use user-defined container or create our own and insert it right after the seat chart div
|
||||
var $container = (legend.node || $('<div></div>').insertAfter(fn))
|
||||
.addClass('seatCharts-legend');
|
||||
|
||||
var $ul = $('<ul></ul>')
|
||||
.addClass('seatCharts-legendList')
|
||||
.appendTo($container);
|
||||
|
||||
$.each(legend.items, function(index, item) {
|
||||
$ul.append(
|
||||
$('<li></li>')
|
||||
.addClass('seatCharts-legendItem')
|
||||
.append(
|
||||
$('<div></div>')
|
||||
//merge user defined classes with our standard ones
|
||||
.addClass(['seatCharts-seat', 'seatCharts-cell', item[1]].concat(
|
||||
settings.classes,
|
||||
typeof settings.seats[item[0]] == "undefined" ? [] : settings.seats[item[0]].classes).join(' ')
|
||||
)
|
||||
)
|
||||
.append(
|
||||
$('<span></span>')
|
||||
.addClass('seatCharts-legendDescription')
|
||||
.text(item[2])
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
return $container;
|
||||
})(settings.legend) : null;
|
||||
|
||||
fn.attr({
|
||||
tabIndex : 0
|
||||
});
|
||||
|
||||
|
||||
//when container's focused, move focus to the first seat
|
||||
fn.focus(function() {
|
||||
if (fn.attr('aria-activedescendant')) {
|
||||
seats[fn.attr('aria-activedescendant')].blur();
|
||||
}
|
||||
|
||||
fn.find('.seatCharts-seat:not(.seatCharts-space):first').focus();
|
||||
seats[seatIds[0]].focus();
|
||||
|
||||
});
|
||||
|
||||
//public methods of seatCharts
|
||||
fn.data('seatCharts', {
|
||||
seats : seats,
|
||||
seatIds : seatIds,
|
||||
//set for one, set for many, get for one
|
||||
status: function() {
|
||||
var fn = this;
|
||||
|
||||
return arguments.length == 1 ? fn.seats[arguments[0]].status() : (function(seatsIds, newStatus) {
|
||||
|
||||
return typeof seatsIds == 'string' ? fn.seats[seatsIds].status(newStatus) : (function() {
|
||||
$.each(seatsIds, function(index, seatId) {
|
||||
fn.seats[seatId].status(newStatus);
|
||||
});
|
||||
})();
|
||||
})(arguments[0], arguments[1]);
|
||||
},
|
||||
each : function(callback) {
|
||||
var fn = this;
|
||||
|
||||
for (var seatId in fn.seats) {
|
||||
if (false === callback.call(fn.seats[seatId], seatId)) {
|
||||
return seatId;//return last checked
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
node : function() {
|
||||
var fn = this;
|
||||
//basically create a CSS query to get all seats by their DOM ids
|
||||
return $('#' + fn.seatIds.join(',#'));
|
||||
},
|
||||
|
||||
find : function(query) {//D, a.available, unavailable
|
||||
var fn = this;
|
||||
|
||||
var seatSet = fn.set();
|
||||
|
||||
//is RegExp
|
||||
return query instanceof RegExp ?
|
||||
(function () {
|
||||
fn.each(function (id) {
|
||||
if (id.match(query)) {
|
||||
seatSet.push(id, this);
|
||||
}
|
||||
});
|
||||
return seatSet;
|
||||
})() :
|
||||
(query.length == 1 ?
|
||||
(function (character) {
|
||||
//user searches just for a particual character
|
||||
fn.each(function () {
|
||||
if (this.char() == character) {
|
||||
seatSet.push(this.settings.id, this);
|
||||
}
|
||||
});
|
||||
|
||||
return seatSet;
|
||||
})(query) :
|
||||
(function () {
|
||||
//user runs a more sophisticated query, so let's see if there's a dot
|
||||
return query.indexOf('.') > -1 ?
|
||||
(function () {
|
||||
//there's a dot which separates character and the status
|
||||
var parts = query.split('.');
|
||||
|
||||
fn.each(function (seatId) {
|
||||
if (this.char() == parts[0] && this.status() == parts[1]) {
|
||||
seatSet.push(this.settings.id, this);
|
||||
}
|
||||
});
|
||||
|
||||
return seatSet;
|
||||
})() :
|
||||
(function () {
|
||||
fn.each(function () {
|
||||
if (this.status() == query) {
|
||||
seatSet.push(this.settings.id, this);
|
||||
}
|
||||
});
|
||||
return seatSet;
|
||||
})();
|
||||
})()
|
||||
);
|
||||
|
||||
},
|
||||
set : function set() {//inherits some methods
|
||||
var fn = this;
|
||||
|
||||
return {
|
||||
seats : [],
|
||||
seatIds : [],
|
||||
length : 0,
|
||||
status : function() {
|
||||
var args = arguments,
|
||||
that = this;
|
||||
//if there's just one seat in the set and user didn't pass any params, return current status
|
||||
return this.length == 1 && args.length == 0 ? this.seats[0].status() : (function() {
|
||||
//otherwise call status function for each of the seats in the set
|
||||
$.each(that.seats, function() {
|
||||
this.status.apply(this, args);
|
||||
});
|
||||
})();
|
||||
},
|
||||
node : function() {
|
||||
return fn.node.call(this);
|
||||
},
|
||||
each : function() {
|
||||
return fn.each.call(this, arguments[0]);
|
||||
},
|
||||
get : function() {
|
||||
return fn.get.call(this, arguments[0]);
|
||||
},
|
||||
find : function() {
|
||||
return fn.find.call(this, arguments[0]);
|
||||
},
|
||||
set : function() {
|
||||
return set.call(fn);
|
||||
},
|
||||
push : function(id, seat) {
|
||||
this.seats.push(seat);
|
||||
this.seatIds.push(id);
|
||||
++this.length;
|
||||
}
|
||||
};
|
||||
},
|
||||
//get one object or a set of objects
|
||||
get : function(seatsIds) {
|
||||
var fn = this;
|
||||
|
||||
return typeof seatsIds == 'string' ?
|
||||
fn.seats[seatsIds] : (function() {
|
||||
|
||||
var seatSet = fn.set();
|
||||
|
||||
$.each(seatsIds, function(index, seatId) {
|
||||
if (typeof fn.seats[seatId] === 'object') {
|
||||
seatSet.push(seatId, fn.seats[seatId]);
|
||||
}
|
||||
});
|
||||
|
||||
return seatSet;
|
||||
})();
|
||||
}
|
||||
});
|
||||
|
||||
return fn.data('seatCharts');
|
||||
}
|
||||
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,61 +0,0 @@
|
|||
body {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
text-align: center;
|
||||
margin: 100px;
|
||||
border-radius: 10px;
|
||||
padding: 50px 0;
|
||||
text-shadow: 0 0 2px rgba(56, 55, 55, 0.6);
|
||||
color: #545c5f;
|
||||
}
|
||||
|
||||
.wrapper h2 {
|
||||
font-size: 64px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wrapper h3 {
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
text-shadow: 1px 0px 0px rgb(160, 160, 160);
|
||||
}
|
||||
|
||||
#sel-seat {
|
||||
font-size: 24px;
|
||||
text-shadow: 0px 0px 1px rgb(160, 160, 160);
|
||||
margin-top: -15px;
|
||||
margin-bottom: 2%;
|
||||
padding: 0;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: auto 0;
|
||||
font-size: 18px;
|
||||
background-color: #5d7cd3;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
min-width: 250px;
|
||||
padding: 25px 60px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color: #3490dc;
|
||||
border-color: #3490dc;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 30%;
|
||||
transform: translate(-50%, -10%);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
box-shadow: 0 0 rgb(103, 88, 184);
|
||||
color: #fff;
|
||||
background-color: #227dc7;
|
||||
border-color: #2176bd;
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.14.0.css">
|
||||
<link rel="stylesheet" href="jquery.seat-charts.css">
|
||||
<script src="https://code.jquery.com/qunit/qunit-1.14.0.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
|
||||
<script type="text/javascript" src="jquery.seat-charts.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="koncowastrona.css">
|
||||
<script type="text/javascript" src="seatchart.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<h2>Anna Kowalska</h2>
|
||||
|
||||
<h3>wybrane miejsce:</h3>
|
||||
<ul id="sel-seat"></ul>
|
||||
|
||||
<button class="gotomain-button" onclick="doStronyGlownej()">Następny student »</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function doStronyGlownej() {
|
||||
window.location = "przylozlegitke.html";
|
||||
}
|
||||
|
||||
//alert(localStorage.getItem('myElement')); //Przykładowa wartość
|
||||
$( document ).ready(function() {
|
||||
$("#sel-seat").text(localStorage.getItem('myElement'));
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
body {
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
display: inline-block;
|
||||
padding: 20px;
|
||||
width: 70%;
|
||||
height:60vh;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.czytnik {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -30%;
|
||||
transform: translate(-50%, -10%);
|
||||
color: #fff;
|
||||
background-color: #3490dc;
|
||||
border-color: #3490dc;
|
||||
padding: 50px 100px;
|
||||
font: 400 13.3333px Arial;
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.czytnik:hover {
|
||||
box-shadow: 0 0 rgb(103, 88, 184);
|
||||
color: #fff;
|
||||
background-color: #227dc7;
|
||||
border-color: #2176bd;
|
||||
}
|
||||
|
||||
.main-text {
|
||||
text-transform: uppercase;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-weight: 500;
|
||||
text-shadow: 0 0 2px rgba(56, 55, 55, 0.6);
|
||||
color: #636b6f;
|
||||
text-align: center;
|
||||
font-size: 12vh;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.wrapper {
|
||||
height: 50%;
|
||||
}
|
||||
.main-text {
|
||||
font-size: 9vh;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 870px) {
|
||||
.wrapper {
|
||||
height: 35%;
|
||||
}
|
||||
.main-text {
|
||||
font-size: 3.5em;
|
||||
line-height: 10vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.czytnik {
|
||||
bottom: -30%;
|
||||
transform: translate(-50%, -10%);
|
||||
padding: 30px 50px;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.wrapper {
|
||||
height: 30%;
|
||||
}
|
||||
.main-text {
|
||||
font-size: 2.7em;
|
||||
line-height: 6vh;
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.14.0.css">
|
||||
<link rel="stylesheet" href="jquery.seat-charts.css">
|
||||
<script src="https://code.jquery.com/qunit/qunit-1.14.0.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
|
||||
<script type="text/javascript" src="jquery.seat-charts.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="przylozlegitke.css">
|
||||
<script type="text/javascript" src="przylozlegitke.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
|
||||
<title>@CHECK</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<h1 class="main-text">Przyłóż legitymację do czytnika</h1>
|
||||
<h3 class="czytnik" onmouseover="overFunction()"> CZYTNIK </h3>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function overFunction() {
|
||||
//window.location = "mapka/frontpage.html";
|
||||
setTimeout(function() {
|
||||
window.location = "seatchart.html";
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,160 +0,0 @@
|
|||
body {
|
||||
background-color: #f8fafc;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-weight: 600;
|
||||
font-style: #b71a4c;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #b71a4c;
|
||||
}
|
||||
|
||||
.front-indicator {
|
||||
width: 90%;
|
||||
margin: 5px 32px 5px 32px;
|
||||
background-color: #ececec;
|
||||
color: #a1a1a1;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.seat-stat-wrapper {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#legend {
|
||||
width: 49%;
|
||||
margin: 0 auto;
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.booking-details {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
width: 49%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
#legend {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.booking-details {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.booking-details h2 {
|
||||
margin: 25px 0 20px 0;
|
||||
font-size: 40px;
|
||||
color: #333333;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.booking-details h3 {
|
||||
margin: 5px 5px 0 0;
|
||||
font-size: 22px;
|
||||
color: #333333;
|
||||
font-display: bold;
|
||||
}
|
||||
|
||||
div.seatCharts-cell {
|
||||
color: #182C4E;
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
div.seatCharts-seat {
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.seatCharts-row {
|
||||
height: 100px;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
/*align-items: center;*/
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.available {
|
||||
background-color: #649a24;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.available.student-class {
|
||||
background-color: #a8b9bd;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.focused {
|
||||
background-color: #1F5684;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.selected {
|
||||
background-color: #1b4d76;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.unavailable {
|
||||
background-color: #6F7881;
|
||||
}
|
||||
|
||||
div.seatCharts-container {
|
||||
width: 80%;
|
||||
padding: 20px 0;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.seatCharts-legend {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.seatCharts-legend li {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
ul.seatCharts-legendList {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
span.seatCharts-legendDescription {
|
||||
margin-left: 5px;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.checkout-button {
|
||||
margin: 10px 0;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background-color: #3490dc;
|
||||
border-color: #3490dc;
|
||||
border-radius: 3px;
|
||||
border: 0;
|
||||
padding: 15px 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.checkout-button:hover {
|
||||
box-shadow: 0 0 rgb(103, 88, 184);
|
||||
background-color: #227dc7;
|
||||
border-color: #2176bd;
|
||||
}
|
||||
|
||||
#selected-seats {
|
||||
list-style-type: none;
|
||||
font-size: 14px;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.14.0.css">
|
||||
<link rel="stylesheet" href="jquery.seat-charts.css">
|
||||
<script src="https://code.jquery.com/qunit/qunit-1.14.0.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
|
||||
<script type="text/javascript" src="jquery.seat-charts.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="seatchart.css">
|
||||
<script type="text/javascript" src="seatchart.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
|
||||
<title>@CHECK</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="seat-chart-wrapper">
|
||||
<div id="seat-map">
|
||||
<div class="front-indicator">SALA X</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class='seat-stat-wrapper'>
|
||||
<div id="legend">
|
||||
</div>
|
||||
<div class="booking-details">
|
||||
<h2 id="studentName">Anna Kowalska</h2>
|
||||
|
||||
<h3>Wybrane miejsce: </h3>
|
||||
<ul id="selected-seats"></ul>
|
||||
|
||||
<button class="checkout-button" onclick="goToKoncowa()">Zapisz »</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
function goToKoncowa() {
|
||||
window.location = "koncowastrona.html";
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
var firstSeatLabel = 1;
|
||||
|
||||
$(document).ready(function() {
|
||||
var $cart = $('#selected-seats'),
|
||||
seatNumber = '',
|
||||
$placeNumber = ('#sel-seat'),
|
||||
$counter = $('#counter'),
|
||||
$name = $('#studentName'),
|
||||
$total = $('#total'),
|
||||
sc = $('#seat-map').seatCharts({
|
||||
map: [
|
||||
'cccccc',
|
||||
'_',
|
||||
'cccccc',
|
||||
'cccccc',
|
||||
],
|
||||
seats: {
|
||||
h: {
|
||||
price : 2500,
|
||||
classes : 'student-class',
|
||||
category: 'Student Seat'
|
||||
},
|
||||
},
|
||||
naming : {
|
||||
rows: ['1','','2','3'],
|
||||
top : 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']
|
||||
]
|
||||
},
|
||||
click: function () {
|
||||
if (this.status() == 'available' && recalculateTotal(sc) < 1) {
|
||||
//let's create a new <li> which we'll add to the cart items
|
||||
$('<li> rząd '+ this.settings.row + ', miejsce '+this.settings.label+ ' <a href="#" class="cancel-cart-item">[cancel]</a></li>')
|
||||
.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();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//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();
|
||||
});
|
||||
|
||||
//let's pretend some seats have already been booked
|
||||
//sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');
|
||||
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.14.0.css">
|
||||
<link rel="stylesheet" href="jquery.seat-charts.css">
|
||||
<script src="https://code.jquery.com/qunit/qunit-1.14.0.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
|
||||
<script type="text/javascript" src="jquery.seat-charts.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="seatchart.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
|
||||
<script type="text/javascript" src="seatchart.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<div class="seat-chart-wrapper">
|
||||
<div id="seat-map">
|
||||
<div class="front-indicator">SALA X</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class='seat-stat-wrapper'>
|
||||
<div id="legend">
|
||||
|
||||
</div>
|
||||
<div class="booking-details">
|
||||
<button class="checkout-button" onclick="goToMainPage()">Strona Główna »</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function goToMainPage() {
|
||||
window.location = "wyborsali.html";
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
div.seatCharts-container {
|
||||
/*min-width: 700px;*/
|
||||
}
|
||||
div.seatCharts-cell {
|
||||
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin: 3px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
font-size: 13px;
|
||||
line-height:16px;
|
||||
color: blue;
|
||||
|
||||
}
|
||||
div.seatCharts-seat {
|
||||
background-color: green;
|
||||
color: white;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
cursor: default;
|
||||
}
|
||||
div.seatCharts-seat:focus {
|
||||
border: none;
|
||||
}
|
||||
/*
|
||||
.seatCharts-seat:focus {
|
||||
outline: none;
|
||||
}
|
||||
*/
|
||||
|
||||
div.seatCharts-space {
|
||||
background-color: white;
|
||||
}
|
||||
div.seatCharts-row {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
div.seatCharts-row:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.selected {
|
||||
background-color: aqua;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.focused {
|
||||
background-color: #6db131;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.available {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.unavailable {
|
||||
background-color: red;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
ul.seatCharts-legendList {
|
||||
list-style: none;
|
||||
}
|
||||
li.seatCharts-legendItem {
|
||||
margin-top: 10px;
|
||||
line-height: 2;
|
||||
}
|
||||
|
|
@ -1,627 +0,0 @@
|
|||
/*!
|
||||
* jQuery-Seat-Charts v1.1.5
|
||||
* https://github.com/mateuszmarkowski/jQuery-Seat-Charts
|
||||
*
|
||||
* Copyright 2013, 2016 Mateusz Markowski
|
||||
* Released under the MIT license
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
//'use strict';
|
||||
|
||||
$.fn.seatCharts = function (setup) {
|
||||
|
||||
//if there's seatCharts object associated with the current element, return it
|
||||
if (this.data('seatCharts')) {
|
||||
return this.data('seatCharts');
|
||||
}
|
||||
|
||||
var fn = this,
|
||||
seats = {},
|
||||
seatIds = [],
|
||||
legend,
|
||||
settings = {
|
||||
animate : false, //requires jQuery UI
|
||||
naming : {
|
||||
top : true,
|
||||
left : true,
|
||||
getId : function(character, row, column) {
|
||||
return row + '_' + column;
|
||||
},
|
||||
getLabel : function (character, row, column) {
|
||||
return column;
|
||||
}
|
||||
|
||||
},
|
||||
legend : {
|
||||
node : null,
|
||||
items : []
|
||||
},
|
||||
click : function() {
|
||||
|
||||
if (this.status() == 'available') {
|
||||
return 'selected';
|
||||
} else if (this.status() == 'selected') {
|
||||
return 'available';
|
||||
} else {
|
||||
return this.style();
|
||||
}
|
||||
|
||||
},
|
||||
focus : function() {
|
||||
|
||||
if (this.status() == 'available') {
|
||||
return 'focused';
|
||||
} else {
|
||||
return this.style();
|
||||
}
|
||||
},
|
||||
blur : function() {
|
||||
return this.status();
|
||||
},
|
||||
seats : {}
|
||||
|
||||
},
|
||||
//seat will be basically a seat object which we'll when generating the map
|
||||
seat = (function(seatCharts, seatChartsSettings) {
|
||||
return function (setup) {
|
||||
var fn = this;
|
||||
|
||||
fn.settings = $.extend({
|
||||
status : 'available', //available, unavailable, selected
|
||||
style : 'available',
|
||||
//make sure there's an empty hash if user doesn't pass anything
|
||||
data : seatChartsSettings.seats[setup.character] || {}
|
||||
//anything goes here?
|
||||
}, setup);
|
||||
|
||||
fn.settings.$node = $('<div></div>');
|
||||
|
||||
fn.settings.$node
|
||||
.attr({
|
||||
id : fn.settings.id,
|
||||
role : 'checkbox',
|
||||
'aria-checked' : false,
|
||||
focusable : true,
|
||||
tabIndex : -1 //manual focus
|
||||
})
|
||||
.text(fn.settings.label)
|
||||
.addClass(['seatCharts-seat', 'seatCharts-cell', 'available'].concat(
|
||||
//let's merge custom user defined classes with standard JSC ones
|
||||
fn.settings.classes,
|
||||
typeof seatChartsSettings.seats[fn.settings.character] == "undefined" ?
|
||||
[] : seatChartsSettings.seats[fn.settings.character].classes
|
||||
).join(' '));
|
||||
|
||||
//basically a wrapper function
|
||||
fn.data = function() {
|
||||
return fn.settings.data;
|
||||
};
|
||||
|
||||
fn.char = function() {
|
||||
return fn.settings.character;
|
||||
};
|
||||
|
||||
fn.node = function() {
|
||||
return fn.settings.$node;
|
||||
};
|
||||
|
||||
/*
|
||||
* Can either set or return status depending on arguments.
|
||||
*
|
||||
* If there's no argument, it will return the current style.
|
||||
*
|
||||
* If you pass an argument, it will update seat's style
|
||||
*/
|
||||
fn.style = function() {
|
||||
|
||||
return arguments.length == 1 ?
|
||||
(function(newStyle) {
|
||||
var oldStyle = fn.settings.style;
|
||||
|
||||
//if nothing changes, do nothing
|
||||
if (newStyle == oldStyle) {
|
||||
return oldStyle;
|
||||
}
|
||||
|
||||
//focused is a special style which is not associated with status
|
||||
fn.settings.status = newStyle != 'focused' ? newStyle : fn.settings.status;
|
||||
fn.settings.$node
|
||||
.attr('aria-checked', newStyle == 'selected');
|
||||
|
||||
//if user wants to animate status changes, let him do this
|
||||
seatChartsSettings.animate ?
|
||||
fn.settings.$node.switchClass(oldStyle, newStyle, 200) :
|
||||
fn.settings.$node.removeClass(oldStyle).addClass(newStyle);
|
||||
|
||||
return fn.settings.style = newStyle;
|
||||
})(arguments[0]) : fn.settings.style;
|
||||
};
|
||||
|
||||
//either set or retrieve
|
||||
fn.status = function() {
|
||||
|
||||
return fn.settings.status = arguments.length == 1 ?
|
||||
fn.style(arguments[0]) : fn.settings.status;
|
||||
};
|
||||
|
||||
//using immediate function to convienietly get shortcut variables
|
||||
(function(seatSettings, character, seat) {
|
||||
//attach event handlers
|
||||
$.each(['click', 'focus', 'blur'], function(index, callback) {
|
||||
|
||||
//we want to be able to call the functions for each seat object
|
||||
fn[callback] = function() {
|
||||
if (callback == 'focus') {
|
||||
//if there's already a focused element, we have to remove focus from it first
|
||||
if (seatCharts.attr('aria-activedescendant') !== undefined) {
|
||||
seats[seatCharts.attr('aria-activedescendant')].blur();
|
||||
}
|
||||
seatCharts.attr('aria-activedescendant', seat.settings.id);
|
||||
seat.node().focus();
|
||||
}
|
||||
|
||||
/*
|
||||
* User can pass his own callback function, so we have to first check if it exists
|
||||
* and if not, use our default callback.
|
||||
*
|
||||
* Each callback function is executed in the current seat context.
|
||||
*/
|
||||
return fn.style(typeof seatSettings[character][callback] === 'function' ?
|
||||
seatSettings[character][callback].apply(seat) : seatChartsSettings[callback].apply(seat));
|
||||
};
|
||||
|
||||
});
|
||||
//the below will become seatSettings, character, seat thanks to the immediate function
|
||||
})(seatChartsSettings.seats, fn.settings.character, fn);
|
||||
|
||||
fn.node()
|
||||
//the first three mouse events are simple
|
||||
.on('click', fn.click)
|
||||
.on('mouseenter', fn.focus)
|
||||
.on('mouseleave', fn.blur)
|
||||
|
||||
//keydown requires quite a lot of logic, because we have to know where to move the focus
|
||||
.on('keydown', (function(seat, $seat) {
|
||||
|
||||
return function (e) {
|
||||
|
||||
var $newSeat;
|
||||
|
||||
//everything depends on the pressed key
|
||||
switch (e.which) {
|
||||
//spacebar will just trigger the same event mouse click does
|
||||
case 32:
|
||||
e.preventDefault();
|
||||
seat.click();
|
||||
break;
|
||||
//UP & DOWN
|
||||
case 40:
|
||||
case 38:
|
||||
e.preventDefault();
|
||||
|
||||
/*
|
||||
* This is a recursive, immediate function which searches for the first "focusable" row.
|
||||
*
|
||||
* We're using immediate function because we want a convenient access to some DOM elements
|
||||
* We're using recursion because sometimes we may hit an empty space rather than a seat.
|
||||
*
|
||||
*/
|
||||
$newSeat = (function findAvailable($rows, $seats, $currentRow) {
|
||||
var $newRow;
|
||||
|
||||
//let's determine which row should we move to
|
||||
|
||||
if (!$rows.index($currentRow) && e.which == 38) {
|
||||
//if this is the first row and user has pressed up arrow, move to the last row
|
||||
$newRow = $rows.last();
|
||||
} else if ($rows.index($currentRow) == $rows.length-1 && e.which == 40) {
|
||||
//if this is the last row and user has pressed down arrow, move to the first row
|
||||
$newRow = $rows.first();
|
||||
} else {
|
||||
//using eq to get an element at the desired index position
|
||||
$newRow = $rows.eq(
|
||||
//if up arrow, then decrement the index, if down increment it
|
||||
$rows.index($currentRow) + (e.which == 38 ? (-1) : (+1))
|
||||
);
|
||||
}
|
||||
|
||||
//now that we know the row, let's get the seat using the current column position
|
||||
$newSeat = $newRow.find('.seatCharts-seat,.seatCharts-space').eq($seats.index($seat));
|
||||
|
||||
//if the seat we found is a space, keep looking further
|
||||
return $newSeat.hasClass('seatCharts-space') ?
|
||||
findAvailable($rows, $seats, $newRow) : $newSeat;
|
||||
|
||||
})($seat
|
||||
//get a reference to the parent container and then select all rows but the header
|
||||
.parents('.seatCharts-container')
|
||||
.find('.seatCharts-row:not(.seatCharts-header)'),
|
||||
$seat
|
||||
//get a reference to the parent row and then find all seat cells (both seats & spaces)
|
||||
.parents('.seatCharts-row:first')
|
||||
.find('.seatCharts-seat,.seatCharts-space'),
|
||||
//get a reference to the current row
|
||||
$seat.parents('.seatCharts-row:not(.seatCharts-header)')
|
||||
);
|
||||
|
||||
//we couldn't determine the new seat, so we better give up
|
||||
if (!$newSeat.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
//remove focus from the old seat and put it on the new one
|
||||
seat.blur();
|
||||
seats[$newSeat.attr('id')].focus();
|
||||
$newSeat.focus();
|
||||
|
||||
//update our "aria" reference with the new seat id
|
||||
seatCharts.attr('aria-activedescendant', $newSeat.attr('id'));
|
||||
|
||||
break;
|
||||
//LEFT & RIGHT
|
||||
case 37:
|
||||
case 39:
|
||||
e.preventDefault();
|
||||
/*
|
||||
* The logic here is slightly different from the one for up/down arrows.
|
||||
* User will be able to browse the whole map using just left/right arrow, because
|
||||
* it will move to the next row when we reach the right/left-most seat.
|
||||
*/
|
||||
$newSeat = (function($seats) {
|
||||
|
||||
if (!$seats.index($seat) && e.which == 37) {
|
||||
//user has pressed left arrow and we're currently on the left-most seat
|
||||
return $seats.last();
|
||||
} else if ($seats.index($seat) == $seats.length -1 && e.which == 39) {
|
||||
//user has pressed right arrow and we're currently on the right-most seat
|
||||
return $seats.first();
|
||||
} else {
|
||||
//simply move one seat left or right depending on the key
|
||||
return $seats.eq($seats.index($seat) + (e.which == 37 ? (-1) : (+1)));
|
||||
}
|
||||
|
||||
})($seat
|
||||
.parents('.seatCharts-container:first')
|
||||
.find('.seatCharts-seat:not(.seatCharts-space)'));
|
||||
|
||||
if (!$newSeat.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
//handle focus
|
||||
seat.blur();
|
||||
seats[$newSeat.attr('id')].focus();
|
||||
$newSeat.focus();
|
||||
|
||||
//update our "aria" reference with the new seat id
|
||||
seatCharts.attr('aria-activedescendant', $newSeat.attr('id'));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
})(fn, fn.node()));
|
||||
//.appendTo(seatCharts.find('.' + row));
|
||||
|
||||
}
|
||||
})(fn, settings);
|
||||
|
||||
fn.addClass('seatCharts-container');
|
||||
|
||||
//true -> deep copy!
|
||||
$.extend(true, settings, setup);
|
||||
|
||||
//Generate default row ids unless user passed his own
|
||||
settings.naming.rows = settings.naming.rows || (function(length) {
|
||||
var rows = [];
|
||||
for (var i = 1; i <= length; i++) {
|
||||
rows.push(i);
|
||||
}
|
||||
return rows;
|
||||
})(settings.map.length);
|
||||
|
||||
//Generate default column ids unless user passed his own
|
||||
settings.naming.columns = settings.naming.columns || (function(length) {
|
||||
var columns = [];
|
||||
for (var i = 1; i <= length; i++) {
|
||||
columns.push(i);
|
||||
}
|
||||
return columns;
|
||||
})(settings.map[0].split('').length);
|
||||
|
||||
if (settings.naming.top) {
|
||||
var $headerRow = $('<div></div>')
|
||||
.addClass('seatCharts-row seatCharts-header');
|
||||
|
||||
if (settings.naming.left) {
|
||||
$headerRow.append($('<div></div>').addClass('seatCharts-cell'));
|
||||
}
|
||||
|
||||
|
||||
$.each(settings.naming.columns, function(index, value) {
|
||||
$headerRow.append(
|
||||
$('<div></div>')
|
||||
.addClass('seatCharts-cell')
|
||||
.text(value)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
fn.append($headerRow);
|
||||
|
||||
//do this for each map row
|
||||
$.each(settings.map, function(row, characters) {
|
||||
|
||||
var $row = $('<div></div>').addClass('seatCharts-row');
|
||||
|
||||
if (settings.naming.left) {
|
||||
$row.append(
|
||||
$('<div></div>')
|
||||
.addClass('seatCharts-cell seatCharts-space')
|
||||
.text(settings.naming.rows[row])
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
* Do this for each seat (letter)
|
||||
*
|
||||
* Now users will be able to pass custom ID and label which overwrite the one that seat would be assigned by getId and
|
||||
* getLabel
|
||||
*
|
||||
* New format is like this:
|
||||
* a[ID,label]a[ID]aaaaa
|
||||
*
|
||||
* So you can overwrite the ID or label (or both) even for just one seat.
|
||||
* Basically ID should be first, so if you want to overwrite just label write it as follows:
|
||||
* a[,LABEL]
|
||||
*
|
||||
* Allowed characters in IDs areL 0-9, a-z, A-Z, _
|
||||
* Allowed characters in labels are: 0-9, a-z, A-Z, _, ' ' (space)
|
||||
*
|
||||
*/
|
||||
|
||||
$.each(characters.match(/[a-z_]{1}(\[[0-9a-z_]{0,}(,[0-9a-z_ ]+)?\])?/gi), function (column, characterParams) {
|
||||
var matches = characterParams.match(/([a-z_]{1})(\[([0-9a-z_ ,]+)\])?/i),
|
||||
//no matter if user specifies [] params, the character should be in the second element
|
||||
character = matches[1],
|
||||
//check if user has passed some additional params to override id or label
|
||||
params = typeof matches[3] !== 'undefined' ? matches[3].split(',') : [],
|
||||
//id param should be first
|
||||
overrideId = params.length ? params[0] : null,
|
||||
//label param should be second
|
||||
overrideLabel = params.length === 2 ? params[1] : null;
|
||||
|
||||
$row.append(character != '_' ?
|
||||
//if the character is not an underscore (empty space)
|
||||
(function(naming) {
|
||||
|
||||
//so users don't have to specify empty objects
|
||||
settings.seats[character] = character in settings.seats ? settings.seats[character] : {};
|
||||
|
||||
var id = overrideId ? overrideId : naming.getId(character, naming.rows[row], naming.columns[column]);
|
||||
seats[id] = new seat({
|
||||
id : id,
|
||||
label : overrideLabel ?
|
||||
overrideLabel : naming.getLabel(character, naming.rows[row], naming.columns[column]),
|
||||
row : row,
|
||||
column : column,
|
||||
character : character
|
||||
});
|
||||
|
||||
seatIds.push(id);
|
||||
return seats[id].node();
|
||||
|
||||
})(settings.naming) :
|
||||
//this is just an empty space (_)
|
||||
$('<div></div>').addClass('seatCharts-cell seatCharts-space')
|
||||
);
|
||||
});
|
||||
|
||||
fn.append($row);
|
||||
});
|
||||
|
||||
//if there're any legend items to be rendered
|
||||
settings.legend.items.length ? (function(legend) {
|
||||
//either use user-defined container or create our own and insert it right after the seat chart div
|
||||
var $container = (legend.node || $('<div></div>').insertAfter(fn))
|
||||
.addClass('seatCharts-legend');
|
||||
|
||||
var $ul = $('<ul></ul>')
|
||||
.addClass('seatCharts-legendList')
|
||||
.appendTo($container);
|
||||
|
||||
$.each(legend.items, function(index, item) {
|
||||
$ul.append(
|
||||
$('<li></li>')
|
||||
.addClass('seatCharts-legendItem')
|
||||
.append(
|
||||
$('<div></div>')
|
||||
//merge user defined classes with our standard ones
|
||||
.addClass(['seatCharts-seat', 'seatCharts-cell', item[1]].concat(
|
||||
settings.classes,
|
||||
typeof settings.seats[item[0]] == "undefined" ? [] : settings.seats[item[0]].classes).join(' ')
|
||||
)
|
||||
)
|
||||
.append(
|
||||
$('<span></span>')
|
||||
.addClass('seatCharts-legendDescription')
|
||||
.text(item[2])
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
return $container;
|
||||
})(settings.legend) : null;
|
||||
|
||||
fn.attr({
|
||||
tabIndex : 0
|
||||
});
|
||||
|
||||
|
||||
//when container's focused, move focus to the first seat
|
||||
fn.focus(function() {
|
||||
if (fn.attr('aria-activedescendant')) {
|
||||
seats[fn.attr('aria-activedescendant')].blur();
|
||||
}
|
||||
|
||||
fn.find('.seatCharts-seat:not(.seatCharts-space):first').focus();
|
||||
seats[seatIds[0]].focus();
|
||||
|
||||
});
|
||||
|
||||
//public methods of seatCharts
|
||||
fn.data('seatCharts', {
|
||||
seats : seats,
|
||||
seatIds : seatIds,
|
||||
//set for one, set for many, get for one
|
||||
status: function() {
|
||||
var fn = this;
|
||||
|
||||
return arguments.length == 1 ? fn.seats[arguments[0]].status() : (function(seatsIds, newStatus) {
|
||||
|
||||
return typeof seatsIds == 'string' ? fn.seats[seatsIds].status(newStatus) : (function() {
|
||||
$.each(seatsIds, function(index, seatId) {
|
||||
fn.seats[seatId].status(newStatus);
|
||||
});
|
||||
})();
|
||||
})(arguments[0], arguments[1]);
|
||||
},
|
||||
each : function(callback) {
|
||||
var fn = this;
|
||||
|
||||
for (var seatId in fn.seats) {
|
||||
if (false === callback.call(fn.seats[seatId], seatId)) {
|
||||
return seatId;//return last checked
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
node : function() {
|
||||
var fn = this;
|
||||
//basically create a CSS query to get all seats by their DOM ids
|
||||
return $('#' + fn.seatIds.join(',#'));
|
||||
},
|
||||
|
||||
find : function(query) {//D, a.available, unavailable
|
||||
var fn = this;
|
||||
|
||||
var seatSet = fn.set();
|
||||
|
||||
//is RegExp
|
||||
return query instanceof RegExp ?
|
||||
(function () {
|
||||
fn.each(function (id) {
|
||||
if (id.match(query)) {
|
||||
seatSet.push(id, this);
|
||||
}
|
||||
});
|
||||
return seatSet;
|
||||
})() :
|
||||
(query.length == 1 ?
|
||||
(function (character) {
|
||||
//user searches just for a particual character
|
||||
fn.each(function () {
|
||||
if (this.char() == character) {
|
||||
seatSet.push(this.settings.id, this);
|
||||
}
|
||||
});
|
||||
|
||||
return seatSet;
|
||||
})(query) :
|
||||
(function () {
|
||||
//user runs a more sophisticated query, so let's see if there's a dot
|
||||
return query.indexOf('.') > -1 ?
|
||||
(function () {
|
||||
//there's a dot which separates character and the status
|
||||
var parts = query.split('.');
|
||||
|
||||
fn.each(function (seatId) {
|
||||
if (this.char() == parts[0] && this.status() == parts[1]) {
|
||||
seatSet.push(this.settings.id, this);
|
||||
}
|
||||
});
|
||||
|
||||
return seatSet;
|
||||
})() :
|
||||
(function () {
|
||||
fn.each(function () {
|
||||
if (this.status() == query) {
|
||||
seatSet.push(this.settings.id, this);
|
||||
}
|
||||
});
|
||||
return seatSet;
|
||||
})();
|
||||
})()
|
||||
);
|
||||
|
||||
},
|
||||
set : function set() {//inherits some methods
|
||||
var fn = this;
|
||||
|
||||
return {
|
||||
seats : [],
|
||||
seatIds : [],
|
||||
length : 0,
|
||||
status : function() {
|
||||
var args = arguments,
|
||||
that = this;
|
||||
//if there's just one seat in the set and user didn't pass any params, return current status
|
||||
return this.length == 1 && args.length == 0 ? this.seats[0].status() : (function() {
|
||||
//otherwise call status function for each of the seats in the set
|
||||
$.each(that.seats, function() {
|
||||
this.status.apply(this, args);
|
||||
});
|
||||
})();
|
||||
},
|
||||
node : function() {
|
||||
return fn.node.call(this);
|
||||
},
|
||||
each : function() {
|
||||
return fn.each.call(this, arguments[0]);
|
||||
},
|
||||
get : function() {
|
||||
return fn.get.call(this, arguments[0]);
|
||||
},
|
||||
find : function() {
|
||||
return fn.find.call(this, arguments[0]);
|
||||
},
|
||||
set : function() {
|
||||
return set.call(fn);
|
||||
},
|
||||
push : function(id, seat) {
|
||||
this.seats.push(seat);
|
||||
this.seatIds.push(id);
|
||||
++this.length;
|
||||
}
|
||||
};
|
||||
},
|
||||
//get one object or a set of objects
|
||||
get : function(seatsIds) {
|
||||
var fn = this;
|
||||
|
||||
return typeof seatsIds == 'string' ?
|
||||
fn.seats[seatsIds] : (function() {
|
||||
|
||||
var seatSet = fn.set();
|
||||
|
||||
$.each(seatsIds, function(index, seatId) {
|
||||
if (typeof fn.seats[seatId] === 'object') {
|
||||
seatSet.push(seatId, fn.seats[seatId]);
|
||||
}
|
||||
});
|
||||
|
||||
return seatSet;
|
||||
})();
|
||||
}
|
||||
});
|
||||
|
||||
return fn.data('seatCharts');
|
||||
}
|
||||
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,160 +0,0 @@
|
|||
body {
|
||||
background-color: #f8fafc;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-weight: 600;
|
||||
font-style: #b71a4c;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #b71a4c;
|
||||
}
|
||||
|
||||
.front-indicator {
|
||||
width: 90%;
|
||||
margin: 5px 32px 5px 32px;
|
||||
background-color: #ececec;
|
||||
color: #a1a1a1;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.seat-stat-wrapper {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#legend {
|
||||
width: 49%;
|
||||
margin: 0 auto;
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.booking-details {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
width: 49%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
#legend {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.booking-details {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.booking-details h2 {
|
||||
margin: 25px 0 20px 0;
|
||||
font-size: 40px;
|
||||
color: #333333;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.booking-details h3 {
|
||||
margin: 5px 5px 0 0;
|
||||
font-size: 22px;
|
||||
color: #333333;
|
||||
font-display: bold;
|
||||
}
|
||||
|
||||
div.seatCharts-cell {
|
||||
color: #182C4E;
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
div.seatCharts-seat {
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.seatCharts-row {
|
||||
height: 100px;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
/*align-items: center;*/
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.available {
|
||||
background-color: #649a24;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.available.student-class {
|
||||
background-color: #a8b9bd;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.focused {
|
||||
background-color: #1F5684;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.selected {
|
||||
background-color: #1b4d76;
|
||||
}
|
||||
|
||||
div.seatCharts-seat.unavailable {
|
||||
background-color: #6F7881;
|
||||
}
|
||||
|
||||
div.seatCharts-container {
|
||||
width: 80%;
|
||||
padding: 20px 0;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.seatCharts-legend {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.seatCharts-legend li {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
ul.seatCharts-legendList {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
span.seatCharts-legendDescription {
|
||||
margin-left: 5px;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.checkout-button {
|
||||
margin: 10px 0;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background-color: #3490dc;
|
||||
border-color: #3490dc;
|
||||
border-radius: 3px;
|
||||
border: 0;
|
||||
padding: 15px 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.checkout-button:hover {
|
||||
box-shadow: 0 0 rgb(103, 88, 184);
|
||||
background-color: #227dc7;
|
||||
border-color: #2176bd;
|
||||
}
|
||||
|
||||
#selected-seats {
|
||||
list-style-type: none;
|
||||
font-size: 14px;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
var firstSeatLabel = 1;
|
||||
|
||||
$(document).ready(function() {
|
||||
var $cart = $('#selected-seats'),
|
||||
$counter = $('#counter'),
|
||||
$total = $('#total'),
|
||||
sc = $('#seat-map').seatCharts({
|
||||
map: [
|
||||
'cccccc',
|
||||
'_',
|
||||
'cccccc',
|
||||
'cccccc',
|
||||
],
|
||||
seats: {
|
||||
h: {
|
||||
price : 2500,
|
||||
classes : 'student-class',
|
||||
category: 'Student Seat'
|
||||
},
|
||||
},
|
||||
naming : {
|
||||
rows: ['1','','2','3'],
|
||||
top : 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']
|
||||
]
|
||||
},
|
||||
click: function () {
|
||||
if (this.status() == 'available' && recalculateTotal(sc) < 1) {
|
||||
//let's create a new <li> which we'll add to the cart items
|
||||
$('<li> rząd '+ this.settings.row + ', miejsce '+this.settings.label+ ' <a href="#" class="cancel-cart-item">[cancel]</a></li>')
|
||||
.attr('id', 'cart-item-'+this.settings.id)
|
||||
.data('seatId', this.settings.id)
|
||||
.appendTo($cart);
|
||||
|
||||
/*
|
||||
* 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();
|
||||
|
||||
//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
|
||||
$('#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();
|
||||
});
|
||||
|
||||
//let's pretend some seats have already been booked
|
||||
//sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');
|
||||
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
body {
|
||||
font-family: monospace, sans-serif;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
margin: 0 auto;
|
||||
width: 1000px;
|
||||
|
||||
}
|
||||
|
||||
.wrapper ul {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.maintext {
|
||||
text-align: center;
|
||||
font-size: 44px;
|
||||
padding-bottom: 20px;
|
||||
padding-top: 70px;
|
||||
border-bottom: 2px outset rgb(131, 145, 145);
|
||||
text-shadow: 1px 1px 4px rgb(122, 122, 122);
|
||||
}
|
||||
|
||||
.tomainpage-button {
|
||||
font-size: 18px;
|
||||
background-color: #5d7cd3;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
width: 270px;
|
||||
padding: 25px 60px;
|
||||
text-align: center;
|
||||
box-shadow:0px 4px 0px #1e3572;
|
||||
font-family: monospace;
|
||||
margin: 40px auto;
|
||||
width: 20%;
|
||||
left: 40%;
|
||||
bottom: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.14.0.css">
|
||||
<link rel="stylesheet" href="jquery.seat-charts.css">
|
||||
<script src="https://code.jquery.com/qunit/qunit-1.14.0.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
|
||||
<script type="text/javascript" src="jquery.seat-charts.min.js"></script>
|
||||
<script type="text/javascript" src="wyborsali.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="statystyki.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<h1 class="maintext">Statystyki</h1>
|
||||
|
||||
<ul>Obecności:</ul>
|
||||
<li>...</li>
|
||||
<li>...</li>
|
||||
|
||||
<button class="tomainpage-button" onclick="goToStronaGlowna()">Strona główna »</button>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function goToStronaGlowna() {
|
||||
window.location = "wyborsali.html";
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,219 +0,0 @@
|
|||
body {
|
||||
background-color: #f8fafc;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.logged-wrapper {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-top: 0;
|
||||
margin-right: 5px;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.logged-wrapper h3 {
|
||||
font-size: 18px;
|
||||
padding: 15px 10px 0 65px;
|
||||
margin-top: 0;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
.logged-wrapper h2 {
|
||||
font-size: 22px;
|
||||
padding: 15px 10px 0 65px;
|
||||
margin-top: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logged-wrapper img {
|
||||
/* padding: 0 10px 0 0; */
|
||||
border-radius: 30px;
|
||||
width: 90px;
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 0;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.seat-stat-wrapper h1{
|
||||
text-align: center;
|
||||
font-size: 56px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px outset rgba(133, 133, 133, 0.4);
|
||||
text-transform: uppercase;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-weight: 500;
|
||||
text-shadow: 0 0 6px rgba(133, 133, 133, 0.4);
|
||||
color: #636b6f;
|
||||
}
|
||||
|
||||
#choosepanel {
|
||||
padding: 0px 50px;
|
||||
}
|
||||
|
||||
#choosepanel h2, .room-view h2 {
|
||||
font-size: 23px;
|
||||
text-shadow: 0 0 6px rgba(133, 133, 133, 0.4);
|
||||
}
|
||||
|
||||
#choosepanel select {
|
||||
font-size: 18px;
|
||||
width: 150px;
|
||||
text-shadow: 0 0 6px rgba(133, 133, 133, 0.4);
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
color: #444;
|
||||
line-height: 1.3;
|
||||
padding: .6em 1.4em .5em .8em;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: 1px solid #aaa;
|
||||
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
|
||||
border-radius: .5em;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: #fff;
|
||||
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
|
||||
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-position: right .7em top 50%, 0 0;
|
||||
background-size: .65em auto, 100%;
|
||||
}
|
||||
|
||||
.choosepanel::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
.choosepanel:hover {
|
||||
border-color: #888;
|
||||
}
|
||||
.choosepanel:focus {
|
||||
border-color: #aaa;
|
||||
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
|
||||
box-shadow: 0 0 0 3px -moz-mac-focusring;
|
||||
color: #222;
|
||||
outline: none;
|
||||
}
|
||||
.choosepanel option {
|
||||
font-weight:normal;
|
||||
}
|
||||
.room-view {
|
||||
float: right;
|
||||
width: 70%;
|
||||
margin-top: -260px;
|
||||
|
||||
}
|
||||
|
||||
.room-view h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.checkout-button {
|
||||
margin: 40px 0 0 0;
|
||||
font-size: 18px;
|
||||
background-color: #5d7cd3;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
width: 250px;
|
||||
padding: 25px 60px;
|
||||
text-align: center;
|
||||
box-shadow:0px 4px 0px #1e3572;
|
||||
font-family: monospace;
|
||||
position:relative;
|
||||
left:37%;
|
||||
}
|
||||
|
||||
.checkout-button:hover {
|
||||
box-shadow: 0 0 rgb(103, 88, 184);
|
||||
background-color: #3654c9;
|
||||
}
|
||||
|
||||
.checkout-button:active {
|
||||
top: 4px;
|
||||
box-shadow: 0 0 #b85a5b;
|
||||
background-color: #3654ff;
|
||||
}
|
||||
|
||||
div.seatCharts-cell {
|
||||
color: #182C4E;
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
line-height: 90px;
|
||||
|
||||
}
|
||||
div.seatCharts-seat {
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
div.seatCharts-row {
|
||||
height: 100px;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
/*align-items: center;*/
|
||||
justify-content: center;
|
||||
}
|
||||
div.seatCharts-seat.available {
|
||||
background-color: #a8b9bd;
|
||||
|
||||
}
|
||||
div.seatCharts-seat.available.student-class {
|
||||
background-color: #a8b9bd;
|
||||
}
|
||||
div.seatCharts-seat.focused {
|
||||
background-color: #758184;
|
||||
}
|
||||
div.seatCharts-seat.selected {
|
||||
background-color: rgb(216, 196, 230);
|
||||
}
|
||||
div.seatCharts-seat.unavailable {
|
||||
background-color: #caaa41;
|
||||
}
|
||||
|
||||
div.seatCharts-container {
|
||||
width: 80%;
|
||||
padding: 20px 0;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.seat-stat-wrapper {
|
||||
padding: 80px 150px;
|
||||
|
||||
}
|
||||
|
||||
.seat-chart-wrapper, div.seatCharts-space {
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.seat-chart-wrapper {
|
||||
padding: 60px 0;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.select{
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
#stats{
|
||||
font-size: 18px;
|
||||
width: 180px;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: rgb(51, 50, 50);
|
||||
line-height: 1.3;
|
||||
padding: .6em 1.4em .5em .8em;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: 1px solid #aaa;
|
||||
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
|
||||
border-radius: .5em;
|
||||
background-image: linear-gradient(rgb(252, 252, 252), rgb(214, 214, 214));
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.14.0.css">
|
||||
<link rel="stylesheet" href="jquery.seat-charts.css">
|
||||
<script src="https://code.jquery.com/qunit/qunit-1.14.0.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
|
||||
<script type="text/javascript" src="jquery.seat-charts.min.js"></script>
|
||||
<script type="text/javascript" src="wyborsali.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="wyborsali.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="logged-wrapper">
|
||||
<h3>zalogowany jako</h3>
|
||||
<h2>Anna Kowalska</h2>
|
||||
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTA969k2Zcb1p7a0RBc210P1CoxXnoDKCf3NZLerThvBcFrbfih&s">
|
||||
</div>
|
||||
|
||||
<div class='seat-stat-wrapper'>
|
||||
<h1>Wybór sali</h1>
|
||||
<div id="choosepanel">
|
||||
<h2>Wybierz salę:</h2>
|
||||
<div class="select">
|
||||
<select name="search_rooms" id="search_rooms" >
|
||||
<option value="1" selected="selected">A-16</option>
|
||||
<option value="1" selected="selected">A-17</option>
|
||||
<option value="1" selected="selected">A-18</option>
|
||||
</select>
|
||||
</div>
|
||||
<h2>Statystyki:</h2>
|
||||
<button id="stats" onclick="goToStatsPage()">Przejdź do strony ze statystykami</button>
|
||||
</div>
|
||||
|
||||
<div class="room-view">
|
||||
<h2>Podgląd sali</h2>
|
||||
<div class="seat-chart-wrapper">
|
||||
<div id="seat-map">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<button class="checkout-button" onclick="clickFunction()">Dalej »</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function clickFunction() {
|
||||
window.location = "frontpage.html";
|
||||
|
||||
}
|
||||
|
||||
function goToStatsPage() {
|
||||
window.location = "statystyki.html";
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
mapka = {
|
||||
'A-18' : [
|
||||
'cccccccc',
|
||||
'_',
|
||||
'cccccc',
|
||||
'cccccc', ],
|
||||
'A-17' : [
|
||||
'ccccccc',
|
||||
'_',
|
||||
'cccccc',
|
||||
'cccccc',],
|
||||
'A-16' : [
|
||||
'cccccc',
|
||||
'_',
|
||||
'cccccc',
|
||||
'cccccc',]
|
||||
};
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var roomNumber = 'A-17';
|
||||
$("select").change(function () {
|
||||
|
||||
var $str = "";
|
||||
$("select option:selected").each(function () {
|
||||
$str += $(this).text();
|
||||
if ($str == "A-17") {
|
||||
roomNumber = 'A-17';
|
||||
} else if ($str == "A-16") {
|
||||
roomNumber = 'A-16';
|
||||
} else if ($str == "A-18"){
|
||||
roomNumber = 'A-18';
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}).trigger("change");
|
||||
|
||||
$('#seat-map').load('wyborsali.html #seat-map', function() {
|
||||
var sc = $('#seat-map').seatCharts({
|
||||
map: mapka[roomNumber],
|
||||
naming : {
|
||||
rows: ['1','','2','3'],
|
||||
top : false,
|
||||
getLabel : function (character, row, column) {
|
||||
if (row == '1') {
|
||||
return column;
|
||||
} else if (row == '2') {
|
||||
return column;
|
||||
} else if (row == '3') {
|
||||
return column;
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue