jonas
/
WEBT_rentalsystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

upload current state

Browse Source
main
Jonas Arnold 4 years ago
parent 0d909af42d
commit 5fb4eb5543
8 changed files with 636 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 16
      css/custom.css
  2. 59
      css/style.css
  3. 49
      css/style_confirmation.css
  4. 141
      js/canvas.js
  5. 63
      js/validation.js
  6. 106
      rental.html
  7. 202
      rental_action.php
  8. BIN
      var/aside_image.jpg

16
css/custom.css
Unescape View File

@ -0,0 +1,16 @@
/* default branding values */
h1, h2, h3, h4, h5, h6, ol, ul, li, dl, dt, dd, p, button, input, select, legend, fieldset, label, navbar {
color: #333333;
font-family: 'Trebuchet MS';
text-align: left;
}
/* adaptions of w3 css */
.w3-button{
background-color: #E89212!important;
color: white;
}
.w3-button:hover {
color: #000!important;
background-color: #C95802!important;
}

59
css/style.css
Unescape View File

@ -0,0 +1,59 @@
/* Form: Label */
label {
display: block;
font-weight: bold;
margin: 0 0 0 10px; /* direction: N O S W */
}
/* fieldset, surrounds form */
fieldset {
border: 1px solid #C95802;
background-color: white;
margin-top: 10px;
}
/* legend, title of a fieldset */
legend {
font-size: 110%;
font-weight: bold;
color: #FFFFFF; /* font color */
text-transform: uppercase;
background-color: #C95802;
padding: 5px 10px 5px 10px;
margin-top: 10px;
}
/* aside image */
.aside-image {
max-width: 100%;
height: auto;
}
/* navbar */
.navbar {
background-color: #E89212!important;
color: white;
font-size: 125%;
}
/* flexbox styling */
#parent {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
/* text description element */
#parent div:nth-child(1) {
flex-basis: 100%;
}
/* symbol elements */
#parent div {
flex-basis: 50%;
}
/* spacing */
.between-spacing {
margin-bottom: 1cm;
}
.bottom-spacing {
margin-bottom: 3cm;
}

49
css/style_confirmation.css
Unescape View File

@ -0,0 +1,49 @@
/* define vertical gridbox container */
.confirmation-container {
height: 300px;
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-row-gap: 20px;
font-family: 'Trebuchet MS';
}
/* top container for confirmation headline */
confirmation-header {
grid-column: 1;
grid-row: 1;
align-items: start;
}
/* containers for details below headline */
confirmation-details-1 {
grid-column: 1;
grid-row: 2/3;
justify-items: start;
}
confirmation-details-2 {
grid-column: 1;
grid-row: 3/4;
justify-items: start;
}
confirmation-details-3 {
grid-column: 1;
grid-row: 4/5;
justify-items: start;
}
/* bottom container for action buttons */
confirmation-footer {
grid-column: 1;
grid-row: 5;
justify-items: end;
}
/* classes for successful / failed renting */
.success {
color: green;
}
.failure {
color: red;
}
/* confirmation symbol */
.confirmation-symbol {
margin: 10px;
}

141
js/canvas.js
Unescape View File

