Commit f0b16413 authored by tmeyrick's avatar tmeyrick
Browse files

Added leaflet map

parents 13af995a 25d2152b
Pipeline #4045 passed with stage
in 14 seconds
This diff is collapsed.
......@@ -81,6 +81,10 @@ var ClassicCinemaIDB = (function () {
});
};
// Create an objectStore to hold reviews
var reviewObjectStore = db.createObjectStore("reviews", {autoIncrement: true});
reviewObjectStore.createIndex("user", "user", { unique: false });
// Create an index to search movies by title. We want to ensure that
// no two movies have the same title, so use a unique index.
movieObjectStore.createIndex("title", "title", {unique: true});
......@@ -131,8 +135,7 @@ var ClassicCinemaIDB = (function () {
}
};
// Create an objectStore to hold reviews
var reviewObjectStore = db.createObjectStore("reviews", {autoIncrement: true});
/**
* Adds a review to the objectStore
......
/**
* Validation functions for the Classic Cinema site.
*
* Created by: Steven Mills, 09/04/2014
* Last Modified by: Steven Mills 23/07/2015
*/
/**
* Module pattern for Validation functions
*/
var Validator = (function () {
var pub;
// Public interface
pub = {};
/**
* Check to see if a string is empty.
*
* Leading and trailing whitespace are ignored.
* @param textValue The string to check.
* @return True if textValue is not just whitespace, false otherwise.
*/
function checkNotEmpty(textValue) {
return textValue.trim().length > 0;
}
/**
* Check to see if a string contains just digits.
*
* Note that an empty string is not considered to be 'digits'.
* @param textValue The string to check.
* @return True if textValue contains only the characters 0-9, false otherwise.
*/
function checkDigits(textValue) {
var pattern = /^[0-9]+$/;
return pattern.test(textValue);
}
/**
* Check to see if a string's length is in a given range.
*
*
* This checks to see if the length of a string lies within [minLength, maxLength].
* If no maxLength is given, it checks to see if the string's length is exactly minLength.
* @param textValue The string to check.
* @param minLength The minimum acceptable length
* @param maxLength [optional] The maximum acceptable length
* @return True if textValue is an acceptable length, false otherwise.
*/
function checkLength(textValue, minLength, maxLength) {
var length = textValue.length;
if (maxLength === undefined) {
maxLength = minLength;
}
return (length >= minLength && length <= maxLength);
}
/**
* Check if a key-press is a digit or not
*
* @param event The event representing the key-press
* @return True (accept) if key is a digit, False (reject) otherwise
*/
function checkKeyIsDigit(event) {
// Cross-browser key recognition - see http://stackoverflow.com/questions/1444477/keycode-and-charcode
var characterPressed, zero, nine;
zero = "0";
nine = "9";
characterPressed = event.keyCode || event.which || event.charCode;
if (characterPressed < zero.charCodeAt(0)) {
return false;
}
if (characterPressed > nine.charCodeAt(0)) {
return false;
}
return true;
}
/**
* Check to see if a string starts with a given substring
*
* @param textValue The string to check.
* @param startValue The expected starting substring
* @return True if textValue starts with startValue, False otherwise
*/
function startsWith(textValue, startValue) {
return textValue.substring(0, startValue.length) === startValue;
}
/**
* Check that a credit card number looks valid
*
* Basic checks depend on card type
* American Express - 15 digits starting with 3
* Master Card - 16 digits starting with 5
* Visa - 16 digits starting with 4
*
* @param cardType The type of credit card (amex | visa | mcard)
* @param cardNumber The card number to check
* @param messages Array of error messages (may be modified)
* @return True if cardNumber passes basic checks, false otherwise
*/
function checkCreditCardNumber(cardType, cardNumber, messages) {
if (!checkNotEmpty(cardNumber)) {
messages.push("You must enter a credit card number");
} else if (!checkDigits(cardNumber)) {
// Just numbers
messages.push("The credit card number should only contain the digits 0-9");
} else if (cardType === "amex" && (!checkLength(cardNumber, 15) || !startsWith(cardNumber, "3"))) {
// American Express: 15 digits, starts with a 3
messages.push("American Express card numbers must be 15 digits long and start with a '3'");
} else if (cardType === "mcard" && (!checkLength(cardNumber, 16) || !startsWith(cardNumber, "5"))) {
// MasterCard: 16 digits, starting with a 5
messages.push("MasterCard numbers must be 16 digits long and start with a '5'");
} else if (cardType === "visa" && (!checkLength(cardNumber, 16) || !startsWith(cardNumber, "4"))) {
// Visa: 16 digits, starts with a 4
messages.push("Visa card numbers must be 16 digits long and start with a '4'");
}
}
/**
* Check that a credit card expiry date is in the future
*
*
* @param cardMonth The expiry month of the card (1-12)
* @param cardYear The expiry year of the card (eg: 2017)
* @param messages Array of error messages (may be modified)
* @return True if cardValidation passes basic checks, false otherwise
*/
function checkCreditCardDate(cardMonth, cardYear, messages) {
var today;
today = new Date();
cardMonth = parseInt(cardMonth, 10);
cardYear = parseInt(cardYear, 10);
if (!cardYear) {
messages.push("Invalid year in card expiry date");
} else if (!cardMonth || cardMonth < 1 || cardMonth > 12) {
messages.push("Invalid month in card expiry date");
} else if (cardYear < today.getFullYear()) {
// Year is in the past, not valid regardless of month
messages.push("The card expiry date must be in the future");
} else if (cardYear === today.getFullYear()) {
// Year is this year, so need to check the month
// Note - JS counts months from 0 (= January)
// So the +1 and <= is correct, (even though it looks odd)
if (cardMonth <= today.getMonth() + 1) {
messages.push("The card expiry date must be in the future");
}
} // else year is in the future, so valid regardless of month
}
/**
* Check that a credit card verification code looks valid
*
* Basic checks depend on card type
* American Express - 4 digits
* Master Card/Visa - 3 digits
*
* @param cardType The type of credit card (amex | visa | mcard)
* @param cardValidation The validation number to check
* @param messages Array of error messages (may be modified)
* @return True if cardValidation passes basic checks, false otherwise
*/
function checkCreditCardValidation(cardType, cardValidation, messages) {
// General: Just numbers
if (!checkNotEmpty(cardValidation)) {
// A required field
messages.push("You must enter a CVC value");
} else if (!checkDigits(cardValidation)) {
// Just numbers
messages.push("The CVC should only contain the digits 0-9");
} else if (cardType === "amex" && !checkLength(cardValidation, 4)) {
// Amex, 4 digits
messages.push("American Express CVC values must be 4 digits long");
} else if (cardType === "mcard" && !checkLength(cardValidation, 3)) {
// MasterCard, 3 digits
messages.push("MasterCard CVC values must be 3 digits long");
} else if (cardType === "visa" && !checkLength(cardValidation, 3)) {
// Visa, 3 digits
messages.push("Visa CVC values must be 3 digits long");
}
}
function checkAddress(address, messages){
if(!checkNotEmpty(address)){
messages.push("You must supply a delivey address.");
}
}
function checkName(address, messages){
if(!checkNotEmpty(address)){
messages.push("You must supply a Name.");
}
}
function checkEmail(email, messages){
var pattern = /^[0-9a-zA-Z_\.]+@[0-9a-zA-Z_\.]+(\.[0-9a-zA-Z_\.]+)*$/;
if(!pattern.test(email)){
messages.push("Invalid email.");
}
}
/**
* Validate the checkout form
*
* Check the form entries before submission
*
* @return False, because server-side form handling is not implemented. Eventually will return true on success and false otherwise.
*/
function validateCheckout() {
var messages, cardType, cardNumber, cardMonth, cardYear, cardValidation, errorHTML, i;
// Default assumption is that everything is good, and no messages
messages = [];
errorHTML = "";
// Validate Address Details
checkAddress(document.getElementById("deliveryAddress1").value, messages);
checkName(document.getElementById("deliveryName").value, messages);
checkEmail(document.getElementById("deliveryEmail").value, messages);
// TO BE ADDED
// Validate Credit Card Details
// This depends a bit on the type of card, so get that first
cardType = document.getElementById("cardType").value;
// Credit card number validation
cardNumber = document.getElementById("cardNumber").value;
checkCreditCardNumber(cardType, cardNumber, messages);
// Expiry date validation
cardMonth = document.getElementById("cardMonth").value;
cardYear = document.getElementById("cardYear").value;
checkCreditCardDate(cardMonth, cardYear, messages);
// CVC validation
cardValidation = document.getElementById("cardValidation").value;
checkCreditCardValidation(cardType, cardValidation, messages);
if (messages.length === 0) {
// Checkout successful, clear the cart
window.sessionStorage.clear();
document.getElementById("errorMsgs").innerHTML = "<p>Your order has been submitted</p>";
} else {
errorHTML = "<ul>";
for (i = 0; i < messages.length; i++) {
errorHTML += "<li>" + messages[i] + "</li>";
}
errorHTML += "</ul>";
document.getElementById("errorMsgs").innerHTML = errorHTML;
}
// Stop the form from submitting, which would trigger a page load
// In future this will return true if the form is OK and can be submitted to the server
return false;
}
/**
* Setup function for sample validation.
*
* Adds validation to the form on submission.
* Note that if the validation fails (returns false) then the form is not submitted.
*/
pub.setup = function () {
var form = document.getElementById("checkoutForm");
form.onsubmit = validateCheckout;
document.getElementById("cardNumber").onkeypress = checkKeyIsDigit;
document.getElementById("cardValidation").onkeypress = checkKeyIsDigit;
document.getElementById("deliveryPostcode").onkeypress = checkKeyIsDigit;
};
// Expose public interface
return pub;
}());
// The usual onload event handling to call SampleValidator.setup
if (window.addEventListener) {
window.addEventListener('load', Validator.setup);
} else if (window.attachEvent) {
window.attachEvent('onload', Validator.setup);
} else {
alert("Could not attach 'Validator.setup' to the 'window.onload' event");
}
\ No newline at end of file
......@@ -51,6 +51,83 @@
<div id="cart">
</div>
<div id="errorMsgs"></div>
<form id="checkoutForm" novalidate>
<fieldset>
<!-- First section of form is delivery address etc. -->
<legend>Delivery Details:</legend>
<p>
<label for="deliveryName">Deliver to:</label>
<input type="text" name="deliveryName" id="deliveryName" required>
</p>
<p>
<label for="deliveryEmail">Email:</label>
<input type="email" name="deliveryEmail" id="deliveryEmail">
</p>
<p>
<label for="deliveryAddress1">Address:</label>
<input type="text" name="deliveryAddress1" id="deliveryAddress1" required>
</p>
<p>
<label for="deliveryAddress2"></label>
<input type="text" name="deliveryAddress2" id="deliveryAddress2">
</p>
<p>
<label for="deliveryCity">City:</label>
<input type="text" name="deliveryCity" id="deliveryCity" required>
</p>
<p>
<label for="deliveryPostcode">Postcode:</label>
<input type="text" name="deliveryPostcode" id="deliveryPostcode" maxlength="4" required class="short">
</p>
</fieldset>
<!-- Next section has credit card details -->
<fieldset>
<legend>Payment Details:</legend>
<p>
<label for="cardType">Card type:</label>
<select name="cardType" id="cardType">
<option value="amex">American Express</option>
<option value="mcard">Master Card</option>
<option value="visa">Visa</option>
</select>
</p>
<p>
<label for="cardNumber">Card number:</label>
<input type="text" name="cardNumber" id="cardNumber" maxlength="16" required>
</p>
<p>
<label for="cardMonth">Expiry date:</label>
<select name="cardMonth" id="cardMonth">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> / <select name="cardYear" id="cardYear">
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2021">2022</option>
<option value="2021">2023</option>
<option value="2021">2024</option>
</select>
</p>
<p>
<label for="cardValidation">CVC:</label>
<input type="text" class="short" maxlength="4" name="cardValidation" id="cardValidation" required>
</p>
</fieldset>
<input type="submit">
</form>
</main>
<footer>
......@@ -63,5 +140,6 @@
<script src="cart.js"></script>
<script src="printCart.js"></script>
<script src="Validator.js"></script>
</body>
</html>
\ No newline at end of file
......@@ -6,7 +6,9 @@
<title>Classic Cinema</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="leaflet/leaflet.css">
<script src="leaflet/leaflet.js"></script>
<script src="map.js"></script>
</head>
<body>
......@@ -48,10 +50,13 @@
<main>
<figure id="map">
<img src="images/map.png" alt="Map placeholder">
</figure>
<ul class="contact">
<li>
<h3>Central</h3>
......
/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
.leaflet-container {
overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
image-rendering: -webkit-optimize-contrast;
}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
width: 1600px;
height: 1600px;
-webkit-transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
display: block;
}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
max-width: none !important;
max-height: none !important;
}
.leaflet-container.leaflet-touch-zoom {
-ms-touch-action: pan-x pan-y;
touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
-ms-touch-action: pinch-zoom;
/* Fallback for FF which doesn't support pinch-zoom */
touch-action: none;
touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
-ms-touch-action: none;
touch-action: none;
}
.leaflet-container {
-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
filter: inherit;
visibility: hidden;
}
.leaflet-tile-loaded {
visibility: inherit;
}
.leaflet-zoom-box {
width: 0;
height: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 800;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
-moz-user-select: none;
}
.leaflet-pane { z-index: 400; }
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg { z-index: 200; }
.leaflet-vml-shape {
width: 1px;
height: 1px;
}
.lvml {
behavior: url(#default#VML);
display: inline-block;
position: absolute;
}
/* control positioning */
.leaflet-control {
position: relative;
z-index: 800;
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
.leaflet-top {
top: 0;
}
.leaflet-right {
right: 0;
}
.leaflet-bottom {
bottom: 0;
}
.leaflet-left {
left: 0;
}
.leaflet-control {
float: left;
clear: both;
}
.leaflet-right .leaflet-control {
float: right;
}
.leaflet-top .leaflet-control {
margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
margin-left: 10px;
}
.leaflet-right .leaflet-control {
margin-right: 10px;
}
/* zoom and fade animations */
.leaflet-fade-anim .leaflet-tile {
will-change: opacity;
}
.leaflet-fade-anim .leaflet-popup {
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1;
}
.leaflet-zoom-animated {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;