From 1a1d79a5f433223eb1fd8d79ff5def33ed6d3a0d Mon Sep 17 00:00:00 2001 From: s416422 Date: Fri, 20 Dec 2019 01:11:51 +0100 Subject: [PATCH] code cleaned --- public/css/app.css | 117 +- public/css/map/jquery.seat-charts.css | 285 +++- public/css/map/koncowastrona.css | 93 -- public/css/map/przylozlegitke.css | 148 -- public/css/map/seatchart-preview.css | 101 +- public/css/map/seatchart.css | 154 --- public/js/custom.js | 2 +- public/js/map/jquery.seat-charts.js | 1198 +++++++++-------- public/js/map/jquery.seat-charts.min.js | 9 - public/js/map/seatchart-custom.js | 1 + public/js/map/seatchart-preview.js | 2 +- public/js/map/seatchart.js | 9 +- .../views/auth/passwords/confirm.blade.php | 12 +- .../views/auth/passwords/email.blade.php | 6 +- .../views/auth/passwords/reset.blade.php | 12 +- resources/views/home.blade.php | 88 +- resources/views/layouts/app.blade.php | 28 +- resources/views/layouts/map.blade.php | 89 -- resources/views/map/seat_map.blade.php | 122 +- resources/views/map/start_map.blade.php | 77 +- resources/views/map/summary_map.blade.php | 26 +- .../views/user/attendance_note.blade.php | 2 +- .../views/user/user_preview_classes.blade.php | 18 +- 23 files changed, 1158 insertions(+), 1441 deletions(-) delete mode 100644 public/css/map/koncowastrona.css delete mode 100644 public/css/map/przylozlegitke.css delete mode 100644 public/css/map/seatchart.css delete mode 100644 public/js/map/jquery.seat-charts.min.js delete mode 100644 resources/views/layouts/map.blade.php diff --git a/public/css/app.css b/public/css/app.css index 20ea729..7659e9e 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -1,4 +1,5 @@ -@import url(https://fonts.googleapis.com/css?family=Nunito);@charset "UTF-8"; +@import url(https://fonts.googleapis.com/css?family=Nunito); +@charset "UTF-8"; /*! * Bootstrap v4.3.1 (https://getbootstrap.com/) @@ -11100,19 +11101,10 @@ a.text-dark:focus { } } -.full-height { - height: 100%; -} - -.flex-center { - align-items: center; - display: flex; - justify-content: center; -} - .position-ref { position: relative; } + .title { font-size: 84px; } @@ -11127,89 +11119,82 @@ a.text-dark:focus { text-transform: uppercase; } -.m-b-md { - margin-bottom: 30px; -} .content { text-align: center; color: #636b6f; } + #app { display: flex; flex-direction: column; } -.container, .py-4 { - height: 100%; -} -/*.btn-custom {*/ - /*border: none;*/ - /*border-bottom: 1px solid lightgrey;*/ - /*background-color: white;*/ - /*color: #1e3572;*/ -/*}*/ + .custom-header { display: flex; justify-content: space-between; + background-color: #ececec; } + .add-subject, .add-attendance { display: none; } + .add-subject.open, .add-attendance.open { display: block; } -.card-body { - margin-top: 30px; -} -.classes-form { - margin-bottom: 50px; -} -.map-buttons { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; -} -.subjects-table { - margin-bottom: 50px; -} -.seat-wrapper { - display: flex; - flex-direction: column; -} -.main-seat-text { - font-size: 50px; -} -.navbar-nav.ml-auto { - justify-content: flex-end; - width: 100%; -} -.no-margin-top { - margin-top: 0; -} -.nav-link { - margin-left: 30px; - transition: transform 0.3s; -} -.nav-link:hover { - transform: scale(1.1); -} -.btn-export { - background-color: #649a24; -} -.card-header { - background-color: #ececec; -} + .card-custom { display: flex; justify-content: flex-start; align-items: center; } + +.card-body { + margin-top: 30px; +} + +.classes-form { + margin-bottom: 50px; +} + +.subjects-table { + margin-bottom: 50px; +} + +.navbar-nav.ml-auto { + justify-content: flex-end; + width: 100%; +} + +.no-margin-top { + margin-top: 0; +} + +.nav-link { + margin-left: 30px; + transition: transform 0.3s; +} + +.nav-link:hover { + transform: scale(1.1); +} + +.btn-export { + background-color: #649a24; +} + .sort-span { margin-right: 20px; } + .form-custom { width: auto; } -.carousel-control-prev, .carousel-control-next { + +.carousel-control-prev, .carousel-control-next, .sr-only { filter: invert(100%); } + +main { + padding-top: 20px; +} diff --git a/public/css/map/jquery.seat-charts.css b/public/css/map/jquery.seat-charts.css index 65093ac..6267de7 100644 --- a/public/css/map/jquery.seat-charts.css +++ b/public/css/map/jquery.seat-charts.css @@ -1,41 +1,49 @@ -div.seatCharts-container { - min-width: 700px; +a { + color: #b71a4c; } -div.seatCharts-cell { - height: 16px; - width: 16px; +div.seatCharts-container { + text-align: center; + width: fit-content; + padding: 30px; + margin: auto; +} + +div.seatCharts-cell { margin: 3px; float: left; text-align: center; outline: none; font-size: 13px; - line-height:16px; - color: blue; - + color: #182C4E; + height: 90px; + width: 90px; + line-height: 90px; } + div.seatCharts-seat { background-color: green; - color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; - cursor: default; + color: #FFFFFF; + cursor: pointer; } + div.seatCharts-seat:focus { border: none; } -.seatCharts-seat:focus { - outline: none; -} - - div.seatCharts-space { background-color: white; } + div.seatCharts-row { - height: 50px; + height: 100px; + display: flex; + justify-content: flex-start; + margin: 0 auto; + width: auto; } div.seatCharts-row:after { @@ -43,33 +51,270 @@ div.seatCharts-row:after { } div.seatCharts-seat.selected { - background-color: aqua; + background-color: #1b4d76; } div.seatCharts-seat.focused { - background-color: #6db131; + background-color: #1F5684; } div.seatCharts-seat.available { - background-color: green; + background-color: #649a24; +} + +div.seatCharts-seat.available.student-class { + background-color: #a8b9bd; } div.seatCharts-seat.unavailable { - background-color: red; cursor: not-allowed; + background-color: #6F7881; } ul.seatCharts-legendList { list-style: none; cursor: default; + padding-left: 0; } + li.seatCharts-legendItem { margin-top: 10px; line-height: 2; } + li.seatCharts-legendItem div { cursor: default; } + li.seatCharts-legendItem > .seatCharts-cell { cursor: default; } + +div.seatCharts-legend { + display: inline-block; +} + +div.seatCharts-legend li { + text-align: left; +} + +span.seatCharts-legendDescription { + margin-left: 5px; + line-height: 100px; +} + +.front-indicator { + margin: 0; + background-color: #ececec; + color: #a1a1a1; + text-align: center; + padding: 15px; + border-radius: 5px; + display: flex; + justify-content: flex-start; + align-items: center; +} + +#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; +} + +.booking-details h2 { + margin: 25px 0 20px 0; + font-size: 22px; + color: #333333; + letter-spacing: 0.15em; + font-weight: bold; +} +.booking-details h3 { + margin: 5px 5px 0 0; + font-size: 40px; + color: #333333; + font-weight: bold; +} + +.map-buttons { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; +} + +.checkout-button { + margin: 10px 0; + font-size: 14px; + color: #fff; + background-color: #3490dc; + border-radius: 3px; + border: 0; + padding: 15px 40px; + display: inline-block; + text-align: center; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1); +} + +.checkout-button:hover { + box-shadow: 0 0 rgb(103, 88, 184); + background-color: #227dc7; + border-color: #2176bd; +} + +a.checkout-button { + color: #fff; + text-decoration: none; +} + +#selected-seats { + list-style-type: none; + margin-left: 0; + padding-left: 0; +} + +.seat-p { + font-weight: bold; + font-size: 20px; + margin-left: 15%; +} + +.wrapper { + margin: 0 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0; +} + +.wrapper h2 { + font-size: 40px; + padding: 0; +} + +.wrapper h3 { + font-size: 30px; + font-weight: 400; + text-shadow: 1px 0px 0px rgb(160, 160, 160); +} + +.seat-stat-wrapper, .seat-chart-wrapper { + width: 100%; +} + +.card-reader { + text-align: center; + color: #3490dc; + border-color: #3490dc; + padding: 50px 100px; + font-size: 30px; + display: none; + width: 70%; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1); +} + +.card-reader.open { + display: block; +} + +.code-p { + text-align: center; + font-size: 20px; + margin-bottom: 100px; +} + +.card-reader-form { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.card-reader-form div { + width: 100%; + display: flex; + justify-content: space-between; +} + +.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: 50px; +} + +#sel-seat { + font-size: 24px; + text-shadow: 0px 0px 1px rgb(160, 160, 160); + margin-top: -15px; + margin-bottom: 100px; + padding: 0; + font-weight: 600; + letter-spacing: 0.2em; +} + + +@media (max-width: 1300px) { + .wrapper { + height: 50%; + } + + .main-text { + font-size: 9vh; + } +} + +@media (max-width: 870px) { + .wrapper { + height: 35%; + } + + .main-text { + font-size: 3.5em; + line-height: 10vh; + width: 100%; + } + + .card-reader { + 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; + } +} + +@media screen and (max-width: 550px) { + #legend { + width: 100%; + } + + .booking-details { + width: 100%; + text-align: left; + } +} + diff --git a/public/css/map/koncowastrona.css b/public/css/map/koncowastrona.css deleted file mode 100644 index a20272b..0000000 --- a/public/css/map/koncowastrona.css +++ /dev/null @@ -1,93 +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: 100px; - padding: 0; - font-weight: 600; - letter-spacing: 0.2em; -} - -button { - margin: auto 0; - font-size: 18px; - 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; - position: absolute; - left: 50%; - bottom: 30%; - transform: translate(-50%, -10%); -} - -button:hover { - color: #fff; - background-color: #227dc7; - border-color: #2176bd; -} - -button:active { - box-shadow: 0 0 #b85a5b; - background-color: #3654ff; -} -.checkout-button { - margin: 10px 0; - font-size: 14px; - background-color: #5d7cd3; - border-radius: 3px; - border: 0; - padding: 15px 40px; - display: inline-block; - text-align: center; - box-shadow:0px 4px 0px #1e3572; -} - -.checkout-button:hover { - box-shadow: 0 0 rgb(103, 88, 184); - background-color: #3654c9; - cursor: pointer; -} - -.checkout-button:active { - box-shadow: 0 0 #b85a5b; - background-color: #3654ff; -} -a.checkout-button { - color: #fff; - text-decoration: none; -} -.add-mn-btn { - display: none; -} - diff --git a/public/css/map/przylozlegitke.css b/public/css/map/przylozlegitke.css deleted file mode 100644 index 26f9e97..0000000 --- a/public/css/map/przylozlegitke.css +++ /dev/null @@ -1,148 +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 { - text-align: center; - position: absolute; - left: 50%; - bottom: -30%; - transform: translate(-50%, -10%); - box-shadow: 0 0 rgb(103, 88, 184); - color: #fff; - background-color: #3490dc; - border-color: #3490dc; - padding: 50px 100px; - font-size: 30px; - display: none; - width: 70%; -} -.czytnik:hover { - color: #fff; - background-color: #227dc7; - border-color: #2176bd; -} - -.czytnik.open { - display: block; -} -.code-p { - text-align: center; - font-size: 20px; - margin-bottom: 100px; -} -.test-form { - display: flex; - flex-direction: column; - align-items: flex-start; -} -.test-form div { - width: 100%; - display: flex; - justify-content: space-between; -} -.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; - } -} - - @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; - } - } -.checkout-button { - margin: 10px 0; - font-size: 14px; - background-color: #5d7cd3; - border-radius: 3px; - border: 0; - padding: 15px 40px; - display: inline-block; - text-align: center; - box-shadow:0px 4px 0px #1e3572; - color: #fff; -} - -.checkout-button:hover { - box-shadow: 0 0 rgb(103, 88, 184); - background-color: #3654c9; - cursor: pointer; -} - -.checkout-button:active { - top: 4px; - box-shadow: 0 0 #b85a5b; - background-color: #3654ff; -} -a.checkout-button { - color: #fff; - text-decoration: none; -} -.map-buttons { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; -} - -.seat-wrapper { - display: flex; - flex-direction: column; -} -.main-seat-text { - font-size: 70px; - text-align: center; -} diff --git a/public/css/map/seatchart-preview.css b/public/css/map/seatchart-preview.css index 0389dce..525b597 100644 --- a/public/css/map/seatchart-preview.css +++ b/public/css/map/seatchart-preview.css @@ -1,101 +1,72 @@ -body { - background-color: #f8fafc; - font-family: 'Nunito', sans-serif; - font-weight: 600; -} -.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; -} -.add-mn-btn, .end-button { - display: none; -} -#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-family: sans-serif; -} - -.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); } + .preview-page-content { display: flex; - justify-content: center; - align-items: flex-start; + justify-content: space-between; + align-items: center; height: 100%; - padding: auto; - padding-top: 50px; + margin: 40px; } + .preview-attendance-table { - width: 40%; + width: 35%; } + .seat-chart-wrapper { width: 60%; } -.preview-attendance-table, .seat-chart-wrapper { - margin: 0 30px; -} + div.seatCharts-space { background-color: unset; } + div.seatCharts-row { - height: 130px; + height: 150px; justify-content: flex-start; margin: 0 auto; width: auto; } + div.seatCharts-cell { - width: 120px; - height: 120px; - line-height: 37px; -} -.preview-name { - color: rgba(0,0,0,0.7); -} -.front-indicator-preview { + width: 140px; + height: 140px; + font-size: 16px; display: flex; + flex-direction: column; align-items: center; justify-content: center; + line-height: initial; } -.preview-box { - display: flex; - align-items: center; + +div.seatCharts-seat.available { + background-color: rgba(111,120,129, 0.7); } + +div.seatCharts-seat.taken { + background-color: #649a24; +} + +.preview-name { + color: rgba(0,0,0,0.7); + word-wrap: break-word; + width: 90%; + font-weight: bold; +} + .checkout-button-preview { + display: flex; justify-content: flex-start; width: 40%; - padding-left: 35px; } -.seat-p-ppreview { + +.seat-p-preview { justify-content: center; width: 60%; padding: 0 auto; } -div.seatCharts-seat.available { - background-color: rgba(111,120,129, 0.7); -} -div.seatCharts-seat.taken { - background-color: #649a24; -} + .front-indicator { - width: 100%; - margin: 5px 0; + margin: 0 40px; } diff --git a/public/css/map/seatchart.css b/public/css/map/seatchart.css deleted file mode 100644 index 333daad..0000000 --- a/public/css/map/seatchart.css +++ /dev/null @@ -1,154 +0,0 @@ -body { - background-color: #f8fafc; - font-family: 'Nunito', sans-serif; - font-weight: 600; -} -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: 22px; - color: #333333; - letter-spacing: 0.15em; - font-weight: bold; -} -.booking-details h3 { - margin: 5px 5px 0 0; - font-size: 40px; - color: #333333; - font-weight: 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; - display: flex; - justify-content: flex-start; - margin: 0 auto; - width: auto; -} -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 { - text-align: center; - width: fit-content; - padding: 30px; - margin: auto; - -} -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; -} -a.checkout-button { - color: #fff; - text-decoration: none; -} - -#selected-seats { - list-style-type: none; - margin-left: 0; - padding-left: 0; -} -.add-mn-btn { - display: none; -} -.seat-p { - font-weight: bold; - margin-bottom: 0; - font-size: 20px; -} diff --git a/public/js/custom.js b/public/js/custom.js index d636f41..705828e 100644 --- a/public/js/custom.js +++ b/public/js/custom.js @@ -1,6 +1,6 @@ $(document).ready(function(){ $('.add-mn-btn').on('click', function () { - $('.czytnik').toggleClass('open'); + $('.card-reader').toggleClass('open'); }); diff --git a/public/js/map/jquery.seat-charts.js b/public/js/map/jquery.seat-charts.js index bb042ba..868dcd5 100644 --- a/public/js/map/jquery.seat-charts.js +++ b/public/js/map/jquery.seat-charts.js @@ -5,623 +5,625 @@ * Copyright 2013, 2016 Mateusz Markowski * Released under the MIT license */ +$(document).ready(function() { -(function($) { - - //'use strict'; - - $.fn.seatCharts = function (setup) { + (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: false, + left: false, + getId: function (character, row, column) { + return row + '_' + column; + }, + getLabel: function (character, row, column) { + return column; + } - //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 : false, - left : false, - getId : function(character, row, column) { - return row + '_' + column; }, - getLabel : function (character, row, column) { - return column; - } - - }, - legend : { - node : null, - items : [] - }, - click : function() { + 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 'selected'; + } else if (this.status() == 'selected') { + return 'available'; + } else { + return this.style(); + } - 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); + }, + focus: function () { - fn.settings.$node = $('
'); - - 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 + 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 = $('
'); + + 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() { + //basically a wrapper function + fn.data = function () { + return fn.settings.data; + }; - return arguments.length == 1 ? - (function(newStyle) { - var oldStyle = fn.settings.style; + fn.char = function () { + return fn.settings.character; + }; - //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'); + fn.node = function () { + return fn.settings.$node; + }; - //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(); + /* + * 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; } - 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; + + //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(); } - - //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))); + 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; } - })($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())); + //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 = $('
') - .addClass('seatCharts-row seatCharts-header'); - - if (settings.naming.left) { - $headerRow.append($('
').addClass('seatCharts-cell')); - } - - - $.each(settings.naming.columns, function(index, value) { - $headerRow.append( - $('
') - .addClass('seatCharts-cell') - .text(value) - ); - }); - } - - fn.append($headerRow); - - //do this for each map row - $.each(settings.map, function(row, characters) { - - var $row = $('
').addClass('seatCharts-row'); - - if (settings.naming.left) { - $row.append( - $('
') - .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 (_) - $('
').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 || $('
').insertAfter(fn)) - .addClass('seatCharts-legend'); - - var $ul = $('') - .addClass('seatCharts-legendList') - .appendTo($container); - - $.each(legend.items, function(index, item) { - $ul.append( - $('
  • ') - .addClass('seatCharts-legendItem') - .append( - $('
    ') - //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( - $('') - .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(',#')); - }, + })(fn, settings); - 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); + 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 = $('
    ') + .addClass('seatCharts-row seatCharts-header'); + + if (settings.naming.left) { + $headerRow.append($('
    ').addClass('seatCharts-cell')); + } + + + $.each(settings.naming.columns, function (index, value) { + $headerRow.append( + $('
    ') + .addClass('seatCharts-cell') + .text(value) + ); + }); + } + + fn.append($headerRow); + + //do this for each map row + $.each(settings.map, function (row, characters) { + + var $row = $('
    ').addClass('seatCharts-row'); + + if (settings.naming.left) { + $row.append( + $('
    ') + .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 (_) + $('
    ').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 || $('
    ').insertAfter(fn)) + .addClass('seatCharts-legend'); + + var $ul = $('') + .addClass('seatCharts-legendList') + .appendTo($container); + + $.each(legend.items, function (index, item) { + $ul.append( + $('
  • ') + .addClass('seatCharts-legendItem') + .append( + $('
    ') + //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( + $('') + .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); }); })(); - }, - 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; + })(arguments[0], arguments[1]); + }, + each: function (callback) { + 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); + 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); +}); diff --git a/public/js/map/jquery.seat-charts.min.js b/public/js/map/jquery.seat-charts.min.js deleted file mode 100644 index bbd5fb1..0000000 --- a/public/js/map/jquery.seat-charts.min.js +++ /dev/null @@ -1,9 +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(t){t.fn.seatCharts=function(s){if(this.data("seatCharts"))return this.data("seatCharts");var e=this,a={},n=[],i={animate:!1,naming:{top:!0,left:!0,getId:function(t,s,e){return s+"_"+e},getLabel:function(t,s,e){return e}},legend:{node:null,items:[]},click:function(){return"available"==this.status()?"selected":"selected"==this.status()?"available":this.style()},focus:function(){return"available"==this.status()?"focused":this.style()},blur:function(){return this.status()},seats:{}},r=function(s,e){return function(n){var i=this;i.settings=t.extend({status:"available",style:"available",data:e.seats[n.character]||{}},n),i.settings.$node=t("
    "),i.settings.$node.attr({id:i.settings.id,role:"checkbox","aria-checked":!1,focusable:!0,tabIndex:-1}).text(i.settings.label).addClass(["seatCharts-seat","seatCharts-cell","available"].concat(i.settings.classes,"undefined"==typeof e.seats[i.settings.character]?[]:e.seats[i.settings.character].classes).join(" ")),i.data=function(){return i.settings.data},i["char"]=function(){return i.settings.character},i.node=function(){return i.settings.$node},i.style=function(){return 1==arguments.length?function(t){var s=i.settings.style;return t==s?s:(i.settings.status="focused"!=t?t:i.settings.status,i.settings.$node.attr("aria-checked","selected"==t),e.animate?i.settings.$node.switchClass(s,t,200):i.settings.$node.removeClass(s).addClass(t),i.settings.style=t)}(arguments[0]):i.settings.style},i.status=function(){return i.settings.status=1==arguments.length?i.style(arguments[0]):i.settings.status},function(n,r,c){t.each(["click","focus","blur"],function(t,u){i[u]=function(){return"focus"==u&&(void 0!==s.attr("aria-activedescendant")&&a[s.attr("aria-activedescendant")].blur(),s.attr("aria-activedescendant",c.settings.id),c.node().focus()),i.style("function"==typeof n[r][u]?n[r][u].apply(c):e[u].apply(c))}})}(e.seats,i.settings.character,i),i.node().on("click",i.click).on("mouseenter",i.focus).on("mouseleave",i.blur).on("keydown",function(t,e){return function(n){var i;switch(n.which){case 32:n.preventDefault(),t.click();break;case 40:case 38:if(n.preventDefault(),i=function r(t,s,a){var c;return c=t.index(a)||38!=n.which?t.index(a)==t.length-1&&40==n.which?t.first():t.eq(t.index(a)+(38==n.which?-1:1)):t.last(),i=c.find(".seatCharts-seat,.seatCharts-space").eq(s.index(e)),i.hasClass("seatCharts-space")?r(t,s,c):i}(e.parents(".seatCharts-container").find(".seatCharts-row:not(.seatCharts-header)"),e.parents(".seatCharts-row:first").find(".seatCharts-seat,.seatCharts-space"),e.parents(".seatCharts-row:not(.seatCharts-header)")),!i.length)return;t.blur(),a[i.attr("id")].focus(),i.focus(),s.attr("aria-activedescendant",i.attr("id"));break;case 37:case 39:if(n.preventDefault(),i=function(t){return t.index(e)||37!=n.which?t.index(e)==t.length-1&&39==n.which?t.first():t.eq(t.index(e)+(37==n.which?-1:1)):t.last()}(e.parents(".seatCharts-container:first").find(".seatCharts-seat:not(.seatCharts-space)")),!i.length)return;t.blur(),a[i.attr("id")].focus(),i.focus(),s.attr("aria-activedescendant",i.attr("id"))}}}(i,i.node()))}}(e,i);if(e.addClass("seatCharts-container"),t.extend(!0,i,s),i.naming.rows=i.naming.rows||function(t){for(var s=[],e=1;t>=e;e++)s.push(e);return s}(i.map.length),i.naming.columns=i.naming.columns||function(t){for(var s=[],e=1;t>=e;e++)s.push(e);return s}(i.map[0].split("").length),i.naming.top){var c=t("
    ").addClass("seatCharts-row seatCharts-header");i.naming.left&&c.append(t("
    ").addClass("seatCharts-cell")),t.each(i.naming.columns,function(s,e){c.append(t("
    ").addClass("seatCharts-cell").text(e))})}return e.append(c),t.each(i.map,function(s,c){var u=t("
    ").addClass("seatCharts-row");i.naming.left&&u.append(t("
    ").addClass("seatCharts-cell seatCharts-space").text(i.naming.rows[s])),t.each(c.match(/[a-z_]{1}(\[[0-9a-z_]{0,}(,[0-9a-z_ ]+)?\])?/gi),function(e,c){var h=c.match(/([a-z_]{1})(\[([0-9a-z_ ,]+)\])?/i),d=h[1],o="undefined"!=typeof h[3]?h[3].split(","):[],l=o.length?o[0]:null,f=2===o.length?o[1]:null;u.append("_"!=d?function(t){i.seats[d]=d in i.seats?i.seats[d]:{};var c=l?l:t.getId(d,t.rows[s],t.columns[e]);return a[c]=new r({id:c,label:f?f:t.getLabel(d,t.rows[s],t.columns[e]),row:s,column:e,character:d}),n.push(c),a[c].node()}(i.naming):t("
    ").addClass("seatCharts-cell seatCharts-space"))}),e.append(u)}),i.legend.items.length?function(s){var a=(s.node||t("
    ").insertAfter(e)).addClass("seatCharts-legend"),n=t("").addClass("seatCharts-legendList").appendTo(a);return t.each(s.items,function(s,e){n.append(t("
  • ").addClass("seatCharts-legendItem").append(t("
    ").addClass(["seatCharts-seat","seatCharts-cell",e[1]].concat(i.classes,"undefined"==typeof i.seats[e[0]]?[]:i.seats[e[0]].classes).join(" "))).append(t("").addClass("seatCharts-legendDescription").text(e[2])))}),a}(i.legend):null,e.attr({tabIndex:0}),e.focus(function(){e.attr("aria-activedescendant")&&a[e.attr("aria-activedescendant")].blur(),e.find(".seatCharts-seat:not(.seatCharts-space):first").focus(),a[n[0]].focus()}),e.data("seatCharts",{seats:a,seatIds:n,status:function(){var s=this;return 1==arguments.length?s.seats[arguments[0]].status():function(e,a){return"string"==typeof e?s.seats[e].status(a):function(){t.each(e,function(t,e){s.seats[e].status(a)})}()}(arguments[0],arguments[1])},each:function(t){var s=this;for(var e in s.seats)if(!1===t.call(s.seats[e],e))return e;return!0},node:function(){var s=this;return t("#"+s.seatIds.join(",#"))},find:function(t){var s=this,e=s.set();return t instanceof RegExp?function(){return s.each(function(s){s.match(t)&&e.push(s,this)}),e}():1==t.length?function(t){return s.each(function(){this["char"]()==t&&e.push(this.settings.id,this)}),e}(t):function(){return t.indexOf(".")>-1?function(){var a=t.split(".");return s.each(function(t){this["char"]()==a[0]&&this.status()==a[1]&&e.push(this.settings.id,this)}),e}():function(){return s.each(function(){this.status()==t&&e.push(this.settings.id,this)}),e}()}()},set:function u(){var s=this;return{seats:[],seatIds:[],length:0,status:function(){var s=arguments,e=this;return 1==this.length&&0==s.length?this.seats[0].status():function(){t.each(e.seats,function(){this.status.apply(this,s)})}()},node:function(){return s.node.call(this)},each:function(){return s.each.call(this,arguments[0])},get:function(){return s.get.call(this,arguments[0])},find:function(){return s.find.call(this,arguments[0])},set:function(){return u.call(s)},push:function(t,s){this.seats.push(s),this.seatIds.push(t),++this.length}}},get:function(s){var e=this;return"string"==typeof s?e.seats[s]:function(){var a=e.set();return t.each(s,function(t,s){"object"==typeof e.seats[s]&&a.push(s,e.seats[s])}),a}()}}),e.data("seatCharts")}}(jQuery); \ No newline at end of file diff --git a/public/js/map/seatchart-custom.js b/public/js/map/seatchart-custom.js index 1392f30..876cb5d 100644 --- a/public/js/map/seatchart-custom.js +++ b/public/js/map/seatchart-custom.js @@ -41,6 +41,7 @@ function checkForUnavailablePlaces() { }); } } + $(document).ready(function(){ checkForUnavailablePlaces(); toggleButtonAvailability(); diff --git a/public/js/map/seatchart-preview.js b/public/js/map/seatchart-preview.js index a72a295..43b6a4b 100644 --- a/public/js/map/seatchart-preview.js +++ b/public/js/map/seatchart-preview.js @@ -14,7 +14,7 @@ function assignPlaces() { map_seat = $('#seat-map-second').find(`#${seat_number}`); } } - map_seat.html(`${seat_number}
    ${name} ${surname}`) + map_seat.html(`${seat_number}
    ${name} ${surname}`); map_seat.on('mouseover', () => { map_seat.css('backgroundColor', 'lightgrey'); $(this).css('backgroundColor', 'lightgrey'); diff --git a/public/js/map/seatchart.js b/public/js/map/seatchart.js index 85beb85..65012ef 100644 --- a/public/js/map/seatchart.js +++ b/public/js/map/seatchart.js @@ -3,6 +3,7 @@ $(document).ready(function() { function createMap(seats_rows, seats_container) { let $cart = $('#selected-seats'); let seat_selected = false; + seats_container.seatCharts({ map: seats_rows, naming: { @@ -20,7 +21,7 @@ $(document).ready(function() { click: function () { if (this.status() === 'available' && !seat_selected) { // let's create a new
  • which we'll add to the cart items - $(' ' + this.settings.label + '') + $(' ' + this.settings.label + ' [x]') .attr('id', 'cart-item-' + this.settings.id) .data('seatId', this.settings.id) .appendTo($cart); @@ -39,11 +40,17 @@ $(document).ready(function() { } } }); + + $('#selected-seats').on('click', '.cancel-cart-item', function () { + const id = $(this).parent().data('seatId'); + $('#seat-map').find(`#${id}`).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: { diff --git a/resources/views/auth/passwords/confirm.blade.php b/resources/views/auth/passwords/confirm.blade.php index bc3e5e8..f14dd35 100644 --- a/resources/views/auth/passwords/confirm.blade.php +++ b/resources/views/auth/passwords/confirm.blade.php @@ -1,22 +1,22 @@ @extends('layouts.app') -@section('title') Confirm password @endsection +@section('title') Potwierdź hasło @endsection @section('content')
    -
    {{ __('Confirm Password') }}
    +
    {{ __('Potwierdź hasło) }}
    - {{ __('Please confirm your password before continuing.') }} + {{ __('Zanimi przejdziesz dalej, potwierdź swoje hasło.') }}
    @csrf
    - +
    @@ -32,12 +32,12 @@
    @if (Route::has('password.request')) - {{ __('Forgot Your Password?') }} + {{ __('Zapomniałeś hasła?') }} @endif
    diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php index 8edea1c..692fe2b 100644 --- a/resources/views/auth/passwords/email.blade.php +++ b/resources/views/auth/passwords/email.blade.php @@ -7,7 +7,7 @@
    -
    {{ __('Reset Password') }}
    +
    {{ __('Resetuj hasło') }}
    @if (session('status')) @@ -20,7 +20,7 @@ @csrf
    - +
    @@ -36,7 +36,7 @@
    diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php index bbbd065..cab7c2d 100644 --- a/resources/views/auth/passwords/reset.blade.php +++ b/resources/views/auth/passwords/reset.blade.php @@ -1,13 +1,13 @@ @extends('layouts.app') -@section('title') Reset password @endsection +@section('title') Zesetuj hasło @endsection @section('content')
    -
    {{ __('Reset Password') }}
    +
    {{ __('Zresetuj hasło') }}
    @@ -16,7 +16,7 @@
    - +
    @@ -30,7 +30,7 @@
    - +
    @@ -44,7 +44,7 @@
    - +
    @@ -54,7 +54,7 @@
    diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index df2322c..6a38e80 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -3,55 +3,55 @@ @section('title') Strona Główna @endsection @section('content') - @auth -
    -
    -
    -
    -
    - @if (session('status')) - - @endif - @section('user_content') -

    Garść przydatnych informacji

    -

    W zakładce Moje przedmioty znajdują się przedmioty, których jesteś prowadzącym. -
    Przedmioty możesz grupować i usuwać. Możesz także dodać nowy przedmiot. -

    -

    -

    Sprawdzanie obecności możesz rozpocząć w zakładce Sprawdź obecność. -
    Po rozpoczęciu zapisów zostanie wygenerowany i wyświetlony na ekranie kod weryfikacyjny. - Należy go wprowadzić do programu obsługującego odczyt danych z legitymacji studenckich. - Kod jest ważny 1,5 godziny od momentu utworzenia zajęć. - Dopóki kod jest aktywny, zapisy można przerywać i ponownie kontynuować, gdy zajdzie taka potrzeba. -
    W tej zakładce znajdziesz także listę wszystkich minionych zajęć. -
    W każdym momencie możesz zobaczyć podgląd sali i listę obecności dla konkretnych zajęć. Taką listę możesz wyeksportować do formatu xlsx. -

    -

    - Dane dotyczące obecności znajdziesz także w zakładce Obecności. -
    Do każdej obecności możesz dodać notatkę. -
    Rekordy dotyczące wszystkich obecności możesz grupować i wyeksportować. Przy eksporcie każda tabela-grupa trafi do pliku xlsx jako osobny arkusz. -

    - @endsection - @yield('user_content') + @auth +
    +
    +
    +
    +
    + @if (session('status')) + -
    + @endif + @section('user_content') +

    Garść przydatnych informacji

    +

    W zakładce Moje przedmioty znajdują się przedmioty, których jesteś prowadzącym. +
    Przedmioty możesz grupować i usuwać. Możesz także dodać nowy przedmiot. +

    +

    +

    Sprawdzanie obecności możesz rozpocząć w zakładce Sprawdź obecność. +
    Po rozpoczęciu zapisów zostanie wygenerowany i wyświetlony na ekranie kod weryfikacyjny. + Należy go wprowadzić do programu obsługującego odczyt danych z legitymacji studenckich. + Kod jest ważny 1,5 godziny od momentu utworzenia zajęć. + Dopóki kod jest aktywny, zapisy można przerywać i ponownie kontynuować, gdy zajdzie taka potrzeba. +
    W tej zakładce znajdziesz także listę wszystkich minionych zajęć. +
    W każdym momencie możesz zobaczyć podgląd sali i listę obecności dla konkretnych zajęć. Taką listę możesz wyeksportować do formatu xlsx. +

    +

    + Dane dotyczące obecności znajdziesz także w zakładce Obecności. +
    Do każdej obecności możesz dodać notatkę. +
    Rekordy dotyczące wszystkich obecności możesz grupować i wyeksportować. Przy eksporcie każda tabela-grupa trafi do pliku xlsx jako osobny arkusz. +

    + @endsection + @yield('user_content')
    - @else -
    -
    -
    -
    -
    - @CHECK -
    -

    Witaj!

    -
    +
    +
    + @else +
    +
    +
    +
    +
    + @CHECK
    +

    Witaj!

    - @endauth +
    +
    + @endauth @endsection diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 5bbaa80..85e9bcf 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -3,29 +3,27 @@ - - - - @CHECK | @yield('title') + @CHECK | @yield('title') + - - + - - @yield('main_meta') + @yield('additional_meta') +
    + -
    -
    - @yield('content') -
    +
    + @yield('content')
    +
    diff --git a/resources/views/layouts/map.blade.php b/resources/views/layouts/map.blade.php deleted file mode 100644 index d9ebc07..0000000 --- a/resources/views/layouts/map.blade.php +++ /dev/null @@ -1,89 +0,0 @@ - - - - - - - - - - - - @CHECK | @yield('map_title') - @yield('map_meta') - - - -
    - -
    - -
    -
    - Zakończ zapisy - -
    - @yield('map_content') -
    - - - - - - diff --git a/resources/views/map/seat_map.blade.php b/resources/views/map/seat_map.blade.php index e333712..6d7d100 100644 --- a/resources/views/map/seat_map.blade.php +++ b/resources/views/map/seat_map.blade.php @@ -1,46 +1,47 @@ -@extends('layouts.map') +@extends('layouts.app') @section('title') Wybór miejsca @endsection -@section('map_meta') - - - +@section('additional_meta') + - + + + @endsection -@section('map_content') -
    - @if($twoparts) -
    -

    - {{ App\Subject::find(App\Classes::find($classes_id)->subject_id)->name }}, - {{ App\Subject::find(App\Classes::find($classes_id)->subject_id)->weekday }} - {{ App\Classes::find($classes_id)->date }} {{ App\Subject::find(App\Classes::find($classes_id)->subject_id)->time }}, - sala {{ App\Room::find(App\Subject::find(App\Classes::find($classes_id)->subject_id)->room_id)->name }} -

    -
    -