@ -0,0 +1,141 @@
/************ GLOBAL VARS ***************/
let incrementStepsAnimation = 0.15;
let timeBetweenRedrawAnimationMS = 10;
/****************************************/
/************ CROSS SYMBOL **************/
/****************************************/
let crossProperties;
/* function that draws a Cross Symbol */
function drawCross(canvasElementId, size, canvasSize) {
// get canvas element from HTML
let canvas = document.getElementById(canvasElementId);
let c = canvas.getContext('2d');
// calculate some relative positions according to size:
// relativeSizeExclusions = 0...1 relative size of exclusions from the circle
// lineWidth = width of the stroke
let relativeSizeExclusions = 0.7; let lineWidth = 0.05*size;
// d = distance from canvas border
let d = lineWidth;
// clear canvas
c.clearRect(0,0,canvasSize,canvasSize);
// draw circle
c.lineWidth = lineWidth;
c.fillStyle = "red";
c.beginPath();
c.arc(canvasSize/2, canvasSize/2, size/2-d, 0, 2 * Math.PI, false);
c.stroke();
c.fill();
// draw exclusions
c.beginPath();
c.arc(canvasSize/2, canvasSize/2, relativeSizeExclusions*(size/2-d), 1.85 * Math.PI, 0.65 * Math.PI, false);
c.closePath();
c.fillStyle = "white";
c.lineWidth = lineWidth;
c.stroke();
c.fill();
c.beginPath();
c.arc(canvasSize/2, canvasSize/2, relativeSizeExclusions*(size/2-d), 1.65 * Math.PI, 0.85 * Math.PI, true);
c.closePath();
c.fillStyle = "white";
c.lineWidth = lineWidth;
c.stroke();
c.fill();
}
/* recurring function that draws the animation of the Cross Symbol */
function drawAnimatedCross() {
setTimeout(drawAnimatedCross, timeBetweenRedrawAnimationMS);
calculateNewSize(crossProperties);
drawCross(crossProperties.canvasElementId, crossProperties.currentSize, crossProperties.maxSize);
}
/* initiates an animation of the Cross Symbol */
function animateCross(canvasElementId, size, maxSize){
crossProperties = {
canvasElementId: canvasElementId,
minSize: size,
maxSize: maxSize,
currentSize: size,
growing: true
}
drawAnimatedCross();
}
/****************************************/
/********** CHECKMARK SYMBOL ***********/
/****************************************/
let checkmarkProperties;
/* function that draws a Checkmark Symbol */
function drawCheckmark(canvasElementId, size, canvasSize) {
// get canvas element from HTML
let canvas = document.getElementById(canvasElementId);
let c = canvas.getContext('2d');
// calculate some relative positions according to size:
// xPosKink = x position of kink of the checkmark
// yHeightHook = y position of highest point of the hook
// lineWidth = width of the stroke
let xPosKink = 0.25*size; let yHeightHook = 0.5*size; let lineWidth = 0.05*size;
// d = distance from canvas border
// t = thickness of checkmark
let d = (canvasSize-size)/2+lineWidth; let t = 0.2*size;
// clear canvas
c.clearRect(0,0,canvasSize,canvasSize);
// draw checkmark
c.lineWidth = lineWidth;
c.fillStyle = "green";
c.beginPath();
c.moveTo(xPosKink + d, canvasSize-d);
c.lineTo(canvasSize-d, d);
c.lineTo(canvasSize-d-t, d);
c.lineTo(xPosKink+d, canvasSize-d-t-lineWidth/2);
c.lineTo(d, yHeightHook+d-lineWidth/2);
c.lineTo(d, yHeightHook+d+t);
c.lineTo(xPosKink + d, canvasSize - d);
c.closePath();
c.stroke();
c.fill();
}
/* recurring function that draws the animation of the Checkmark Symbol */
function drawAnimatedCheckmark() {
setTimeout(drawAnimatedCheckmark, timeBetweenRedrawAnimationMS);
calculateNewSize(checkmarkProperties);
drawCheckmark(checkmarkProperties.canvasElementId, checkmarkProperties.currentSize, checkmarkProperties.maxSize);
}
/* initiates an animation of the Checkmark Symbol */
function animateCheckmark(canvasElementId, size, maxSize){
checkmarkProperties = {
canvasElementId: canvasElementId,
minSize: size,
maxSize: maxSize,
currentSize: maxSize,
growing: true
}
drawAnimatedCheckmark(); // start timed function
}
/****************************************/
/*************** HELPERS ***************/
/****************************************/
/* Function to calculate the new size of a canvas symbol. Requires object created in 'animateX' function. */
function calculateNewSize(symbol){
if(symbol.growing && symbol.currentSize < symbol.maxSize){
symbol.currentSize += incrementStepsAnimation;
}else if(symbol.growing && symbol.currentSize >= symbol.maxSize){
symbol.growing = false;
symbol.currentSize -= incrementStepsAnimation;
}else if(symbol.growing == false && symbol.currentSize > symbol.minSize){
symbol.currentSize -= incrementStepsAnimation;
}else if(symbol.growing == false && symbol.currentSize <= symbol.minSize){
symbol.growing = true;
symbol.currentSize += incrementStepsAnimation;
}
}

