Anfrage schicken

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%);
+          }
+        }
+      }
+    }
+  }
+}