cripi-javascript · NBronina · Nov 11, 2012
diff --git a/createevent.js b/createevent.js
@@ -0,0 +1,198 @@
+/*
+* function Event(collection) - создает объект
+*  @param {collection} - массив со значениями полей 
+* function create() - добавляет событие в список событий при отпревке данных из формы
+* function content() - выводит полную информацию  событии при клике на него
+* function filterAll() - функция фильтрует или сортирует события в зависимости от значений формы фильтрации
+* function all() - выводит полный список событий по нажатию на кнопку	"Вывести все события"
+* function str2date(s) - преобразует дату начала и окончания события
+* function FilterToDate(collection, flag) - возвращает предстоящие или прощедшие события в зависимости от значения flag
+* function FilterToParty(collection, flag) - возвращает события, в которых я принимаю/ не принимаю участие в зависимости от значения flag
+* function SortToDate(collection) сортирует встречи по дате 
+*/
+var hash = [];
+var collection = [];
+function Event(collection) {
+    "use strict";
+    if (typeof collection.start.value === "undefined" || collection.start.value.length === 0) {
+        alert("Дата начала встречи задана не корректно");
+	    throw new TypeError("should be date");
+    }
+    return {
+        "name": collection.name.value || "Встреча",
+        "start": collection.start.value,
+        "end": collection.end.value,
+//        "participants": collection.participants.value || {},
+//        "organizer": collection.organizer.value || {},
+        "place": collection.place.value || {},
+        "info": collection.info.value || {},
+        "reminder": collection.reminder.value || "За день до встречи",
+        "type": collection.type.value || "Работа",
+        "party": collection.party.value || "участвую"
+    };
+}
+function create() {
+    "use strict";
+    var newEvent, el;
+    newEvent = new Event(document.forms[0]);
+    el = document.createElement('div');
+    el.className = 'oneEvent';
+    el.setAttribute('id', 'oneEvent' + hash.length);
+    el.textContent =  newEvent.start + "-" + newEvent.end + " " + newEvent.name;
+    spisok.appendChild(el); 
+    document.getElementById('oneEvent' + hash.length).addEventListener('click', content, true);
+    hash[hash.length] = newEvent;
+}
+function content() {
+    while (contekst.childNodes.length > 0) {
+		contekst.removeChild(contekst.childNodes[0]);
+    }
+    var newEvent = new Event(document.forms[0]);
+	var el = document.getElementById('meeting').cloneNode(true);
+	el.className = 'elements';
+	var list = el.getElementsByTagName('label');
+	for (i=0; i<list.length; i++) {
+        var n = list[i].childNodes.length;
+        while (n > 0) {
+            if (list[i].childNodes[n - 1].nodeType === 1) {
+                list[i].removeChild(list[i].childNodes[n - 1]);
+            }
+            n = n - 1;
+        }
+        for (k in newEvent) {
+            if (this.className === 'oneEventCollection') {
+                if (k === document.forms[0].elements[i].name && typeof newEvent[k] === 'string') {
+                    list[i].textContent = list[i].textContent + " " + collection[this.id.charAt(this.id.length - 1)][k];
+                }
+                if (k === document.forms[0].elements[i].name && typeof newEvent[k] !== 'string') {
+                    list[i].textContent = list[i].textContent + " " + collection[this.id.charAt(this.id.length - 1)][k].value;
+                }
+            } else {
+                if (k === document.forms[0].elements[i].name && typeof newEvent[k] === 'string') {
+                    list[i].textContent = list[i].textContent + " " + hash[this.id.charAt(this.id.length - 1)][k];
+                }
+                if (k === document.forms[0].elements[i].name && typeof newEvent[k] !== 'string') {
+                    list[i].textContent = list[i].textContent + " " + hash[this.id.charAt(this.id.length - 1)][k].value;
+                }
+            }
+        }
+    }
+    console.log(el.getElementsByTagName('input').length);
+    el.removeChild(el.childNodes[el.childNodes.length - 2]);
+    contekst.appendChild(el);
+}
+window.onload = function () {
+    "use strict";
+    document.getElementById('submitEvent').addEventListener('click', create, true);
+    document.getElementById('sort').addEventListener('click', filterAll, true);
+    document.getElementById('all').addEventListener('click', all, true);
+}
+function filterAll() {
+    "use strict";
+    var collection2 = [];
+    while (spisok.childNodes.length > 0) {
+        spisok.removeChild(spisok.childNodes[0]);
+    }
+    if (document.forms[1].elements[0].value === "предстоящие") {
+        collection2 = new FilterToDate(hash, 1);
+    }
+    if (document.forms[1].elements[0].value === "прошедшие") {
+        collection2 = new FilterToDate(hash, -1);
+    }
+    if (document.forms[1].elements[0].value === "я не участвую") {
+        collection2 = new FilterToParty(hash, -1);
+    }
+    if (document.forms[1].elements[0].value === "я участвую") {
+        collection2 = new FilterToParty(hash, 1);
+    }
+
+    if (document.forms[1].elements[1].value === "предстоящие") {
+        collection = new FilterToDate(collection2, 1);
+    }
+    if (document.forms[1].elements[1].value === "прошедшие") {
+        collection = new FilterToDate(collection2, -1);
+    }
+    if (document.forms[1].elements[1].value === "я не участвую") {
+        collection = new FilterToParty(collection2, -1);
+    }
+    if (document.forms[1].elements[1].value === "я участвую") {
+        collection = new FilterToParty(collection2, 1);
+    }
+    if (document.forms[1].elements[1].value === "сортировать по дате") {
+        collection = [].concat(new SortToDate(collection2));
+    }
+    for (i = 0; i < collection.length; i ++) {
+        var el = document.createElement('div');
+        el.className = 'oneEventCollection';
+        el.setAttribute('id', 'oneEvent' + i);
+        el.textContent =  collection[i].start + "-" + collection[i].end + " " + collection[i].name;
+        spisok.appendChild(el);
+        document.getElementById('oneEvent' + i).addEventListener('click', content, true);
+    }
+}
+
+function all() {
+    "use strict";
+    while (spisok.childNodes.length > 0) {
+       spisok.removeChild(spisok.childNodes[0]);
+    }
+    for (i = 0; i < hash.length; i++) {
+        var el = document.createElement('div');
+        el.className = 'oneEvent';
+        el.setAttribute('id', 'oneEvent' + i);
+        el.textContent = hash[i].start + "-" + hash[i].end + " " + hash[i].name;
+        spisok.appendChild(el);
+        document.getElementById('oneEvent' + i).addEventListener('click', content, true);
+    }
+}
+
+// функции фильтрации
+function str2date(s) {
+    "use strict";
+    var dateParts = s.split('.');
+    if (typeof dateParts[2] === 'string') {
+        return new Date(dateParts[2], dateParts[1], dateParts[0]);
+    }
+    if (typeof dateParts[2] === 'undefined') {
+        dateParts = s.split('-');
+        return new Date(dateParts[0], dateParts[1], dateParts[2]);
+    }
+}
+function FilterToDate(collection, flag) {
+    "use strict";
+    var result;
+    if (flag === -1) {
+        result = collection.filter(function (collection) {
+	        var s = str2date(collection.start);
+            return s < new Date();
+		});
+	} else {
+        result = collection.filter(function (collection) {
+	        var s = str2date(collection.start);
+            return s >= new Date();
+        });
+    }
+    return result;
+}
+function FilterToParty(collection, flag) {
+    "use strict";
+    var result;
+    if (flag === -1) {
+        result = collection.filter(function (collection) {
+            return collection.party === "нет";
+	    });
+    } else {
+        result = collection.filter(function (collection) {
+	        return collection.party === "да";
+        });
+    }
+    return result;
+}
+function SortToDate(collection) {
+    "use strict";
+    collection.sort(function (a, b) {
+        return str2date(a.start) > str2date(b.start) ? 1 : -1;
+    });
+    return collection;
+}
+
diff --git a/forma.html b/forma.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
+ <head> 
+  <title>Вывод информации о событиях</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <link rel="stylesheet" type="text/css" href="style.css" />
+  <script src="createevent.js" type="text/javascript"></script>
+	</head> 
+	<body>
+  <div class="l-level">
+   <div class="t-block">Создать новое событие</div>
+   <form id="meeting" class="meeting">
+    <label>Название встречи:<input name="name" type="text"  size="40"></label> 
+    <label>Начало встречи <input name="start" type="date" size="40"/></label>    
+    <label>Окончание встречи <input name="end" type="date" size="40"/></label>
+<!--	<div class="party"><p>Список участников</p>
+      <label>Имя <input type="text" size="40"/></label>
+      <label>Телефон <input type="text" size="40"/></label>
+						<input class="click" type="submit" value="Добавить участника"/>
+     </div>
+					<div class="organize"><p>Организатор</p>
+					 <label>Имя <input type="text" size="40"/></label>
+					 <label>Телефон <input type="text" size="40"/></label>
+     </div> -->
+     <label>Место встречи <input name="place" type="text" size="40"/></label>
+     <label>Дополнительная информация о встречи<textarea name="info" class="info"></textarea></label>
+					<label>Напомнить о встречи
+       <select name="reminder">
+        <option> За неделю
+        <option selected="selected"> За день
+        <option> За час
+        <option> За 5 минут
+       </select>
+      </label>
+      <label>Тип встречи
+       <select name="type">
+        <option> Отдых
+        <option> Работа
+        <option> Другое
+       </select>
+      </label>
+      <label> Участвую
+       <select name="party">
+        <option> да
+        <option> нет
+       </select> 
+      </label>
+      <input id="submitEvent" class="b-submit" type="button" value="Создать событие"/>
+   </form>
+  </div>
+  <div class="l-spisok" id="l-spisok">
+   <form>
+    <label> Фильтровать
+      <select name="filter1">
+       <option> я участвую
+       <option> я не участвую
+       <option> предстоящие
+       <option> прошедшие
+      </select> 
+    </label>
+    <label> 
+     <select name="filter2">
+      <option> я участвую
+      <option> я не участвую
+      <option> предстоящие
+      <option> прошедшие
+      <option> сортировать по дате
+     </select> 
+    </label>	
+    <input id="sort" type="button" value="Выбрать"/>
+    <input id="all" type="button" value="Вывести все события" style="display:block"/>
+   </form>
+   <div class="spisok" id="spisok"></div>
+  </div>
+  <div class="contekst" id="contekst"></div>
+ </body> 
+</html> 
diff --git a/style.css b/style.css
@@ -0,0 +1,36 @@
+.l-level{
+							width: 500px;
+						//	margin: 0 auto;
+							padding: 20px;
+							font: italic 14px Georgia;
+						 float: right;
+						}
+						.t-block{
+						 font-size: 1.3em;
+		     font-style: italic;
+						}
+							.meeting{ position: relative; width: 500px; padding: 10px;}
+							.meeting label {display: block; padding-bottom: 10px; overflow: hidden;}
+							.meeting .info {display: block; width: 494px; margin: 10px 0 10px 0;}
+							.meeting input { float: right;}
+							 .party label, .organize label{
+         padding-left: 30px; 
+         }	
+								.b-submit { width: 300px; margin: 10px 100px 10px 100px;}
+							.party {overflow: hidden;} 
+							.meeting select {margin: 0 10px;}
+		.l-spisok {
+		  	padding: 20px;
+				//	width: 200px;
+					float: left;
+		}					
+		.l-spisok form{
+		 padding-bottom: 10px;
+		}
+		.oneEvent, .oneEventCollection {
+		   margin-bottom: 10px;
+					 background-color: blue;
+						padding: 5px 10px;
+		   }  
+  .contekst {overflow:hidden; padding-top: 20px;}
+		.contekst label {display: block;}