63
js/validation.js
Unescape View File

@ -0,0 +1,63 @@
// Validation of form entry
function isValid() {
console.log("Validation started....");
/* VALIDATE RENTAL ARTICLE NUMBER */
let rental_art_nr = document.getElementById("mietart_nr").value;
if(rental_art_nr == ''){ // check if rental art nr is present.
setErrorPanel("Bitte eine Mietartikel Nummer angeben."); return false;
}
console.log("Testing if " + rental_art_nr[0] + " is a letter. IsLetter=" + rental_art_nr[0].match(/[a-z]/i));
if(rental_art_nr[0].match(/[a-z]/i) == null){ // check if first character is a letter. all article numbers start with a letter.
setErrorPanel("Bitte eine gültige Mietartikel Nummer angeben."); return false;
}
/* VALIDATE START DATE */
let start_date_string = document.getElementById("von").value;
let start_date = new Date(start_date_string);
if(start_date_string == '' || start_date == null){ // check if start date is present and valid.
setErrorPanel("Bitte ein valides Startdatum angeben."); return false;
}
/* VALIDATE END DATE */
let end_date_string = document.getElementById("bis").value;
let end_date = new Date(end_date_string);
if(end_date_string == '' || end_date == null){ // check if end date is present and valid.
setErrorPanel("Bitte ein valides Enddatum angeben."); return false;
}
/* VALIDATE START DATE IS BEFORE END DATE */
console.log("Testing if start date " + start_date.toISOString() + " is before end date " + end_date.toISOString() + " Is=" + (end_date >= start_date));
if(end_date < start_date){ // check if start date is before end date.
setErrorPanel("Startdatum muss vor Enddatum liegen."); return false;
}
/* VALIDATE START DATE IS AFTER TODAY */
let now = new Date(); // need to remove time from the "now" date object, therefore create new one with only date:
let now_dateOnly = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
console.log("Testing if start date " + start_date.toISOString() + " is after now " + now_dateOnly.toISOString() + ". IsTodayOrLater=" + (start_date >= now_dateOnly));
if(start_date < now_dateOnly){ // check if start date in the past. today is ok.
setErrorPanel("Startdatum liegt in der Vergangenheit."); return false;
}
/* VALIDATE CUSTOMER NUMBER */
let customer_nr = document.getElementById("kunden_nr").value;
if(customer_nr == ''){ // check if customer number empty
setErrorPanel("Bitte eine Kundennummer angeben."); return false;
}
console.log("Testing if customer number " + customer_nr + " is a number. IsInteger=" + (isNaN(customer_nr) == false));
if(isNaN(customer_nr) == true){ // check if customer number is a number
setErrorPanel("Kundennummer ist ungültig."); return false;
}
console.log("Validation sucessful");
return true; // valid
}
// Unhides error panel and shows text
function setErrorPanel(errorText) {
let error_panel = document.getElementById("error-panel");
let error_text = document.getElementById("error-text");
error_text.innerText = errorText;
error_panel.hidden = false;
}

106
rental.html
Unescape View File

