Upravy v editoru webu

dist/custom.js

@@ -1,7 +1,7 @@
 // $ ('#mainInfoModal').on ('show.bs.modal', function (e) {
-$ (document).ready(function (e) {
+$ (document).ready (function (e) {
 	$ ('#map').locationpicker ({
-		location: {latitude: 46.15242437752303, longitude: 2.7470703125},
+		location: {latitude: 49.8712825, longitude: 16.3073431},
 		radius: 10,
 		enableReverseGeocode: true,
 		draggable: true,
@@ -15,53 +15,56 @@ $ (document).ready(function (e) {
 	});
 });
 
-
+$ ('.js-move-button-trigger').click (function () {
-
+	$ ('.js-move-button').show ();
-$('.js-move-button-trigger').click(function () {
+	$ ('.gallery__buttons').show ();
-	$('.js-move-button').show();
+	$ (this).attr ('hidden', true);
-	$('.gallery__buttons').show();
+	$ ('.js-move-done-button-trigger').attr ('hidden', false);
-	$(this).attr('hidden', true);
-	$('.js-move-done-button-trigger').attr('hidden', false);
 });
 
-$('.js-move-done-button-trigger').click(function () {
+$ ('.js-move-done-button-trigger').click (function () {
-	$('.js-move-button').hide();
+	$ ('.js-move-button').hide ();
-	$('.gallery__buttons').hide();
+	$ ('.gallery__buttons').hide ();
 
-	$(this).attr('hidden', true);
+	$ (this).attr ('hidden', true);
-	$('.js-move-button-trigger').attr('hidden', false);
+	$ ('.js-move-button-trigger').attr ('hidden', false);
 });
 
+$ ('.js-delete-button-trigger').click (function () {
+	$ ('.js-delete-checkbox').show ();
+	$ ('.gallery__buttons').show ();
 
-$('.js-delete-button-trigger').click(function () {
+	$ (this).attr ('hidden', true);
-	$('.js-delete-checkbox').show();
+	$ ('.js-delete-button-confirmation').attr ('hidden', false);
-	$('.gallery__buttons').show();
-
-	$(this).attr('hidden', true);
-	$('.js-delete-button-confirmation').attr('hidden', false);
 });
 
-$('.js-delete-button-confirmation-trigger').click(function () {
+$ ('.js-delete-button-confirmation-trigger').click (function () {
-	$('.js-delete-checkbox:checked').closest('.gallery__item').fadeOut('fast');
+	$ ('.js-delete-checkbox:checked').closest ('.gallery__item').fadeOut ('fast');
-	$('.gallery__buttons').hide();
+	$ ('.gallery__buttons').hide ();
 
-	$('.js-delete-button-confirmation').attr('hidden', true);
+	$ ('.js-delete-button-confirmation').attr ('hidden', true);
-	$('.js-delete-button-trigger').attr('hidden', false);
+	$ ('.js-delete-button-trigger').attr ('hidden', false);
 });
 
-$(function() { $('#cp9').colorpicker({ customClass: 'colorpicker-2x', sliders: { saturation: { maxLeft: 200, maxTop: 200 }, hue: { maxTop: 200 }, alpha: { maxTop: 200 } } });  });
+$ (function () {
+	$ ('#cp9').colorpicker ({
+		customClass: 'colorpicker-2x',
+		sliders: {saturation: {maxLeft: 200, maxTop: 200}, hue: {maxTop: 200}, alpha: {maxTop: 200}}
+	});
+});
 
-$(function() {$('#cp9').colorpicker().on(
+$ (function () {
-			'changeColor',
+	$ ('#cp9').colorpicker ().on (
-			function() {
+		'changeColor',
-				$('#cp9').css('background-color',
+		function () {
-						$(this).colorpicker('getValue', '#ffffff'));
+			$ ('#cp9').css ('background-color',
-			});
+				$ (this).colorpicker ('getValue', '#ffffff'));
- });
+		});
+});
 
-$( function() {
+$ (function () {
-  $('.small-box').click( function() {
+	$ ('.small-box').click (function () {
-      $('.small-box').removeClass('on')
+		$ ('.small-box').removeClass ('on')
-      $(this).toggleClass('on');
+		$ (this).toggleClass ('on');
-} )
+	})
 }); 

index.js

@@ -3,20 +3,26 @@
 // JS
 // components
 import $ from 'jquery';
+
+window.jQuery = $;
+window.$ = $;
+
 import 'bootstrap';
 import 'fullcalendar';
 import Jodit from 'jodit';
 import Sortable from 'sortablejs-float';
 import 'pc-bootstrap4-datetimepicker';
+
 // SASS
 import './src/assets/scss/app.scss';
 
 // globaly accessible variables and classes
-window.jQuery = $;
-window.$ = $;
 window.Jodit = Jodit;
 window.Sortable = Sortable;
 
+import 'lightbox2';
+
+
 // custom made functions - everything in src/assets/js
 function requireAll(r) {
 	r.keys ().forEach (r);

package-lock.json

@@ -3323,6 +3323,11 @@
         }
       }
     },
+    "lightbox2": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/lightbox2/-/lightbox2-2.10.0.tgz",
+      "integrity": "sha1-BrP3t718EzLCDQN2AtlldUL9feQ="
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",

package.json

@@ -4,6 +4,7 @@
   "description": "Frontend svatebniho planovace",
   "main": "index.js",
   "dependencies": {
+    "body-parser": "^1.18.3",
     "bootstrap": "^4.1.3",
     "ejs": "^2.6.1",
     "express": "^4.16.4",
@@ -13,6 +14,7 @@
     "fullcalendar": "^3.9.0",
     "jodit": "^3.2.22",
     "jquery": "^3.3.1",
+    "lightbox2": "^2.10.0",
     "pc-bootstrap4-datetimepicker": "^4.17.50",
     "popper.js": "^1.14.5",
     "sortablejs-float": "^1.7.0"

src/app.js

@@ -1,4 +1,3 @@
-
 var express = require ('express');
 var app = express ();
 
@@ -10,6 +9,78 @@ app.set ('view engine', 'ejs');
 app.use ('/dist', express.static ('dist'));
 app.use (expressLayouts);
 
+var bodyParser = require ('body-parser');
+app.use (bodyParser.json ());
+app.use (bodyParser.urlencoded ({extended: true}));
+
+var templateData = {
+	invitations: [
+		{
+			name: "Frantisek Novak",
+			person_count: 2,
+			will_come: true,
+			date: new Date ('2018-11-20')
+		},
+		{
+			name: "Frantisek Dvorak",
+			person_count: 4,
+			will_come: false,
+			date: new Date ('2018-11-19')
+		},
+		{
+			name: "Frantisek Dvorak",
+			person_count: 4,
+			will_come: null
+		},
+		{
+			name: "Frantisek Dvorak",
+			person_count: 4,
+			will_come: null
+		},
+	],
+	tasks: [
+		{name: "Ukol 1", done: false},
+		{name: "Ukol 2", done: true},
+		{name: "Ukol 3", done: true},
+		{name: "Ukol 4", done: false},
+	],
+	aboutUs: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+	notes: "",
+	wedding: {
+		when: '1. 9. 2019',
+		where: 'Zámek Litomyšl',
+		at: '11:00'
+	},
+	ourStory: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+	program: [
+		{
+			icon: "automobile",
+			time: "10:00",
+			title: "Příjezd nevěsty"
+		},
+		{
+			icon: "heart",
+			time: "11:00",
+			title: "Obřad"
+		},
+		{
+			icon: "cutlery",
+			time: "12:00",
+			title: "Hostina"
+		},
+		{
+			icon: "glass",
+			time: "13:00",
+			title: "Přípitek"
+		},
+		{
+			icon: "birthday-cake",
+			time: "12:00",
+			title: "Krájení dortu"
+		}
+	]
+};
+
 /**
  * Render template - check if exists
  *
@@ -21,8 +92,10 @@ function renderTemplate(req, res) {
 	var urlSegment = url.replace (/[^a-z0-9_]/, '');
 	var viewsRoot = app.get ('views');
 
+	templateData.queryString = req.query;
+
 	if (fs.existsSync (viewsRoot + '/' + urlSegment + ".ejs")) {
-		res.render (urlSegment);
+		res.render (urlSegment, templateData);
 	} else {
 		res.status (404);
 		res.send ('View ' + viewsRoot + '/' + urlSegment + '.ejs not found');
@@ -49,4 +122,32 @@ app.get ('/:page?', function (req, res) {
 	renderTemplate (req, res);
 });
 
+function savePost(req, res) {
+	console.log (req.body);
+
+	for (var i in req.body) {
+		templateData[i] = req.body[i];
+	}
+}
+
+app.post ('/:page?', function (req, res) {
+	savePost (req, res);
+
+	var redirectUrl = '/' + (typeof req.params.page === 'undefined' ? 'index' : req.params.page);
+
+	res.redirect (redirectUrl)
+});
+
+app.post ('/editor/:page?', function (req, res) {
+	savePost (req, res);
+
+	var redirectUrl = '/editor/' + (typeof req.params.page === 'undefined' ? 'index' : req.params.page);
+
+	if (typeof req.body.redirectParams !== 'undefined') {
+		redirectUrl += '?'+req.body.redirectParams;
+	}
+
+	res.redirect (redirectUrl)
+});
+
 app.listen (8080);

src/assets/js/datepicker.js

@@ -1,4 +1,9 @@
 $ (document).ready (function () {
+ initDatePickers();
+});
+
+
+function initDatePickers() {
 	$ ('.select-time').datetimepicker ({
 		format: 'LT',
 		locale: 'cs',
@@ -9,4 +14,4 @@ $ (document).ready (function () {
 		locale: 'cs',
 		minDate: new Date ()
 	});
-});
+}

src/assets/js/inlineEdit.js

@@ -108,7 +108,7 @@
 					case "datetime":
 						$input.addClass ('select-datetime');
 
-						initDateTimePickers ();
+						// initDateTimePickers ();
 
 						$input.datetimepicker ('show');
 						break;
@@ -147,25 +147,25 @@
 				return newData;
 			}
 
-			$.nette.ajax ({
+			// $.nette.ajax ({
-				url: url,
+			// 	url: url,
-				method: "POST",
+			// 	method: "POST",
-				data: {
+			// 	data: {
-					value: newData
+			// 		value: newData
-				}
+			// 	}
-			}).done (function () {
+			// }).done (function () {
-				// todo: very ugly, sorry...
+			// 	// todo: very ugly, sorry...
-				$ ("." + $trigger.attr ('class')).editable (callback);
+			// 	$ ("." + $trigger.attr ('class')).editable (callback);
-
+			//
-				// todo remove timepicker in nicer way
+			// 	// todo remove timepicker in nicer way
-				$ ('.bootstrap-datetimepicker-widget').remove ();
+			// 	$ ('.bootstrap-datetimepicker-widget').remove ();
-
+			//
-				// todo: somehow not working...?
+			// 	// todo: somehow not working...?
-				callback ();
+			// 	callback ();
-
+			//
-				var event = jQuery.Event ("snippet-reloaded");
+			// 	var event = jQuery.Event ("snippet-reloaded");
-				$ (document).trigger (event);
+			// 	$ (document).trigger (event);
-			});
+			// });
 
 			return newData;
 		};
@@ -201,5 +201,4 @@ function initEditable() {
 	});
 }
 
-$ (document).ready (initEditable);
+$ (document).ready (initEditable);
-$ (document).on ('snippet-reloaded', initEditable);

src/assets/js/notifications.js

@@ -0,0 +1,9 @@
+
+
+$(document).ready(function () {
+	setTimeout(function () {
+		$('.js-notification').fadeOut(1000);
+
+	}, 1000);
+
+});

src/assets/js/program.js

@@ -1,13 +1,99 @@
 $ (document).on ('click', '.js-add-program', function () {
-	var $template = $ ($ (this).data ('template'));
+	var templateSelector = $ (this).data ('template') + ":last";
-
+	var $template = $ (templateSelector);
 	var $templateContainer = $ ($ (this).data ('template-container'));
 
 	var $copy = $template.clone ().removeClass ('template');
-	$copy.find ('.js-remove-program').removeAttr('hidden');
 
+	var itemsCount = $ ('.template-container__item').length;
+	$copy.find ('input').each (function () {
+		var name = $ (this).attr ('name');
+
+		$ (this).attr ('name', name.replace (/\[0\]/g, '[' + itemsCount + ']'));
+	});
 
 	$copy.appendTo ($templateContainer);
+
+	$ ('.select-time').datetimepicker ({
+		format: 'LT',
+		locale: 'cs',
+		stepping: 10,
+	});
+});
+
+function renameInputs() {
+	var items = $ ('.template-container__item');
+	var i = 0;
+
+	items.each (function () {
+		var $rows = $ (this).find ('input');
+
+		$rows.each (function () {
+			var name = $ (this).attr ('name');
+			$ (this).attr ('name', name.replace (/\[[0-9]+\]/g, '[' + i + ']'));
+		});
+
+		i++;
+	});
+}
+
+$(document).on('click', '.js-sort-events', function ( ){
+	var $templateContainer = $ ($ (this).data ('template-container'));
+	var $templates = $ ($ (this).data ('template'));
+
+	sortEvents($templateContainer, $templates);
+
+	$(this).fadeOut();
+});
+
+function sortEvents($container, $templates) {
+
+	var elements = $templates.get();
+
+	elements.sort(function (a, b) {
+
+		console.log(a);
+
+		var timeA = $(a).find('.select-time').val();
+		var timeB = $(b).find('.select-time').val();
+
+		return timeA > timeB;
+	});
+
+	$container.append(elements);
+
+	renameInputs();
+}
+
+
+function checkEvents($container, $templates) {
+	var lastTime = null;
+	var orderCorrect = true;
+	$templates.each(function() {
+		var time = $(this).find('.select-time').val();
+
+		if (time < lastTime) {
+			orderCorrect = false;
+		}
+		lastTime = time;
+	});
+
+	if (!orderCorrect) {
+		$('.js-sort-events').fadeIn();
+	} else {
+		$('.js-sort-events').fadeOut();
+	}
+}
+
+$(document).ready(function () {
+
+	setInterval(function () {
+		var $templateContainer = $ ('.template-container');
+		var $templates = $ ('.template');
+
+		checkEvents($templateContainer, $templates);
+	}, 1000);
+
 });
 
 $ (document).on ('click', '.js-remove-program', function () {
@@ -19,20 +105,20 @@ $ (document).on ('click', '.js-remove-program', function () {
 });
 
 var $iconTarget = null;
-$(document).on('click', '.js-set-icon-program', function () {
+$ (document).on ('click', '.js-set-icon-program', function () {
-	$('#setIconProgramModal').modal('show');
+	$ ('#setIconProgramModal').modal ('show');
 
-	$iconTarget = $(this);
+	$iconTarget = $ (this);
 });
 
-$(document).on('click', '.js-choose-icon', function () {
+$ (document).on ('click', '.js-choose-icon', function () {
 
-	var icon = $(this).data('icon');
+	var icon = $ (this).data ('icon');
 
-	$iconTarget.find('input').val(icon);
+	$iconTarget.find ('input').val (icon);
-	$iconTarget.find('.fa').removeAttr('class').addClass('fa fa-2x fa-'+icon);
+	$iconTarget.find ('.fa').removeAttr ('class').addClass ('fa fa-2x fa-' + icon);
 	$iconTarget = null;
 
-	$('#setIconProgramModal').modal('hide');
+	$ ('#setIconProgramModal').modal ('hide');
 
 });

src/assets/js/sortable.js

@@ -22,15 +22,23 @@ function initSortable() {
 			handle: ".sort-handle",
 			draggable: ".draggable",
 			onEnd: function (evt) {
-				var ordered = [];
 
-				// get item ids
+				var items = $ ('.template-container__item');
-				$ ('.sortable-item').each (function () {
+				var i = 0;
-					var $e = $ (this);
+
-					ordered.push ($e.data ('id'));
+				items.each (function () {
+					var $rows = $ (this).find ('input');
+
+					$rows.each (function () {
+						var name = $ (this).attr ('name');
+
+						console.log(name);
+
+						$ (this).attr ('name', name.replace (/\[[0-9]+\]/g, '[' + i + ']'));
+					});
+
+					i++;
 				});
-
-
 			}
 		});
 	}

src/assets/js/upload.js

@@ -26,4 +26,18 @@ $ (".file-upload").change (function () {
 	}
 
 	readURL (this, preview);
+});
+
+$(document).on('submit', 'form.js-upload', function (e){
+
+	// var
+	$(this).find('input[type=file]').each(function() {
+
+	});
+
+
+	// e.preventDefault();
+	// return false;
+
+
 });

src/assets/scss/app.scss

@@ -27,6 +27,7 @@ $fa-font-path: "~font-awesome/fonts";
 @import "main";
 @import "backToDashboard";
 @import "boxes";
+@import "lightbox";
 
 // editor
 @import "editor/app";

src/assets/scss/editor/app.scss

@@ -3,3 +3,12 @@
 @import "timeline";
 @import "gallery";
 
+.template:first-child {
+  .js-remove-program {
+    display: none;
+  }
+}
+
+.sort-handle:hover {
+  cursor: move;
+}

src/assets/scss/lightbox.scss

@@ -0,0 +1,207 @@
+html.lb-disable-scrolling {
+  overflow: hidden;
+  /* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+}
+
+.lightboxOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  background-color: black;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+  opacity: 0.8;
+  display: none;
+}
+
+.lightbox {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 10000;
+  text-align: center;
+  line-height: 0;
+  font-weight: normal;
+}
+
+.lightbox .lb-image {
+  display: block;
+  height: auto;
+  max-width: inherit;
+  max-height: none;
+  border-radius: 3px;
+
+  /* Image border */
+  border: 4px solid white;
+}
+
+.lightbox a img {
+  border: none;
+}
+
+.lb-outerContainer {
+  position: relative;
+  *zoom: 1;
+  width: 250px;
+  height: 250px;
+  margin: 0 auto;
+  border-radius: 4px;
+
+  /* Background color behind image.
+     This is visible during transitions. */
+  background-color: white;
+}
+
+.lb-outerContainer:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.lb-loader {
+  position: absolute;
+  top: 43%;
+  left: 0;
+  height: 25%;
+  width: 100%;
+  text-align: center;
+  line-height: 0;
+}
+
+.lb-cancel {
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 0 auto;
+  //background: url(../images/loading.gif) no-repeat;
+}
+
+.lb-nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+}
+
+.lb-container > .nav {
+  left: 0;
+}
+
+.lb-nav a {
+  outline: none;
+  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
+}
+
+.lb-prev, .lb-next {
+  height: 100%;
+  cursor: pointer;
+  display: block;
+}
+
+.lb-nav a.lb-prev {
+  width: 34%;
+  left: 0;
+  float: left;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAtCAYAAADsvzj/AAAFF0lEQVR4Ac2ZW0xcVRSGPTNnhlPKcCsUAeeChkEVxhutDQwzMANaqamNWgpaH+yDIaZp1cRHbgH0gTsxkmDCI/hiRAqgD5qYRgKQ8II6TE00wfgGAcIdKeM/ydrNZIezxxg9m518gRxWmn6s9a9zhvNQJBL5T/gfjokwA5Uw0zWFeHBOugiTsAArfSWZky+iABVowAZSwRkiDSTRz1iHlJMmogATsIDTIAPYgRs8SeTTtXSQSLVKFNkivIQKksDDJFCsquqLmqZdAa/i+yCuPQ1cJHOKjdpJEWGdsIFs8BQoy83NvTEzMzO3t7f318HBweHc3Nxdj8dznWQeIWmpIryENUaiCPgdDsfN+fn5XyLcWV5eDlmt1gBqHgOpbAHIFmESySAHeECF0+m8hd/+vcgxZ3d39wBj9grqCkA6iaiyRBRunJhEpcvl+nBhYeG3iM7Z2dnZgkg1ZSgNqLI6wgebSVTZ7faPlpaW/tSTWF9f36ivr+9AbQkF3iZRhAs2dSInJ+eDUCj0h0Biq7S09BPUBkEhyAKJssKusE6QRCGoQLDfn56eDulJrK6ubgeDwS7UXgTPAztIkXUfUbhxKgLlyMRtBPtXPYm1tbXdqqoqJnEOOGhbJQCTkSJ8sJlEMNoJrFhdicPDw6PKyspe1FaD85yE2YBnLUGwSSIrK+s2bnZLehIbGxubfr+/B7WXSMJJ42QlCcVAES7YJJGdnR0dp7BgnLZKSko6qBPngIvrBEkYIKIT7PLoOKET4TjB7kbty+A8SaRxmcAxQEQn2BUI9q3Z2dl7gk7sINhRiZeoE87jMmGECB/s3JhgR8dJV2Jzc3Pb5/N1UieKKdgsEyaAY5wIk2Dj5GHBRifCgmBHb3adLBNsO3HBNkxEAWZwCmSCx4EPwb4ZJ9jbCHYXSRQDpyDYhomoNFIOUIRMvINO/KQnsbKyshMIBD5D7RVwgQWblzBahD2Sp5jN5jzM+9uLi4s/60mEw+FNbKcvUH8DVIECcAZoXLCliaRaLBbX8PBwb0RwRkZGfkftx+BdUM4+KInDbdxoWUCKoih5CQkJgYGBgS/xs6PjRPb394+ampp+RP174CIoBGcpYypQZIqYY+4dz4DLvb29Y6LONDY2fou6OuAF+SCDZCgj8kQSQDqNihfU9vX1TYlkGhoa7qDuDVBKMpQVrjMG30fYCs6gAHuRmdqurq5JkUxLS8sEaq+CMq4zJGOgCB2Fk8kHJSaTqaazs3Pi2MzQaWtrm0RtDfDFyCQyGUNFOJlEkMlkwLWenp5vRDKtra1TNGYsM5mcjKEifGeYjBfUQUaYmebm5omYzLjFC8C4zyNqTGfcNDZ1/2ABjKHudZLXkTFARJAZN/CqqnqNMqN7Ojo6vqMF4ONkVFmvFUQLQNiZ7u7u76PZAn6S4TJjrIhoAdT+iwXAdQYYKCJaAG/iPhNvAYyj7jXwAngUpAGrDBF+ATCZAuBXFOX60NDQ3TiPM1/hyfoyPf7kgNNSXyvwmSGZMk3T3hocHPwhzlPzJLLFnpZT5PztV5wZNyilbTZFmTnZrxU4GZWXATV4ap4kmeNELlEticjsSHyZq/39/V/j374P2Lk/Pj5+BznxUuDlj1acJ4B8cAH/4er29vbPR0dH58fGxubx/ac2my1Ab3iz5Yc9/gJIB05QCJ4Fz9FXD3gC5HIfi+WKCGQ0GpuzwA7yCDtdS+b/SCFfRPwaQqPxSSaS6JrlwUjR+RtEvCM0ct4sLQAAAABJRU5ErkJggg==') left 48% no-repeat;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  -webkit-transition: opacity 0.6s;
+  -moz-transition: opacity 0.6s;
+  -o-transition: opacity 0.6s;
+  transition: opacity 0.6s;
+}
+
+.lb-nav a.lb-prev:hover {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}
+
+.lb-nav a.lb-next {
+  width: 64%;
+  right: 0;
+  float: right;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAtCAYAAADsvzj/AAAFDUlEQVR4Ac2ZS0xcVRjHvTN3hisw0GIRZ3AeLWHQWqdVsRqgA86AUmpqoy20Whd2YYhprJq45BVAF7yJkQQTluDGiEhBF5qYRsIjYYMKQxNNMO4gQHgjZfxP8pF8ufEe0qQ5pyf5BTKcWfzyff/vnHt5xLQ0wgbsQCfswEY80BWPxx8I5sUlHMBJP0nm4RfRWAUMkAqOgseII8AFDNqjPYwiGuEAySADeEEuOEkE6bNjIIX22riQchHWSo+SRACc1nU9ahjGG+ASfn8Vn+WT0BNUMV0so04kFTwJTodCoeuTk5N3dnd397a3t/8dHx+fzM7OvoG/nQPPADdwscqoF2HBPgJynE5nZGFhYTZuWlNTU3/4fL6b2FMMnmUyTpJRLqKTSAbIQyu9vrW1tRv/n4Uqzfv9/g+x7xUQAh6QxmVUV0SnKRWESMXm5uZ63GJNT0//GQgEPsHeUibD20xTLeKioBdUV1e3rKysrFrJzM3N/eP1ej/F3jImIxgAcsOeDLLAKRAtLCz8HDKWlZmdnf3b4/F8zCojGADyz5F04AUvgPJoNNq2tLS0YSUzNjY2iwHwEWXmFHCzymiqRGwgiaaXD7wIysvKytqWl5e3rGQwAO4iM7ewt4SmmYfLqLpr2U0yZ0FFaWlp597e3r6VDEbzXapMlGQEA0COiEYyTmozP8lcKC4u7lhdXV2zksGhOZeVlXWLy5gHgDwRJsMqE6A2qygoKGhBm60L2izmdruZjGkAyBShxTNzlGTOgvMYAO2iAYDKxKjNSgQDQI6IRWb8VJnXMADaUZlNK5mJiYl5DAC6AQgGgCwRWjaWGR/IB+fD4XDr2trahqDN5lEZ3mbZ5gEgW4QPAD6aK3BotmIArAsqE2MDIMTajGTkinAZ3mb5NAAS58zGIQPgJvaGwVMgk5597ECTLcJl+AB4GVyKRCJfLi4uijLzGzLzHrWYj1pMVyXCB4BBz/J5oAzcwDT7OhaLWZ4zMzMzvyNX79rt9uOUNyewqRSxsbzk0Jh9H3w2MDDwV1yw+vv7Ox0OR4C+q1REAzr1+ON0TpSDD+rq6n7d2dmxusbs9/T0fJOUlBTRNO2gIg6lGSGJYyAXFIFrtbW1P4oq0dnZOYR9F8EZdqaoCDtVgrJBEoXgck1Nzfciia6urlHsu0rSOSADJEkXYRK8EufAlYaGhtsiiba2thFk4kAij75Po1fiOcIkkplEGFQ2NTWNCBz2W1tbb9tstkrsLaDvcQlN5hWFS2SyTFxubGwcFUl0dHT8gH1VTCITJHMJWSLmYAcPMlFfXy9sJ0gkMnGNpEnCXAkJIhYSReAtBHvosGCTRBgEWSV0qc8jPNhMIgyutLS0/CSSSGRC1/Uqkg5aZUKGiDkTQVAMqtrb238+RGJUHGyZb1F4Je4/2FfFwZYr4qRb7QnwEngTwR4+5JxIZOJtcbDlv2lMAR5wBjfUi7h2fCuS6Ovru6Np2nVqvzwmQcFW9+43HeSg10twix0RSfT29v5iGMY7dMLniTOh+N8KghN7lKZTIQgKMiG/IkwkCJELFiL7uMWOYE+lWUL8elRNa51APoqGh4cTN9p7TOJed3f3d4nz5P4l1ITdDU66XK5Ic3PzF0NDQ1ODg4NT+P0rCFbQM3qu4MRWLsIfX7PB0yAEngPP089TwA8yBMFWKmJ+qZBGj7FecJzw0mfpwBBLqBexseAbIBWkESnAEPybQLnIf4JfIzSb+FymAAAAAElFTkSuQmCC') right 48% no-repeat;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  -webkit-transition: opacity 0.6s;
+  -moz-transition: opacity 0.6s;
+  -o-transition: opacity 0.6s;
+  transition: opacity 0.6s;
+}
+
+.lb-nav a.lb-next:hover {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}
+
+.lb-dataContainer {
+  margin: 0 auto;
+  padding-top: 5px;
+  *zoom: 1;
+  width: 100%;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.lb-dataContainer:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.lb-data {
+  padding: 0 4px;
+  color: #ccc;
+}
+
+.lb-data .lb-details {
+  width: 85%;
+  float: left;
+  text-align: left;
+  line-height: 1.1em;
+}
+
+.lb-data .lb-caption {
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 1em;
+}
+
+.lb-data .lb-caption a {
+  color: #4ae;
+}
+
+.lb-data .lb-number {
+  display: block;
+  clear: left;
+  padding-bottom: 1em;
+  font-size: 12px;
+  color: #999999;
+}
+
+.lb-data .lb-close {
+  display: block;
+  float: right;
+  width: 30px;
+  height: 30px;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAMAAAC6CgRnAAAAPFBMVEX///8AAAD9/f2CgoKAgIAAAAAAAAAAAABLS0sAAAAAAACqqqqqqqq6urpKSkpISEgAAAC7u7u5ubn////zbsMcAAAAE3RSTlMASv6rqwAWS5YMC7/AyZWVFcrJCYaKfAAAAHhJREFUeF590kkOgCAQRFEaFVGc+/53FYmbz6JqBbyQMFSYuoQuV+iTflnstI7ssLXRvMWRaEMs84e2uVckuZe6knL0hiSPObXhj6ChzoEkIolIIpKIO4joICAIeDd7QGIfCCjOKe9HEk8mnxpIAup/F31RPZP9fAG3IAyBSJe0igAAAABJRU5ErkJggg==') top right no-repeat;
+  text-align: right;
+  outline: none;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+  opacity: 0.7;
+  -webkit-transition: opacity 0.2s;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+
+.lb-data .lb-close:hover {
+  cursor: pointer;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}

src/views/backend/details.ejs

@@ -1,5 +1,8 @@
 
+
 <div class="container-fluid my-5">
+	<h3 class="text-center">Kdo?</h3>
+
 	<div class="row justify-content-center my-5">
 		<div class="col-md-4">
 

src/views/backend/index.ejs

@@ -1,109 +1,129 @@
 <div class="boxes__container">
 
-	<div class="card boxes__item">
+    <div class="card boxes__item">
-		<div class="card-header">
+        <div class="card-header">
-			<h3>
+            <h3>
-				<a href="/guests/">Poslední reakce na pozvánky</a>
+                <a href="/guests/">Poslední reakce na pozvánky</a>
-			</h3>
+            </h3>
-		</div>
+        </div>
-		<div class="card-body">
+        <div class="card-body">
 
-			<table class="table table-bordered table-striped table-hover">
+            <% if (typeof invitations != 'undefined') { %>
-				<thead>
+                <table class="table table-bordered table-striped table-hover">
-				<tr>
+                    <thead>
-					<td>Jméno</td>
+                    <tr>
-					<td>Počet osob</td>
+                        <td>Jméno</td>
-					<td>Přijde?</td>
+                        <td>Počet osob</td>
-					<td>Datum reakce</td>
+                        <td>Přijde?</td>
-				</tr>
+                        <td>Datum reakce</td>
-				<tbody>
+                    </tr>
+                    <tbody>
 
-				<tr>
+                    <% invitations.forEach(function (invitation) { %>
-					<td></td>
-					<td></td>
-					<td></td>
-					<td></td>
-				</tr>
 
-				</tbody>
+                        <% if (invitation.will_come !== null) { %>
-			</table>
 
-		</div>
+                            <tr>
-		<div class="card-footer">
+                                <td><%= invitation.name %></td>
+                                <td><%= invitation.person_count %></td>
+                                <td>
+                                    <% if (invitation.will_come) { %>
+                                        Ano
+                                    <% } else { %>
+                                        Ne
+                                    <% } %>
+
+                                </td>
+                                <td>
+                                    <% if (typeof invitation.date != 'undefined') { %>
+                                        <%= invitation.date.toLocaleDateString () %>
+                                    <% } %>
+                                </td>
+                            </tr>
+
+                    <% }
+                    }) %>
+
+                    </tbody>
+                </table>
+            <% } else { %>
+                <div class="alert alert-warning">Zatím nikdo neodpověděl na pozvánku.</div>
+            <% } %>
+
+        </div>
+        <div class="card-footer">
 
 
-			Zareagovalo 28 hostů - zúčastní se 20, nemůže 8.
+            Zareagovalo <%= invitations.length %> hostů - zúčastní se 20, nemůže 8.
 
-			<button class="btn btn-secondary pull-right">
+            <button class="btn btn-secondary pull-right">
-				Seznam hostů
+                Seznam hostů
-			</button>
+            </button>
-		</div>
+        </div>
-	</div>
+    </div>
 
 
-	<div class="card boxes__item">
+    <div class="card boxes__item">
-		<div class="card-header">
+        <div class="card-header">
-			<h3>
+            <h3>
-				Poznámky </h3>
+                Poznámky </h3>
-		</div>
+        </div>
-		<div class="card-body">
+        <form action="./" method="post">
+            <div class="card-body">
+                <textarea name="notes" cols="30" rows="10" class="wysiwyg"><%= notes %></textarea>
+            </div>
+
+            <div class="card-footer">
+                <button class="btn btn-secondary pull-right">Uložit</button>
+            </div>
+        </form>
+    </div>
 
 
-			<textarea name="notes" cols="30" rows="10" class="wysiwyg"></textarea>
+    <div class="card boxes__item">
+        <div class="card-header">
+            <h3>
+                <a href="/calendar">Nadcházející události</a>
+            </h3>
+        </div>
+        <div class="card-body">
 
 
-		</div>
+            todo
-
-		<div class="card-footer">
-			<button class="btn btn-secondary pull-right">Uložit</button>
-		</div>
-	</div>
 
 
-	<div class="card boxes__item">
+        </div>
-		<div class="card-header">
+    </div>
-			<h3>
-				<a href="/calendar">Nadcházející události</a>
-			</h3>
-		</div>
-		<div class="card-body">
 
 
-			todo
+    <div class="card boxes__item">
+        <div class="card-header">
+            <h3>
+                Úkoly </h3>
+        </div>
+        <div class="card-body">
 
+            <ul>
 
-		</div>
+                <% var cnt = 0 %>
-	</div>
+                <% tasks.forEach(function (task) { %>
+                    <li>
+                        <input type="checkbox" name="tasks[<%= cnt++ %>][done]" <%= typeof task.done != 'undefined' && task.done ? 'checked' : '' %>>
+                        <span class="edit-inline"><%= task.name %></span>
+                    </li>
+                <% }) %>
 
+            </ul>
 
-	<div class="card boxes__item">
+        </div>
-		<div class="card-header">
-			<h3>
-				Úkoly </h3>
-		</div>
-		<div class="card-body">
 
-			<ul>
+        <div class="card-footer">
-				<li>
-					<input type="checkbox" checked>
-					<span>Ukol 1</span>
-				</li>
-				<li><input type="checkbox">
-					<span>Ukol 1</span>
-				</li>
-				<li>
-					<input type="checkbox">
-					<span>Ukol 1</span>
-				</li>
-			</ul>
 
-		</div>
+            <form method="post">
+                <input type="text" name="tasks[<%= tasks.length %>][name]">
 
-		<div class="card-footer">
+                <button class="btn btn-secondary ">Uložit</button>
-
+            </form>
-			<input type="text">
+        </div>
-
+    </div>
-			<div class="btn btn-secondary ">Uložit</div>
-		</div>
-	</div>
 </div>

src/views/editor/gallery.ejs

@@ -1,37 +1,41 @@
-
 <section class="web-part container">
-	<h3 class="text-center">Fotogalerie</h3>
+    <h3 class="text-center">Fotogalerie</h3>
 
 
-	<div class="btn-toolbar justify-content-center my-5" role="toolbar" aria-label="Toolbar with button groups">
+    <div class="btn-toolbar justify-content-center my-5" role="toolbar" aria-label="Toolbar with button groups">
-		<div class="btn-group" role="group" aria-label="First group">
+        <div class="btn-group" role="group" aria-label="First group">
-			<button type="button" data-target="#newPhotoModal" data-toggle="modal" class="btn btn-secondary">Přidat fotografie</button>
+            <button type="button" data-target="#newPhotoModal" data-toggle="modal" class="btn btn-secondary">
-			<button type="button" data-target="#newGalleryModal" data-toggle="modal" class="btn btn-secondary">Přidat album</button>
+                Přidat fotografie
-		</div>
+            </button>
-	</div>
+            <button type="button" data-target="#newGalleryModal" data-toggle="modal" class="btn btn-secondary">
+                Přidat album
+            </button>
+        </div>
+    </div>
 
 
+    <div class="gallery__container">
 
-	<div class="gallery__container">
+        <%- include('../partials/notification.ejs', {parameter: "newAlbum", notificationText: "Album úspěšně vytvořeno."}) %>
+        <%- include('../partials/notification.ejs', {parameter: "upload", notificationText: "Fotografie úspěšně nahrány do vybraných alb."}) %>
 
-		<% for(var i = 1; i <= 6; i++) { %>
+        <% for(var i = 1; i <= 7; i++) { %>
-			<div class="gallery__item">
+            <% if (i < 7 || (typeof queryString.ok !== 'undefined' && queryString.ok == "newAlbum")) { %>
-				<img src="/dist/images/gallery/<%= i %>.jpg" alt="">
 
-				<a href="/editor/gallery_detail" class="gallery__overlay">
+                <div class="gallery__item">
-					<h4>Jméno galerie</h4>
+                    <img src="/dist/images/gallery/<%= i %>.jpg" alt="">
-					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
-				</a>
-
-			</div>
-
-		<% } %>
-	</div>
-
-	<% include ../partials/editor/modals/newGallery.ejs %>
-	<% include ../partials/editor/modals/uploadPhoto.ejs %>
 
 
+                    <a href="/editor/gallery_detail" class="gallery__overlay">
+                        <h4>Jméno galerie</h4>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+                    </a>
+                </div>
+            <% } %>
+        <% } %>
+    </div>
+
+    <% include ../partials/editor/modals/newGallery.ejs %>
+    <% include ../partials/editor/modals/uploadPhoto.ejs %>
 
-	
 </section>

src/views/editor/gallery_detail.ejs

@@ -1,57 +1,72 @@
 <section class="web-part container">
 
-	<h2>Nadpis alba</h2>
+    <h2>Nadpis alba</h2>
-	<article>
+    <article>
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
-		   magna aliqua. Ut enim ad minim veniam, quis
+           dolore
-		   nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+           magna aliqua. Ut enim ad minim veniam, quis
-		   reprehenderit in voluptate velit esse cillum dolore eu fugiat
+           nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-		   nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+           reprehenderit in voluptate velit esse cillum dolore eu fugiat
-		   id est laborum.</p>
+           nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-	</article>
+           anim
+           id est laborum.</p>
+    </article>
 
-	<% include ../partials/editor/modals/editGalleryText.ejs %>
+    <% include ../partials/editor/modals/editGalleryText.ejs %>
+
+    <div class="btn-toolbar justify-content-center my-5" role="toolbar" aria-label="Toolbar with button groups">
+        <!--<div class="btn-group" role="group" aria-label="First group">-->
+        <button type="button" class="btn js-move-button-trigger btn-secondary">
+            <i class="fa fa-arrows"></i>
+            Přesunout fotografie
+        </button>
+
+        <button type="button" class="btn js-move-done-button-trigger btn-primary" hidden>
+            Hotovo
+        </button>
+
+        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newPhotoModal">
+            <i class="fa fa-plus"></i> Nahrát fotografie
+        </button>
+
+        <button type="button" class="btn js-delete-button-trigger btn-danger">
+            Smazat fotografie
+        </button>
+
+        <button type="button" class="btn js-delete-button-confirmation btn-primary" data-toggle="modal" data-target="#deletePhotosModal" hidden>
+            Odstranit vybrané
+        </button>
+        <!--</div>-->
+    </div>
 
 
-	<div class="btn-toolbar justify-content-center my-5" role="toolbar" aria-label="Toolbar with button groups">
+    <%- include('../partials/notification.ejs', {parameter: "upload"}) %>
-		<!--<div class="btn-group" role="group" aria-label="First group">-->
-			<button type="button" class="btn js-move-button-trigger btn-secondary">
-				Přesunout fotografie
-			</button>
 
-			<button type="button" class="btn js-move-done-button-trigger btn-primary" hidden>
+    <a name="program"></a>
-				Hotovo
-			</button>
 
-			<button type="button" class="btn js-delete-button-trigger btn-secondary">
+    <div class="gallery__container draggable-container">
-				Smazat fotografie
-			</button>
 
-			<button type="button" class="btn js-delete-button-confirmation btn-primary" data-toggle="modal" data-target="#deletePhotosModal" hidden>
+        <% for(var i = 1; i <= 10; i++) { %>
-				Odstranit vybrané
+            <% if (i < 7 || (typeof queryString.ok !== 'undefined' && queryString.ok == "upload")) { %>
-			</button>
-		<!--</div>-->
-	</div>
 
+                <div class="gallery__item draggable">
 
-	<div class="gallery__container draggable-container">
+                    <div class="gallery__buttons">
+                        <input class="gallery__buttons__item js-delete-checkbox" type="checkbox">
+                        <i class="gallery__buttons__item js-move-button sort-handle fa fa-arrows"></i>
+                    </div>
 
-			<% for(var i = 1; i <= 6; i++) { %>
+                    <a href="/dist/images/gallery/<%= i %>.jpg" data-lightbox="gallery">
-				<div class="gallery__item draggable">
+                        <img src="/dist/images/gallery/<%= i %>.jpg" alt="">
+                    </a>
+                </div>
 
-					<div class="gallery__buttons">
+            <% } %>
-						<input class="gallery__buttons__item js-delete-checkbox" type="checkbox">
+        <% } %>
-						<i class="gallery__buttons__item js-move-button sort-handle fa fa-arrows"></i>
-					</div>
 
-					<img src="/dist/images/gallery/<%= i %>.jpg" alt="">
+    </div>
-				</div>
-
-		<% } %>
-	</div>
-
-	<% include ../partials/editor/modals/newGallery.ejs %>
-	<% include ../partials/editor/modals/uploadPhoto.ejs %>
-	<% include ../partials/editor/modals/deletePhotos.ejs %>
 
+    <% include ../partials/editor/modals/newGallery.ejs %>
+    <%- include('../partials/editor/modals/uploadPhoto.ejs', {hideAlbum: true}) %>
+    <% include ../partials/editor/modals/deletePhotos.ejs %>
 </section>

src/views/editor/index.ejs

@@ -1,5 +1,7 @@
 <section class="web-part">
-	<div class="title-image" style="background-image: url('/dist/images/01.jpg')">
+    <%- include('../partials/notification.ejs', {parameter: "titlePhoto"})%>
+
+	<div class="title-image" style="background-image: url('/dist/images/<%= (typeof queryString.ok !== 'undefined' && queryString.ok == "titlePhoto") ? '01.jpg' : '02.jpg' %>')">
 
 		<div class="web-part__edit">
 			<a href="#setTitlePhotoModal" data-toggle="modal" data-target="#setTitlePhotoModal">
@@ -11,14 +13,13 @@
 </section>
 
 <section class="web-part container">
+    <a name="aboutUs"></a>
+
+    <%- include('../partials/notification.ejs', {parameter: "aboutUs"})%>
+
 	<h2> Adam a Eva </h2>
 	<article>
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+		<p><%- aboutUs %></p>
-		   magna aliqua. Ut enim ad minim veniam, quis
-		   nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-		   reprehenderit in voluptate velit esse cillum dolore eu fugiat
-		   nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
-		   id est laborum.</p>
 	</article>
 
 	<% include ../partials/editor/modals/setAboutUs.ejs %>
@@ -26,18 +27,21 @@
 
 <section class="web-part container text-center">
 
+   <%- include('../partials/notification.ejs', {parameter: "weddingInfo"})%>
+
+    <a name="mainInfo"></a>
 	<div class="row">
 		<div class="col-md-4">
 			<h2>Kdy?</h2>
-			<p>1. 9. 2019</p>
+			<p><%= wedding.when %></p>
 		</div>
 		<div class="col-md-4">
 			<h2>Kde?</h2>
-			<p>Zámek Litomyšl</p>
+            <p><%= wedding.where %></p>
 		</div>
 		<div class="col-md-4">
 			<h2>V kolik?</h2>
-			<p>11:00</p>
+            <p><%= wedding.at %></p>
 		</div>
 
 		<% include ../partials/editor/modals/mainInfo.ejs %>
@@ -46,20 +50,24 @@
 </section>
 
 <section class="web-part container">
-	<h3 class="text-center">Svatební program</h3>
+
+    <%- include('../partials/notification.ejs', {parameter: "program"})%>
+
+    <a name="program"></a>
+    <h3 class="text-center my-5">Svatební program</h3>
 
 	<div class="timeline-container">
 
 		<div class="timeline timeline-horizontal">
 
-			<% for(var i = 0; i < 5; i++) { %>
+			<% for(var i in program) { %>
 				<div class="timeline__item">
 
-					<i class="timeline__icon fa fa-2x fa-heart-o"></i>
+					<i class="timeline__icon fa fa-2x fa-<%= program[i]['icon']%>"></i>
 
 					<div class="timeline__content">
-						<h3>11:00</h3>
+						<h3><%= program[i]['time']%></h3>
-						<p><%= i %> Hostina</p>
+						<p><%= program[i]['title']%></p>
 					</div>
 
 				</div>
@@ -74,7 +82,7 @@
 
 
 <section class="web-part container">
-	<h3 class="text-center">Fotogalerie</h3>
+	<h3 class="text-center my-5">Fotogalerie</h3>
 
 	<div class="gallery__container">
 
@@ -101,9 +109,13 @@
 <section class="web-part container">
 	<h3 class="text-center">Napište nám</h3>
 
-	<div id="js-contact-form-status"></div>
+    <%- include('../partials/notification.ejs', {parameter: "contactForm", notificationText: "Zpráva úspěšně odeslána. Ozveme se co nejdříve."})%>
 
-	<form id="contact-form" method="post" action="javascript:void(0);" role="form">
+
+	<form id="contact-form" method="post" role="form">
+        <a name="contactForm"></a>
+
+        <input type="hidden" name="redirectParams" value="ok=contactForm#contactForm">
 
 		<div class="row">
 			<div class="col-md-5">

src/views/editor/story.ejs

@@ -1,12 +1,13 @@
+
+
 <section class="web-part container">
-	<h2> Náš příběh </h2>
+
+    <%- include('../partials/notification.ejs', {parameter: "text"})%>
+
+
+    <h2> Náš příběh </h2>
 	<article>
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        <%- ourStory %>
-		   magna aliqua. Ut enim ad minim veniam, quis
-		   nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-		   reprehenderit in voluptate velit esse cillum dolore eu fugiat
-		   nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
-		   id est laborum.</p>
 	</article>
 
 	<% include ../partials/editor/modals/ourStory.ejs %>

src/views/partials/editor/modals/mainInfo.ejs

@@ -12,8 +12,10 @@
 					<span aria-hidden="true">&times;</span>
 				</button>
 			</div>
+            <form method="post">
 			<div class="modal-body">
 
+                <input type="hidden" name="redirectParams" value="ok=weddingInfo#mainInfo">
 
 				<% include ../../weddingInfo.ejs %>
 
@@ -23,9 +25,10 @@
 
 			<div class="modal-footer">
 				<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
-				<button type="button" class="btn btn-primary" data-dismiss="modal">Uložit
+				<button type="submit" class="btn btn-primary">Uložit
 				</button>
 			</div>
+            </form>
 		</div>
 	</div>
 </div>

src/views/partials/editor/modals/newGallery.ejs

@@ -1,26 +1,40 @@
-
 <div class="modal fade" id="newGalleryModal" tabindex="-1" role="dialog" aria-labelledby="newGalleryModalLabel" aria-hidden="true">
-	<div class="modal-dialog" role="document">
+    <div class="modal-dialog" role="document">
-		<div class="modal-content">
+        <div class="modal-content">
-			<div class="modal-header">
+            <div class="modal-header">
-				<h5 class="modal-title" id="newGalleryModalLabel">Přidat album</h5>
+                <h5 class="modal-title" id="newGalleryModalLabel">Přidat album</h5>
-				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
+                    <span aria-hidden="true">&times;</span>
-				</button>
+                </button>
-			</div>
+            </div>
-			<div class="modal-body">
+            <form method="post">
+                <input type="hidden" name="redirectParams" value="ok=newAlbum">
 
-				<div class="form-group"><label for="gallery_name">Název alba</label><input type="text" name="gallery_name" id="gallery_name" class="form-control"></div>
-				<div class="form-group"><label for="description">Poznámka</label>
-					<textarea class="wysiwyg" name="description"></textarea>
-				</div>
-			</div>
 
-			<div class="modal-footer">
+                <div class="modal-body">
-				<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
+
-				<button type="button" class="btn btn-primary" data-dismiss="modal">Uložit
+                    <div class="form-group">
-				</button>
+                        <label for="gallery_name">Název alba</label>
-			</div>
+                        <input type="text" required name="gallery_name" id="gallery_name" class="form-control">
-		</div>
+                    </div>
-	</div>
+
+                    <div class="form-group">
+                        <label for="gallery_name">Vyberte fotografie</label>
+                        <input type="file" multiple required class="form-control">
+                    </div>
+
+                    <div class="form-group">
+                        <label for="description">Poznámka</label>
+                        <textarea class="wysiwyg" name="description"></textarea>
+                    </div>
+                </div>
+
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
+                    <button type="submit" class="btn btn-primary">Uložit
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
 </div>

src/views/partials/editor/modals/ourStory.ejs

@@ -1,27 +1,32 @@
 <div class="web-part__edit">
-	<a href="#ourStoryModal" data-toggle="modal" data-target="#ourStoryModal">
+    <a href="#ourStoryModal" data-toggle="modal" data-target="#ourStoryModal">
-		<i class="fa fa-pencil-square"></i>
+        <i class="fa fa-pencil-square"></i>
-	</a>
+    </a>
 </div>
 
 <div class="modal fade" id="ourStoryModal" tabindex="-1" role="dialog" aria-labelledby="ourStoryModalLabel" aria-hidden="true">
-	<div class="modal-dialog" role="document">
+    <div class="modal-dialog" role="document">
-		<div class="modal-content">
+        <div class="modal-content">
-			<div class="modal-header">
+            <div class="modal-header">
-				<h5 class="modal-title" id="ourStoryModalLabel">Editovat text</h5>
+                <h5 class="modal-title" id="ourStoryModalLabel">Editovat text</h5>
-				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
+                    <span aria-hidden="true">&times;</span>
-				</button>
+                </button>
-			</div>
+            </div>
-			<div class="modal-body">
+            <form method="post">
-				<textarea class="wysiwyg" name="aboutUs"></textarea>
-			</div>
 
-			<div class="modal-footer">
+                <input type="hidden" name="redirectParams" value="ok=text">
-				<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
+
-				<button type="button" class="btn btn-primary" data-dismiss="modal">Uložit
+                <div class="modal-body">
-				</button>
+                    <textarea class="wysiwyg" name="ourStory"><%= ourStory %></textarea>
-			</div>
+                </div>
-		</div>
+
-	</div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
+                    <button type="submit" class="btn btn-primary">Uložit
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
 </div>

src/views/partials/editor/modals/program.ejs

@@ -1,82 +1,105 @@
 <div class="web-part__edit">
-	<a href="#setProgramModal" data-toggle="modal" data-target="#setProgramModal">
+    <a href="#setProgramModal" data-toggle="modal" data-target="#setProgramModal">
-		<i class="fa fa-pencil-square"></i>
+        <i class="fa fa-pencil-square"></i>
-	</a>
+    </a>
 </div>
 
 <div class="modal fade" id="setProgramModal" tabindex="-1" role="dialog" aria-labelledby="setProgramModalLabel" aria-hidden="true">
-	<div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-lg" role="document">
-		<div class="modal-content">
+        <div class="modal-content">
-			<div class="modal-header">
+            <div class="modal-header">
-				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
+                    <span aria-hidden="true">&times;</span>
-				</button>
+                </button>
-			</div>
+            </div>
-			<div class="modal-body">
+            <form method="post">
+
+                <input type="hidden" name="redirectParams" value="ok=program#program">
+
+                <div class="modal-body">
 
 
-				<table>
+                    <table class="table">
-					<thead>
+                        <thead>
-					<tr>
+                        <tr>
-						<th>Čas</th>
+                            <th></th>
-						<th>Ikona</th>
+                            <th>Čas</th>
-						<th>Název události</th>
+                            <th>Ikona</th>
-						<th>
+                            <th>Název události</th>
-						</th>
+                            <th></th>
-					</tr>
+                        </tr>
-					</thead>
+                        </thead>
-					<tbody class="template-container">
+                        <tbody class="template-container draggable-container">
-					<tr class="template">
-						<td><input type="text" class="form-control time" name="time[]" placeholder="11:00"></td>
-						<td class="text-center">
 
-							<a href="javascript:void(0);" class="js-set-icon-program">
+                        <% for(var i in program) { %>
-								<input type="hidden" name="icon[]" value="heart">
+                            <tr class="template draggable template-container__item">
-								<i class="fa fa-2x fa-heart"></i>
+                                <td>
-							</a>
+                                    <i class="fa fa-ellipsis-v sort-handle"></i>
+                                </td>
+                                <td style="position: relative">
+                                    <input type="text" class="form-control time select-time" size="4" name="program[<%= i %>][time][]" value="<%= program[i]['time'] %>" placeholder="11:00">
+                                </td>
+                                <td class="text-center">
 
-						</td>
+                                    <a href="javascript:void(0);" class="js-set-icon-program">
-						<td><input type="text" class="form-control program-description" name="description[]"></td>
+                                        <input type="hidden" name="program[<%= i %>][icon][]" value="<%= program[i]['icon'] %>">
-						<td><a href="javascript:void(0);" class="js-remove-program" hidden><i class="fa fa-trash"></i></a></td>
+                                        <i class="fa fa-2x fa-<%= program[i]['icon'] %>"></i>
-					</tr>
+                                    </a>
-					</tbody>
+
-					<tfoot>
+                                </td>
-					<tr>
+                                <td>
-						<td colspan="4">
+                                    <input type="text" class="form-control program-description" name="program[<%= i %>][title][]" value="<%= program[i]['title'] %>">
-							<a href="javascript:void(0);" class="js-add-program" data-template-container=".template-container" data-template=".template"><i class="fa fa-plus"></i></a>
+                                </td>
-						</td>
+                                <td>
-					</tr>
+                                    <a href="javascript:void(0);" class="js-remove-program"><i class="fa fa-trash"></i></a>
-					</tfoot>
+                                </td>
-				</table>
+                            </tr>
+
+                        <% } %>
+
+                        </tbody>
+                        <tfoot>
+                        <tr>
+                            <td colspan="4">
+                                <a href="javascript:void(0);" class="btn btn-outline-secondary js-add-program" data-template-container=".template-container" data-template=".template"><i class="fa fa-plus"></i> Přidat akci</a>
+
+                                <a href="javascript:void(0);" class="btn btn-outline-secondary js-sort-events" style="display: none" data-template-container=".template-container" data-template=".template"><i class="fa fa-sort-numeric-asc"></i> Seřadit akce chronologicky</a>
+                            </td>
+                        </tr>
+                        </tfoot>
+                    </table>
 
 
+                </div>
 
 
-
+                <div class="modal-footer">
-
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
-			</div>
+                    <button type="submit" class="btn btn-primary">Uložit
-
+                    </button>
-
+                </div>
-			<div class="modal-footer">
+            </form>
-				<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
+        </div>
-				<button type="button" class="btn btn-primary" data-dismiss="modal">Uložit
+    </div>
-				</button>
-			</div>
-		</div>
-	</div>
 </div>
 
-
 <div class="modal fade" id="setIconProgramModal" tabindex="-1" role="dialog" aria-labelledby="setIconProgramModal" aria-hidden="true">
-	<div class="modal-dialog" role="document">
+    <div class="modal-dialog" role="document">
-		<div class="modal-content">
+        <div class="modal-content">
-			<div class="modal-body">
+            <div class="modal-body">
 
-				<a href="javascript:void(0);" data-icon="gear" class="js-choose-icon"><i class="fa fa-2x fa-gear"></i></a>
+                <% var icons = ['gear', 'home', 'automobile', 'bell', 'bullhorn', 'child', 'coffee', 'diamond', 'film', 'camera',
-				<a href="javascript:void(0);" data-icon="dashboard" class="js-choose-icon"><i class="fa fa-2x fa-dashboard"></i></a>
+                    'camera-retro', 'fire', 'birthday-cake', 'heart', 'image', 'map', 'map-marker', 'map-o',
-				<a href="javascript:void(0);" data-icon="home" class="js-choose-icon"><i class="fa fa-2x fa-home"></i></a>
+                    'motorcycle', 'plane', 'road', 'cutlery', 'paint-brush', 'gift', 'glass', 'star', 'star-o'
+                ] %>
 
-			</div>
+                <% for (var i in icons) { %>
-		</div>
+
-		</div>
+                    <a href="javascript:void(0);" data-icon="<%= icons[i] %>" class="js-choose-icon"><i class="fa fa-3x fa-<%= icons[i] %>"></i></a>
-		</div>
+
+                <% } %>
+
+            </div>
+        </div>
+    </div>
+</div>

src/views/partials/editor/modals/setAboutUs.ejs

@@ -13,15 +13,21 @@
 					<span aria-hidden="true">&times;</span>
 				</button>
 			</div>
+            <form method="post">
+
+                <input type="hidden" name="redirectParams" value="ok=aboutUs#aboutUs">
+
 			<div class="modal-body">
-				<textarea class="wysiwyg" name="aboutUs"></textarea>
+				<textarea class="wysiwyg" name="aboutUs"><%= aboutUs %></textarea>
 			</div>
 
 			<div class="modal-footer">
 				<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
-				<button type="button" class="btn btn-primary" data-dismiss="modal">Uložit
+				<button type="submit" class="btn btn-primary">Uložit</button>
-				</button>
 			</div>
+
+            </form>
+
 		</div>
 	</div>
 </div>

src/views/partials/editor/modals/setTitlePhoto.ejs

@@ -8,6 +8,10 @@
 					<span aria-hidden="true">&times;</span>
 				</button>
 			</div>
+            <form method="post">
+
+                <input type="hidden" name="redirectParams" value="ok=titlePhoto">
+
 			<div class="modal-body">
 				<div class="form-group">
 					<label>Vybrat obrázek</label>
@@ -23,8 +27,9 @@
 			</div>
 			<div class="modal-footer">
 				<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
-				<button type="button" class="btn btn-primary" data-dismiss="modal">Nastavit</button>
+				<button type="submit" class="btn btn-primary">Nastavit</button>
 			</div>
+            </form>
 		</div>
 	</div>
 </div>

src/views/partials/editor/modals/uploadPhoto.ejs

@@ -1,54 +1,69 @@
 <div class="modal fade" id="newPhotoModal" tabindex="-1" role="dialog" aria-labelledby="newPhotoModalLabel" aria-hidden="true">
-	<div class="modal-dialog" role="document">
+    <div class="modal-dialog" role="document">
-		<div class="modal-content">
+        <div class="modal-content">
-			<div class="modal-header">
+            <div class="modal-header">
-				<h5 class="modal-title" id="newGalleryModalLabel">Nahrát fotografii</h5>
+                <h5 class="modal-title">Nahrát fotografii</h5>
-				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
+                    <span aria-hidden="true">&times;</span>
-				</button>
+                </button>
-			</div>
+            </div>
-			<div class="modal-body">
 
-				<table>
+            <form method="post" class="js-upload">
-					<thead>
-					<tr>
-						<th>Výběr fotografií</th>
-						<th>Album</th>
-						<th>
-						</th>
-					</tr>
-					</thead>
-					<tbody class="template-container">
-					<tr class="template">
-						<td><input type="file" multiple name="photos[]"></td>
-						<td>
 
-							<select name="album" class="form-control">
+                <input type="hidden" name="redirectParams" value="ok=upload">
-								<% for (var i = 0; i < 6; i++) { %>
-									<option value="<%= i %>">Album <%= i %></option>
-								<% } %>
-							</select>
 
-						</td>
+                <div class="modal-body">
-						<td><a href="javascript:void(0);" class="js-remove-program btn btn-outline-primary" hidden><i class="fa fa-trash"></i></a></td>
-					</tr>
-					</tbody>
-					<tfoot>
-					<tr>
-						<td colspan="4">
-							<a href="javascript:void(0);" class="js-add-program btn btn-outline-primary" data-template-container=".template-container" data-template=".template"><i class="fa fa-plus"></i></a>
-						</td>
-					</tr>
-					</tfoot>
-				</table>
 
-			</div>
+                    <table>
+                        <thead>
+                        <tr>
+                            <th>Výběr fotografií</th>
+                            <% if (typeof hideAlbum === 'undefined' || !hideAlbum) { %>
+                                <th>Album</th>
+                            <% } %>
+                            <th></th>
+                        </tr>
+                        </thead>
+                        <tbody class="template-container">
+                        <tr class="template">
+                            <td><input type="file" accept="image/*" multiple required name="photos[]"></td>
+                            <% if (typeof hideAlbum === 'undefined' || !hideAlbum) { %>
+                                <td>
 
-			<div class="modal-footer">
+                                    <select name="album" class="form-control">
-				<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
+                                        <% for (var i = 0; i < 6; i++) { %>
-				<button type="button" class="btn btn-primary" data-dismiss="modal">Nahrát
+                                            <option value="<%= i %>">Album <%= i %></option>
-				</button>
+                                        <% } %>
-			</div>
+                                    </select>
-		</div>
+                                </td>
-	</div>
+                            <% } %>
+                            <td>
+                                <a href="javascript:void(0);" class="js-remove-program btn btn-outline-primary" hidden><i class="fa fa-trash"></i></a>
+                            </td>
+                        </tr>
+                        </tbody>
+                        <% if (typeof hideAlbum === 'undefined' || !hideAlbum) { %>
+
+                            <tfoot>
+                            <tr>
+                                <td colspan="4">
+                                    <a href="javascript:void(0);" class="js-add-program btn btn-outline-primary" data-template-container=".template-container" data-template=".template"><i class="fa fa-plus"></i></a>
+                                </td>
+                            </tr>
+                            </tfoot>
+                        <% } %>
+
+                    </table>
+
+                </div>
+
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
+                    <button type="submit" class="btn btn-primary">Nahrát
+                    </button>
+                </div>
+            </form>
+
+        </div>
+    </div>
 </div>

src/views/partials/notification.ejs

@@ -0,0 +1,14 @@
+<% if (typeof queryString.ok !== "undefined" && queryString.ok == parameter) { %>
+
+    <div class="text-success alert alert-success js-notification" style="position: absolute; width: 50%; left: 25%; top: 0; z-index: 9999">
+        <i class="fa fa-check"></i>
+        <% if (typeof notificationText === 'undefined') { %>
+
+            Úspěšně uloženo
+
+        <% } else { %>
+            <%= notificationText %>
+        <% } %>
+    </div>
+
+<% } %>

src/views/partials/weddingInfo.ejs

@@ -1,17 +1,17 @@
 <div class="row">
 	<div class="col-md-4">
-		<h2>Kdy?</h2>
+		<h3>Kdy?</h3>
-		<input type="text" class="form-control select-date">
+		<input type="text" class="form-control select-date" name="wedding[when]" value="<%= wedding.when%>">
 	</div>
 	<div class="col-md-4">
-		<h2>Kde?</h2>
+		<h3>Kde?</h3>
 
-		<input type="text" id="map-input" class="form-control" />
+		<input type="text" id="map-input" class="form-control" name="wedding[where]" value="<%= wedding.where%>" />
 
 	</div>
 	<div class="col-md-4">
-		<h2>V kolik?</h2>
+		<h3>V kolik?</h3>
-		<input type="text" class="form-control select-time">
+		<input type="text" class="form-control select-time" name="wedding[at]" value="<%= wedding.at%>">
 	</div>
 </div>