Anfrage schicken

html/RentForCamp/app/database.js

@@ -48,7 +48,7 @@ exports.getItem = function(identifier, callback) {
 }
 
 exports.getItemList = function(callback) {
-  const sql = `SELECT * FROM items i ORDER BY i.order ASC`
+  const sql = `SELECT * FROM items i ORDER BY i.order DESC`
   
   pool.query(sql, function (error, results, fields) {
     if (error) throw error;
@@ -56,3 +56,13 @@ exports.getItemList = function(callback) {
     callback(results)
   });
 }
+
+exports.getNotAvailableList = function(itemID, callback) {
+  const sql = `SELECT a.item, a.from AS 'start', a.to as 'end' FROM available a WHERE a.item = ${itemID} ORDER BY a.from ASC`
+  
+  pool.query(sql, function (error, results, fields) {
+    if (error) throw error;
+    
+    callback(results)
+  });
+}

html/RentForCamp/public/javascripts/actions.js

@@ -1,3 +1,29 @@
-function x() {
+$(function() {
+  initDatepickerRange();
+  initAvailabilityCalendar();
+  $('[data-toggle="tooltip"]').tooltip({
+    placement: 'bottom'
+  });
+});
+
+
+function initDatepickerRange() {
+  // Doku: https://uxsolutions.github.io/bootstrap-datepicker/
   
+  $('input[data-type="date"]').datepicker({
+    format: "dd.mm.yyyy",
+    language: "de",
+    daysOfWeekHighlighted: "0,6",
+    todayHighlight: true,
+    orientation: "top auto"
+  });
+}
+
+function initAvailabilityCalendar() {  
+  $('.calendar').each(function() {
+    var $cal = $(this);
+    var unavailableDates = JSON.parse($cal.parent().find('input:first').val());
+
+    $cal.availabilityCalendar(unavailableDates);
+  });
 }

html/RentForCamp/public/javascripts/bootstrap-datepicker.de.min.js

@@ -0,0 +1 @@
+!function(a){a.fn.datepicker.dates.de={days:["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],daysShort:["Son","Mon","Die","Mit","Don","Fre","Sam"],daysMin:["So","Mo","Di","Mi","Do","Fr","Sa"],months:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],monthsShort:["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"],today:"Heute",monthsTitle:"Monate",clear:"Löschen",weekStart:1,format:"dd.mm.yyyy"}}(jQuery);

html/RentForCamp/public/javascripts/calendar.js

@@ -0,0 +1,207 @@
+(function ($) {
+	var weekdays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
+	var months = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
+
+
+	function AvailabilityCalendar(container, bookedDates) {
+		this.date = new Date();
+		this.date.setDate(1);
+
+		this.container = container;
+		this.bookedDates = bookedDates;
+
+		this.createCalendar();
+		this.renderMonth();
+	}
+
+
+	AvailabilityCalendar.prototype = {
+		/**
+		 * Setup methods
+		 */
+		__createToolbar: function () {
+			var $toolbar = $('<div></div>').appendTo(this.container);
+			$toolbar.addClass('availability-calendar-toolbar');
+
+			this.$monthLabel = $('<span></span>').appendTo($toolbar);
+			var $inputContainer = $('<span></span>').appendTo($toolbar);
+
+			$inputContainer.append('<input type="button" title="Aktueller Monat" value="Heute">');
+			$inputContainer.append('<input type="button" title="Vorheriger Monat" value="&#10094;">');
+			$inputContainer.append('<input type="button" title="Nächster Monat" value="&#10095;">');
+
+			var $inputs = $inputContainer.children('input');
+			var self = this;
+
+			$inputs.eq(0).on('click', function () {
+				self.date = new Date();
+				self.date.setDate(1);
+				self.renderMonth();
+			});
+
+			$inputs.eq(1).on('click', function () {
+				self.date.setMonth(self.date.getMonth() - 1);
+				self.renderMonth();
+			});
+
+			$inputs.eq(2).on('click', function () {
+				self.date.setMonth(self.date.getMonth() + 1);
+				self.renderMonth();
+			});
+		},
+		__createTable: function () {
+			var $table = $('<table></table>').appendTo(this.container);
+			$table.addClass('availability-calendar');
+
+			// Weekday headers
+			var $tr = $('<tr></tr>').appendTo($table);
+
+			weekdays.forEach(function (day) {
+				$('<th></th>').html(day).appendTo($tr);
+			});
+
+			// Day cells
+			for (var i = 0; i < 6; ++i) {
+				$tr = $('<tr></tr>').appendTo($table);
+				$tr.append('<td></td><td></td><td></td><td></td><td></td><td></td><td></td>');
+			}
+
+			this.$cells = $table.find('td');
+		},
+		createCalendar: function () {
+			this.__createToolbar();
+			this.__createTable();
+		},
+
+
+		/**
+		 * Month rendering methods
+		 */
+		__addPreviousMonthDays: function (date, cellIndexes, dates) {
+			var firstWeekdayOfMonth = date.getDay() - 1;
+			if (firstWeekdayOfMonth < 0) firstWeekdayOfMonth = 6;
+
+			if (firstWeekdayOfMonth > 0) {
+				date.setDate(0);
+				var numDays = date.getDate();
+
+				for (var i = numDays - firstWeekdayOfMonth + 1; i <= numDays; ++i) {
+					this.$cells.eq(dates.length).html(i).addClass('ex-month');
+
+					date.setDate(i);
+					var dateInt = date.valueOf();
+
+					cellIndexes[dateInt] = dates.length;
+					dates.push(dateInt);
+				}
+			}
+		},
+		__addThisMonthDays: function (date, year, month, cellIndexes, dates) {
+			date.setFullYear(year, month + 1, 0); // Need to reset year
+			var numDays = date.getDate();
+
+			for (var i = 1; i <= numDays; ++i) {
+				this.$cells.eq(dates.length).html(i);
+
+				date.setDate(i);
+				var dateInt = date.valueOf();
+
+				cellIndexes[dateInt] = dates.length;
+				dates.push(dateInt);
+			}
+		},
+		__addNextMonthDays: function (date, month, cellIndexes, dates) {
+			if (dates.length < 42) {
+				date.setMonth(month + 1, 1);
+				var remainingDays = 42 - dates.length;
+
+				for (var i = 1; i <= remainingDays; ++i) {
+					this.$cells.eq(dates.length).html(i).addClass('ex-month');
+
+					date.setDate(i);
+					var dateInt = date.valueOf();
+
+					cellIndexes[dateInt] = dates.length;
+					dates.push(dateInt);
+				}
+			}
+		},
+		__addEvents: function (cellIndexes, dates) {
+			var firstDate = dates[0];
+			var lastDate = dates[dates.length - 1];
+			var self = this;
+
+			this.bookedDates.forEach(function (date) {
+				if (date.start <= lastDate && date.end >= firstDate) {
+					var startIndex = cellIndexes[date.start];
+					var endIndex = cellIndexes[date.end];
+
+					if (startIndex !== undefined) {
+						self.$cells.eq(startIndex).addClass('unavailable').append('<div class="first"></div>');
+						++startIndex;
+					}
+					else {
+						startIndex = cellIndexes[firstDate];
+					}
+
+					if (endIndex !== undefined) {
+						self.$cells.eq(endIndex).addClass('unavailable').append('<div class="last"></div>');
+						--endIndex;
+					}
+					else {
+						endIndex = cellIndexes[lastDate];
+					}
+
+					self.$cells.slice(startIndex, endIndex + 1).addClass('unavailable').append('<div></div>');
+				}
+			});
+		},
+		renderMonth: function () {
+			var cellIndexes = {};
+			var dates = [];
+
+			var year = this.date.getFullYear();
+			var month = this.date.getMonth();
+			var date = new Date(year, month, 1);
+
+			this.$monthLabel.html(months[month] + ' ' + year);
+			this.$cells.removeClass('ex-month');
+			this.$cells.filter('.unavailable').removeClass('unavailable').children().remove();
+
+			this.__addPreviousMonthDays(date, cellIndexes, dates);
+			this.__addThisMonthDays(date, year, month, cellIndexes, dates);
+			this.__addNextMonthDays(date, month, cellIndexes, dates);
+
+			this.__addEvents(cellIndexes, dates);
+		}
+	};
+
+
+	$.fn.availabilityCalendar = function (bookedDates) {
+		var dates = [];
+
+		bookedDates.forEach(function (date) {
+			var start = new Date(date.start);
+			var end = new Date(date.end);
+
+			start.setHours(0, 0, 0, 0);
+			end.setHours(0, 0, 0, 0);
+
+			start = start.valueOf();
+			end = end.valueOf();
+
+			if (start <= end) {
+				dates.push({
+					start: start,
+					end: end
+				});
+			}
+		});
+
+		this.each(function () {
+			new AvailabilityCalendar(this, dates);
+		});
+
+		return this;
+	};
+})(jQuery);

html/RentForCamp/public/stylesheets/bootstrap-datepicker.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["less/datepicker.less","build/build.less"],"names":[],"mappings":"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"}

html/RentForCamp/public/stylesheets/calendar.css

@@ -0,0 +1,106 @@
+/**
+ * Calendar toolbar
+ */
+.availability-calendar-toolbar {
+	padding-bottom: 15px;
+	font-size: 1.2em;
+	font-weight: bold;
+	margin-bottom: 10px;
+	margin-top: 40px;
+}
+
+.availability-calendar-toolbar span:last-child {
+  float: right;
+}
+
+.availability-calendar-toolbar input {
+	padding: 7px 14px;
+	background: #fff;
+	background-image: none;
+	border: 1px solid #BBB;
+	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+	font-weight: bold;
+	cursor: pointer;
+	outline: 0;
+}
+
+.availability-calendar-toolbar input:first-child {
+	margin-right: 5px;
+	padding: 8px 14px;
+	border-radius: 3px;
+}
+
+.availability-calendar-toolbar input:nth-child(2) {
+  border-radius: 3px 0 0 3px;
+}
+
+.availability-calendar-toolbar input:last-child {
+	margin-left: -1px;
+	border-radius: 0 3px 3px 0;
+}
+
+.availability-calendar-toolbar input:hover {
+	color: #cecdd2;
+}
+
+.availability-calendar-toolbar input:active {
+	background: #D5D5D5;
+	background-image: linear-gradient(to bottom, #DDD, #C6C6C6);
+}
+
+
+/**
+ * Calendar table and cells
+ */
+.availability-calendar {
+	width: 100%;
+	background: #FFF;
+	table-layout: fixed;
+	border-collapse: collapse;
+}
+
+.availability-calendar th, .availability-calendar td {
+	border: 1px solid #DDD;
+	padding: 5px;
+}
+
+.availability-calendar td {
+	height: 60px;
+	vertical-align: top;
+	text-align: right;
+}
+
+.availability-calendar .ex-month {
+  opacity: 0.4;
+}
+
+.availability-calendar .unavailable {
+  position: relative;
+}
+
+.availability-calendar .unavailable div {
+	position: absolute;
+	top: 50%;
+	left: 0;
+	right: -1px;
+	height: 10px;
+	background: #f49a34;
+	border-top: 1px solid #A33;
+	border-bottom: 1px solid #A33;
+}
+
+.availability-calendar .unavailable:last-child div {
+  right: 0;
+}
+
+.availability-calendar .unavailable .first {
+	left: 51%;
+	border-radius: 3px 0 0 3px;
+	border-left: 1px solid #A33;
+}
+
+.availability-calendar .unavailable .last {
+	right: 51%;
+	border-radius: 0 3px 3px 0;
+	border-right: 1px solid #A33;
+}

html/RentForCamp/public/stylesheets/style.less

@@ -1,11 +1,17 @@
 @import (inline) "normalize.css";
 @import (inline) "bootstrap.min.css";
+@import (inline) "bootstrap-datepicker.min.css";
+@import (inline) "font-awesome.min.css";
+@import (inline) "calendar.css";
 
 
 @color_white: #fff;
+@color_black: #000;
 @color_grey: #cecdd2;
 @color_orange: #f49a34;
 
+@radio_border_default: 3px;
+
 
 html,
 body {
@@ -19,13 +25,13 @@ body {
 a {
   color: @color_orange;
   text-decoration: none;
-  
+
   &:hover {
     text-decoration: none;
     color: @color_grey;
     background-color: fade(@color_white, 50%);
   }
-  
+
   &#back {
     display: block;
     position: absolute;
@@ -52,7 +58,7 @@ a {
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
-  
+
   .welcome {
     position: relative;
     width: 100%;
@@ -137,8 +143,6 @@ a {
 }
 
 #itemPage {
-  height: 100%;
-  
   #stage {
     height: auto;
     border-bottom: 1px solid @color_orange;
@@ -167,22 +171,14 @@ a {
 }
 
 footer {
-  @footer_height: 50px;
-  
+  margin-top: 10px;
   border-top: 1px solid @color_orange;
   background-color: fade(@color_grey, 50%);
   text-align: center;
-  height: @footer_height;
   
-  .col {
-
-    
-    a {
-      line-height: @footer_height;
-      
-      &:hover {
-        background-color: inherit;
-      }
+  a {    
+    &:hover {
+      background-color: inherit;
     }
   }
 }
@@ -193,3 +189,52 @@ footer {
     margin-bottom: 30px;
   }
 }
+
+.input-daterange {
+  flex-direction: column;
+  
+  &.input-group {
+    .form-control,
+    .input-group-addon {
+      width: 100%;
+      display: block;
+      border: 1px solid @color_grey;
+    }
+    
+    .input-group-addon {
+      text-align: center;
+      
+      &.intro {
+        
+      }
+    }
+    
+    .form-control {
+      border-radius: @radio_border_default;
+    }
+  }
+}
+
+.request {
+  margin-top: 20px;
+  
+  h5 {
+    font-size: 1.2em;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  
+  .datepicker {
+    table {
+      tr {
+        td {
+          &.today,
+          &.highlighted {
+            background-image: none;
+            background-color: fade(@color_orange, 50%);
+          }
+        }
+      }
+    }
+  }
+}

html/RentForCamp/routes/index.js

@@ -7,18 +7,21 @@ router.get('/', function(req, res, next) {
   var db = app.get('DB')
   
   db.getItemList((items)=>{
-    res.render('index', { title: 'RentFor.Camp', items: items })
+    res.render('index', { title: 'Dein.Equipment', items: items })
   })
 });
 
 router.get('/article/show/:identifier', function(req, res, next) {
   var app = req.app
   var db = app.get('DB')
-  
+
   const identifier = req.params.identifier
-  
+
   db.getItem(identifier, (item)=>{
-    res.render('detail', { title: item.title, item: item })
+    db.getNotAvailableList(item.id, (notAvailableList)=>{
+      item.unavailableDates = notAvailableList
+      res.render('detail', { title: item.title, item: item })
+    })  
   })
 });
 
@@ -27,7 +30,7 @@ router.get('/imprint/', function(req, res, next) {
   var app = req.app
   var db = app.get('DB')
   
-  res.render('imprint', { title: 'RentFor.Camp Impressum' })
+  res.render('imprint', { title: 'Dein.Equipment Impressum' })
 });
 
 /* GET privacy */
@@ -35,7 +38,7 @@ router.get('/privacy/', function(req, res, next) {
   var app = req.app
   var db = app.get('DB')
   
-  res.render('privacy', { title: 'RentFor.Camp Datenschutz' })
+  res.render('privacy', { title: 'Dein.Equipment Datenschutz' })
 });
 
 /* GET terms and conditions */
@@ -43,7 +46,18 @@ router.get('/terms/', function(req, res, next) {
   var app = req.app
   var db = app.get('DB')
   
-  res.render('terms', { title: 'RentFor.Camp AGB' })
+  res.render('terms', { title: 'Dein.Equipment AGB' })
 });
 
+router.post('/request/', function(req, res, next) {
+  const paramStart = req.body.start
+  const paramEnd = req.body.end
+  const paramName = req.body.name
+  const paramContact = req.body.contact
+  
+  //TODO: Mail hier!
+  
+  res.render('request', { title: 'Dein.Equipment: Anfrage gesendet' })
+})
+
 module.exports = router;

html/RentForCamp/views/detail.pug

@@ -9,4 +9,39 @@ block content
       p !{item.intro}
       p !{item.details}
       p.price
-        span.value #{item.price}
+        span.value #{item.price}
+
+      form.available
+        .inlineCalendar
+          input(type="hidden", value=item.unavailableDates)
+          .calendar
+
+      form.request(action="/request/", method="post")
+        h5 #{item.title} anfragen
+        .form-group
+          .input-group
+            .input-group-prepend
+              span.input-group-text
+                i(class="fa fa-calendar-o")
+            input(type="text", data-type="date", class="input-sm form-control", name="start", placeholder="Von", data-toggle="tooltip", title="Wann möchtest du den Artikel ausleihen?")
+        .form-group
+          .input-group
+            .input-group-prepend
+              span.input-group-text
+                i(class="fa fa-calendar-o")
+            input(type="text", data-type="date", class="input-sm form-control", name="end", placeholder="Bis", data-toggle="tooltip", title="Bis wann möchtest du den Artikel ausleihen?")
+        .form-group
+          .input-group
+            .input-group-prepend
+              span.input-group-text
+                i(class="fa fa-user-o")
+            input(type="text", class="input-sm form-control", name="name", placeholder="Dein Vor- u. Nachname", data-toggle="tooltip", title="Verrate uns doch bitte, wer du bist!")
+        .form-group
+          .input-group
+            .input-group-prepend
+              span.input-group-text
+                i(class="fa fa-envelope-o")
+            input(type="text", class="input-sm form-control", name="contact", placeholder="E-Mail oder Telefonnummer", data-toggle="tooltip", data-placement="top", title="Wie möchtest du von uns Antwort erhalten? Nenn uns deine Telefonnummer, oder deine E-Mail-Adresse.")
+        .form-group
+          .input-group
+            button(type="submit", class="btn btn-primary btn-block", value="request") Anfrage

html/RentForCamp/views/imprint.pug

@@ -7,7 +7,7 @@ block content
     section#imprint.lawthings
       h2 Impressum
       p
-        span RentFor.Camp
+        span.bold Dein.Equipment
         br
         span Gerrit Linnemann
         br

html/RentForCamp/views/index.pug

@@ -2,12 +2,12 @@ extends layout
 
 block content
   #stage
-    div.welcome Willkommen auf RentFor.Camp
+    div.welcome Willkommen auf Dein.Equipment
     a.startLink(href="#", onclick="document.getElementById('items').scrollIntoView(); return false;") Jetzt stöbern
-  
+
   section#items
     each val, index in items
       a.item(href='/article/show/' + val.identifier)
-        img.preview(src=val.previewfile)
         title #{val.title}
+        img.preview(src=val.previewfile)
         intro #{val.intro}

html/RentForCamp/views/layout.pug

@@ -3,6 +3,9 @@ html
   head
     title= title
     
+    link(rel="shortcut icon", href="/images/logo512x512.png")
+    link(rel="icon", type="image/png", href="/images/logo512x512.png", sizes="256x256")
+    
     meta(charset="utf-8")
     meta(name="viewport", content="width=device-width, initial-scale=1, shrink-to-fit=no")
     
@@ -11,15 +14,18 @@ html
     block content
     
     footer
-      .container
-        .row
-          .col
-            a(href="/imprint/") Impressum
-          .col
-            a(href="/privacy/") Datenschutz
-          .col
-            a(href="/terms/") AGB
+      ul.nav.justify-content-center
+        li.nav-item
+          a.nav-link(href="/imprint/") Impressum
+        li.nav-item
+          a.nav-link(href="/privacy/") Datenschutz
+        li.nav-item
+          a.nav-link(href="/terms/") AGB
     
     script(src="/javascripts/jquery-3.3.1.min.js", crossorigin="anonymous")
     script(src="/javascripts/bootstrap.bundle.min.js", crossorigin="anonymous")
+    script(src="/javascripts/bootstrap-datepicker.min.js", crossorigin="anonymous")
+    script(src="/javascripts/bootstrap-datepicker.de.min.js", crossorigin="anonymous")
+    script(src="/javascripts/moment.min.js", crossorigin="anonymous")
+    script(src="/javascripts/calendar.js", crossorigin="anonymous")
     script(src="/javascripts/actions.js", crossorigin="anonymous")

html/RentForCamp/views/request.pug

@@ -0,0 +1,10 @@
+extends layout
+
+block content
+  .container
+    a#back(href="/") «
+    
+    section#imprint.lawthings
+      h2 Anfrage gesendet
+      p Hey! Vielen Dank für deine Anfrage.
+      p Wir melden uns so schnell wie möglich bei dir!

html/RentForCamp/views/terms.pug

@@ -4,6 +4,24 @@ block content
   .container
     a#back(href="/") «
     
-    section#imprint.lawthings
-      h2 AGB
-      p ...
+    section#terms.lawthings
+      h2 AGB / Mietbedingungen
+      h4 § 01. Bestellung und Auftragsbestätigung
+      p Bestellungen können mündlich oder schriftlich eingereicht werden. Bei Annahme des Auftrags durch uns erhält der Mieter eine Bestätigung per E-Mail.
+      
+      h4 § 02. Zahlungsbedingungen
+      p
+        span Die sich aus der Auftragsbestätigung ergebende Mietgebühr ist im voraus zu zahlen und muss spätestens bei Warenübergabe bezahlt werden. Bei Rücktritt von einer Reservierung werden Stornogebühren in folgender Höhe fällig:
+        br
+        span 50% des Auftragswertes bei Rücktritt 7 Arbeitstage vor Mietbeginn,
+        br
+        span 80% des Auftragswertes bei Rücktritt 1 Arbeitstag vor bzw. am Tag des Mietbeginns.
+      
+      h4 § 03. Verlust oder Diebstahl
+      p Bei Verlust oder Diebstahl von Geräten oder Zubehörteilen ist grundsätzlich der Neuwert zum aktuellen Listenpreis des Herstellers zu ersetzen. Die Entrichtung der vereinbarten Mietgebühr bleibt davon unberührt. Darüber hinaus sind alle Diebstähle anzuzeigen und dem Auftragnehmer eine Kopie des polizeilichen Anzeigeprotokolls auszuhändigen.
+      
+      h4 § 04. Gewährleistung und Haftung des Vermieters
+      p Fehler, Störungen oder Schäden am Mietgegenstand sind dem Vermieter sofort nach Erkennen bekanntzugeben. Die Weisungen des Vermieters sind abzuwarten. Soweit die Mängel nicht vom Mieter zu vertreten sind, hat er Anspruch auf Austausch oder Rückerstattung des Mietpreises. Weitergehende Ersatzansprüche sind ausgeschlossen.
+      
+      h4 § 05. Gültigkeit der einzelnen Bestimmungen
+      p Sollten - gleich aus welchem Grund - einzelne dieser Bestimmungen nicht zur Wirksamkeit gelangen, wird dadurch die Wirksamkeit der übrigen nicht berührt. Die entsprechende Bestimmung ist durch eine solche zu ersetzen, die dem Sinn der ursprünglichen möglichst nahe kommt.