@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>Mietanfrage</title>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/canvas.js"></script>
<script src="./js/validation.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="./css/custom.css"> <!-- Load custom css after w3 -->
<link rel="stylesheet" href="./css/style.css">
</head>
<body onload="animateCheckmark('canvasCheckmark', 150, 200, 10);animateCross('canvasCross', 150, 200, 10);">
<header class="w3-container">
<h1>Mietanfrage Jonas Arnold Eventtechnik</h1>
<nav class="w3-bar navbar">
<a href="#Information" class="w3-bar-item w3-button w3-mobile">Information</a>
<a href="#Formular" class="w3-bar-item w3-button w3-mobile">Formular</a>
</nav>
</header>
<main>
<!-- INFORMATION / DESCRIPTION -->
<article class="w3-container">
<h2 id="Information">Information</h2>
<aside class="w3-container w3-col l6">
<img class="aside-image" src="./var/aside_image.jpg" alt="Zwei gestapelte Racks mit Mischpult und Stagebox">
</aside>
<section class="w3-container w3-col l6">
<h2>Beschreibung</h2>
<!-- information text -->
Auf dieser Webseite können Sie als registrierter Kunde, Material von Jonas Arnold Eventtechnik mieten. Sie erhalten direkt eine Bestätigung, ob das Material zum gewünschten Zeitpunkt noch verfügbar ist. <br/>
Sofern es verfügbar ist, wird es für Sie reserviert und wir nehmen im Anschluss Kontakt mit Ihnen auf. <br>
Wenn Sie mehrere Materialien mieten möchten, füllen Sie das untenstehende Formular mehrmals aus. Die Bestellnummer bleibt während einer Stunde dieselbe. <br/>
Die verfügbaren Mietartikel und deren Nummer finden Sie hier: <br/>
<form action="https://jonasarnold.com/wp-content/uploads/2022/12/Mietpreisliste_2023-1.pdf" method="get" target="_blank">
<button class="w3-button" type="submit" alt="Weiterleitung zu PDF, welches Mietartikel auflistet">PDF Mietartikel</button>
</form> <br/>
<h2>Bestätigung Reservation</h2>
<!-- flexbox -->
<div id="parent">
<div>
Die Mietanfrage wird mit der Datenbank abgeglichen. Sofern das Material verfügbar ist, wird es für Sie reserviert. Ansonsten werden Sie darüber informiert, dass das Material bereits vermietet ist. <br/> <br/>
</div>
<div>
<b>Erfolgreiche Reservation</b><br/>
<canvas id="canvasCheckmark" width="200px" height="200px" aria-label="Grüner Haken zur Bestätigung der erfolgreichen Reservation">
Ihr Webbrowser unterstützt kein Canvas.
</canvas>
</div>
<div>
<b>Reservation nicht möglich</b><br/>
<canvas id="canvasCross" width="200px" height="200px" aria-label="Rotes Stop Symbol zum Ausdruck der fehlgeschlagenen Reservation">
Ihr Webbrowser unterstützt kein Canvas.
</canvas>
</div>
</div>
</section>
</article>
<p class="between-spacing"></p>
<!-- FORM -->
<article class="w3-container">
<form action="rental_action.php" method="post" onsubmit="return isValid();">
<!-- Error box, default hidden -->
<h2 id="Formular">Mietanfrage Formular</h2>
<div class="w3-container">
<div class="w3-panel w3-pale-red w3-border" hidden="true" id="error-panel">
<h3>Eingabefehler</h3>
<p id="error-text"></p>
</div>
</div>
<div class="w3-container w3-col l6">
<fieldset>
<legend>Mietartikel</legend>
<label for="mietart_nr">Mietartikel Nummer</label>
<input class="w3-input" placeholder="z.B. T010301" type="text" id="mietart_nr" name="rental_article_nr" required><br/>
<label for="von">Von</label>
<input class="w3-input" type="date" id="von" name="start_date" required>
<label for="bis">Bis</label>
<input class="w3-input" type="date" id="bis" name="end_date" required><br/>
</fieldset>
</div>
<div class="w3-container w3-col l6">
<fieldset>
<legend>Kundenangaben</legend>
<label for="kunden_nr">Kundennummer</label>
<input class="w3-input" placeholder="z.B. 123456" type="number" id="kunden_nr" name="customer_nr" required><br/>
</fieldset>
<fieldset>
<label for="submit">Mietanfrage senden</label>
<button class="w3-button w3-block" type="submit" id="submit">Senden</button>
</fieldset>
</div>
</form>
</article>
<p class="bottom-spacing"></p>
</main>
</body>
</html>

202
rental_action.php
Unescape View File

@ -0,0 +1,202 @@
<!DOCTYPE html>
<html>
<head>
<title>Mietanfrage</title>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/canvas.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="./css/custom.css">
<link rel="stylesheet" href="./css/style_confirmation.css">
</head>
<body>
<header class="w3-container">
<h2>Rückmeldung Mietanfrage</h2>
</header>
<main>
<aside class="w3-container w3-center w3-col l3">
<canvas id="canvas" width="300px" height="300px" class="confirmation-symbol" aria-label="Symbol, das die Reservation bestätigt oder ablehnt"></canvas>
</aside>
<section class="w3-container w3-col l9 confirmation-container">
<!-- generated details -->
<?php
/* validates parameters received via POST. checks if all are set and they are valid. */
function validateParameters() {
global $failure_text; // define global variable
/* VALIDATE RENTAL ARTICLE NUMBER */
if (!isset($_POST['rental_article_nr'])) { // check if rental art nr is present.
$failure_text = "Parameter 'rental_art_nr' is required."; return false;
}
$rental_art_nr = trim($_POST['rental_article_nr']);
if(ctype_alpha($rental_art_nr[0]) == false){ // check if first character is a letter. all article numbers start with a letter.
$failure_text = "Parameter 'rental_art_nr' has to start with a letter."; return false;
}
/* VALIDATE START DATE */
if (!isset($_POST['start_date'])) { // check if start date is present
$failure_text = "Parameter 'start_date' is required."; return false;
}
$start_date = trim($_POST['start_date']); // string arrives like "yyyy-mm-dd"
$start_date_array = explode('-', $start_date);
if (!checkdate($start_date_array[1], $start_date_array[2], $start_date_array[0])) { // check if start date is a valid date
$failure_text = "Parameter 'start_date' is not valid."; return false;
}
/* VALIDATE END DATE */
if (!isset($_POST['end_date'])) { // check if end date is present
$failure_text = "Parameter 'end_date' is required."; return false;
}
$end_date = trim($_POST['end_date']); // string arrives like "yyyy-mm-dd"
$end_date_array = explode('-', $end_date);
if (!checkdate($end_date_array[1], $end_date_array[2], $end_date_array[0])) { // check if end date is a valid date
$failure_text = "Parameter 'end_date' is not valid."; return false;
}
/* VALIDATE START DATE IS BEFORE END DATE */
if (strtotime($end_date) < strtotime($start_date)) { // check if start date is before end date. same date is accepted.
$failure_text = "'start_date' must be before 'end_date'."; return false;
}
/* VALIDATE START DATE IS AFTER TODAY */
if (strtotime($start_date) < strtotime('today 00:00')) { // check if start date in the past. today is ok.
$failure_text = "'start_date' cannot be in the past."; return false;
}
/* VALIDATE CUSTOMER NUMBER */
if (!isset($_POST['customer_nr'])) { // check if customer number is present
$failure_text = "Parameter 'customer_nr' is required."; return false;
}
$customer_nr = intval($_POST['customer_nr']);
if($customer_nr == 0){ // check if customer number is a number
$failure_text = "Parameter 'customer_nr' is not a valid number."; return false;
}
return true;
}
/* builds html content of the grid-element "confirmation details" a successful response */
function buildSuccessfulConfirmationDetailsSection($start_date, $end_date, $order_num, $customer_num, $material_num, $material_name, $material_desc) {
echo "<confirmation-details-1><b>Bestellnummer: </b>".$order_num."</confirmation-details-1>";
echo "<confirmation-details-2><b>Gemietet von: </b>".$start_date." <b> bis </b> ".$end_date."</confirmation-details-2>";
echo "<confirmation-details-3><b>Material: </b>".$material_num." <b> - </b> ".$material_name;
if($material_desc != null){
echo "<br><b>Beschreibung: </b>".$material_desc."</confirmation-details-3>";
} else{
echo "</confirmation-details-3>";
}
}
/* builds html content of the grid-element "confirmation details" a failed (unsuccessful) response */
function buildFailedConfirmationDetailsSection($text) {
echo "<confirmation-details-1>".$text."</confirmation-details-1>";
}
/* main PHP */
// initialize variables
$failure_text = "Unbekannter Fehler";
$material_name = "";
$material_desc = "";
$order_nr = 0;
// get cookie with order nr, otherwise set it to 0
if(isset($_COOKIE['OrderNr'])){
$order_nr = $_COOKIE['OrderNr'];
}
$rentalSuccess = false;
// start validation of parameters
if(validateParameters()){
// open SQL connection
$conn = mysqli_connect("localhost", "root", "", "rental_system");
if (!$conn) {
$failure_text = "Datenbankverbindung fehlgeschlagen.";
} else {
do{ // do once loop to be able to make breaks everywhere
$rental_art_nr = trim($_POST['rental_article_nr']);
$start_date = trim($_POST['start_date']);
$end_date = trim($_POST['end_date']);
$customer_nr = trim(intval($_POST['customer_nr']));
// check if rental article number exists in article database
$query = "SELECT * FROM articles WHERE article_number = ?";
$stmt = mysqli_prepare($conn, $query);
mysqli_stmt_bind_param($stmt, 's', $rental_art_nr);
mysqli_stmt_execute($stmt);
$res = mysqli_stmt_get_result($stmt);
if($res){
$row = mysqli_fetch_assoc($res); //expecting only one row since article_number is unique in SQL
if($row == null){ // row == null means there is no material with this number in the database
$failure_text = "Materialnummer existiert nicht in Datenbank.";
break;
}
$material_name = $row['article_name'];
$material_desc = $row['html_description'];
} else{
$failure_text = "Abfrage der Materialnummer fehlgeschlagen.";
break;
}
// check if the material is not yet rented out in the selected time range
$query = "SELECT * FROM rental_entries WHERE article_number = ? AND start_day <= ? AND end_day >= ?";
$stmt = mysqli_prepare($conn, $query);
mysqli_stmt_bind_param($stmt, 'sss', $rental_art_nr, $end_date, $start_date);
mysqli_stmt_execute($stmt);
$res = mysqli_stmt_get_result($stmt);
if($res){
$row = mysqli_fetch_assoc($res);
if($row != null){ // row == null means the material is not rented out in this time range
$failure_text = "Material ist bereits vermietet von ".$row['start_day']." bis ".$row['end_day'].".";
break;
}
} else{
$failure_text = "Abfrage der vermieteten Artikel fehlgeschlagen.";
break;
}
// if no order number exists yet => create one
if($order_nr == 0){
$order_nr = $customer_nr.".".date("YmdHis"); // Create unique order number with customer number and current time (full date + time up to seconds)
setcookie("OrderNr", $order_nr, time() + 3600); // valid for 1hr.
}
// enter the rental
$query = "INSERT INTO rental_entries (rental_id, article_number, start_day, end_day, order_number, customer_number) VALUES (NULL, ?, ?, ?, ?, ?);";
$stmt = mysqli_prepare($conn, $query);
mysqli_stmt_bind_param($stmt, 'ssssi', $rental_art_nr, $start_date, $end_date, $order_nr, $customer_nr);
$res = mysqli_stmt_execute($stmt);
if($res){
$rentalSuccess = true;
} else{
$failure_text = "Eintragen der Mietanfrage fehlgeschlagen. SQL query was:\n".$query;
break;
}
}while(0);
mysqli_close($conn); // close database connection if it was connected
}
}
/* final check for success, generate according defauls section */
if($rentalSuccess){
echo "<script>drawCheckmark('canvas', 250, 250);</script>";
echo "<confirmation-header><h3 class=\"success\">Mietanfrage erfolgreich erfasst</h3></confirmation-header>";
buildSuccessfulConfirmationDetailsSection($start_date, $end_date, $order_nr, $customer_nr, $rental_art_nr, $material_name, $material_desc);
} else{
echo "<script>drawCross('canvas', 250, 250);</script>";
echo "<confirmation-header><h3 class=\"failure\">Mietanfrage konnte nicht erfasst werden</h3></confirmation-header>";
buildFailedConfirmationDetailsSection($failure_text);
}
?>
<!-- Footer with return link -->
<confirmation-footer>
<button class="w3-button" onclick="window.location.href='./rental.html';">
Zurück zum Formular
</button>
</confirmation-footer>
</section>
</main>
</body>
</html>

BIN
var/aside_image.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

Write Preview
Loading…
Cancel
Save