cripi-javascript · IrinaGr · Nov 28, 2012 · Nov 28, 2012 · Dec 2, 2012 · azproduction
diff --git a/Calendar.html b/Calendar.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Календарь</title>
+    <link rel="stylesheet" type="text/css" href="choose.css">
+    <script type="text/javascript" src="Model.js"></script>
+    <script type="text/javascript" src="Collection.js"></script>
+    <script type="text/javascript" src="Event.js"></script>
+    <script type="text/javascript" src="Events.js"></script>
+    <script type="text/javascript" src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>
+    <script type="text/javascript" src="jquery.tmpl.js"></script>
+    <script type="text/javascript" src="es5-shim.js"></script>
+    <script type="text/javascript" src="CreateCalendar.js"></script>
+</head>
+
+<body>
+<div>
+    <h3>Фильтрация текущей коллекции </h3>
+    <div>
+        <label><input type="checkbox" name="filter" class="filter1"/>Выбрать последущие события</label>
+        <label><input type="checkbox" name="filter" class="filter2"/>Выбрать предыдущие события</label>
+        <div>Сортировать по</div>
+        <label><input type="radio" name = "sort" value = "start"/>Началу</label>
+        <label><input type="radio" name = "sort" value = "length"/>Длительности</label>
+        <label><input type="radio" name = "sort" value = "rating"/>Рейтингу</label>    
+    </div>
+</div>
+<hr/>
+<form class = "Create_Event">
+
+    <label>Название события
+        <input type="text" value="Новое событие" class = "New_Event" autofocus/>
+    </label>
+    <br>
+    <label>Дата начала:
+        <input type="date" class = "start_date"/>
+    </label>
+    <br>
+    <label>Время начала:
+        <input type="time" class = "start_time" />
+    </label>
+    <br>
+    <label>Дата окончания:
+        <input type="date" class = "end_date" />
+    </label>
+    <br>
+    <label>Время окончания:
+        <input type="time" class = "end_time" />
+    </label>
+    <br>
+    <label>Рейтинг
+        <select class = "rating_event">
+            <option>1 *</option>
+            <option>2 *</option>
+            <option>3 *</option>
+            <option>4 *</option>
+            <option>5 *</option>            
+        </select>
+    </label>
+    <br>
+    <label>Место
+        <input type="text" class = "plase_event"/>
+    </label>
+    <br>
+    <label>Комментарий
+        <textarea class = "comment_event"></textarea>
+    </label>
+    <br>
+    <label>Ссылка
+        <input type="url" class = "link_event"/>
+    </label>    
+    <br>
+    <input class="add_event" type="button" value="Добавить событие"/>
+</form>
+<hr/>
+<h3> Текущее состояние коллекции </h3>
+</body>
+</html>
diff --git a/Collection.js b/Collection.js
@@ -0,0 +1,67 @@
+/*jslint plusplus: true, browser: true, devel: true */
+// абстрактная коллекция Collection, представляющая из себя набор объектов Model
+/**
+* @constructor
+* @param {Object} items
+**/
+var Collection = function (items) {
+    "use strict";
+    this.items = [];
+    var keyName;
+    for (keyName in items) {
+        if (items.hasOwnProperty(keyName)) {
+            this.items.push(items[keyName]);
+        }
+    }
+};
+
+/**
+ * @param {Model} model
+ *
+ * @return {Collection}
+ */
+Collection.prototype.add = function (model) {
+    "use strict";
+    this.items.push(model);
+};
+
+/**
+ * @param {Function} selector
+ *
+ * @example
+ *    new Collection().filter(function (item) {
+ *        return item.get('attendee').indexOf("me") !== -1;
+ *    });
+ * @return {Collection}
+ */
+Collection.prototype.filter = function (selector) {
+    "use strict";
+    return new Collection(this.items.filter(selector));
+};
+/**
+ * @param {String} fieldName    параметр, по которому происходит сотрировка
+ * @return {Collection}
+ */
+Collection.prototype.sortBy = function (fieldName) {
+    "use strict";
+    var items;
+    if (fieldName === "start") { // сортировка по началу события
+        items = this.items.sort(function (Event1, Event2) {
+            return Event1.start - Event2.start;
+        });
+    }
+    if (fieldName === "length") {//сортировка по длине события
+        items = this.items.sort(function (Event1, Event2) {
+            return (Event1.end - Event1.start) - (Event2.end - Event2.start);
+        });
+    }
+    if (fieldName === "rating") {//сортировка по рейтингу события
+        items = this.items.sort(function (Event1, Event2) {
+            return Event1.rating - Event2.rating;
+        }).reverse();
+    }
+    if (fieldName === "") {
+        items = this.items;
+    }
+    return new Collection(items);
+};
diff --git a/CreateCalendar.js b/CreateCalendar.js
@@ -0,0 +1,79 @@
+/*jslint plusplus: true, browser: true, devel: true */
+var currentEvents = new Events();
+function WriteCalendar() {
+    "use strict";
+    var filterEvents = currentEvents,
+        $filter1,
+        $filter2,
+        $sort,
+        bool,
+        s,
+        res;
+
+    $filter1 = $(".filter1").prop("checked");
+    $filter2 = $(".filter2").prop("checked");
+    bool = false; // флажок. если =true, выдаем отфильтрованную коллекцию. иначе - всю.
+    if ($filter1 === true) {
+        filterEvents = currentEvents.findFutureEvents();
+        bool = !bool;
+    }
+    if ($filter2 === true) {
+        filterEvents = currentEvents.findPastEvents();
+        bool = !bool;
+    }
+
+    s = "";
+    $sort = $('[name="sort"]');
+    $sort.each(function (index, element) {
+        if ($(element).prop("checked") === true) {
+            s = $(element).val();
+        }
+    });
+
+    if (bool) {
+        res = new Events(filterEvents.sortBy(s).items);
+    } else {
+        res = new Events(currentEvents.sortBy(s).items);
+    }
+    res.write();
+}
+
+function CreateCalendar() {
+    "use strict";
+    var $s = $(".start_date").val(),// строка даты 
+        $st = $(".start_time").val(), // строка времени
+        startEv = $s + "T" + $st + ":00",
+        endEv,
+        element;
+
+    $s = $(".end_date").val();
+    $st = $(".end_time").val();
+    endEv = $s + "T" + $st + ":00";
+    element = new Event({
+        start: new Date(startEv),
+        end:  new Date(endEv),
+        name: $(".New_Event").val(),
+        place: $(".plase_event").val(),
+        rating: parseFloat($(".rating_event").val().charAt(0)),
+        comment: $(".comment_event").val(),
+        link: $(".link_event").val()
+    });
+    element.validate();
+    currentEvents.add(element);
+
+    WriteCalendar();
+}
+$(document).ready(function () {
+    "use strict";
+    var $button = $(".add_event"),
+        $filter = $('[name="filter"]'),
+        $sort = $('[name="sort"]'),
+        i;
+    $button.click(CreateCalendar);
+    $filter.each(function (index, element) {
+        $(element).change(WriteCalendar);
+    });
+    $sort.each(function (index, element) {
+        $(element).change(WriteCalendar);
+    });
+});
diff --git a/Event.js b/Event.js
@@ -0,0 +1,70 @@
+/*jslint plusplus: true, browser: true, devel: true */
+
+function datatype(data) {// возвращает true, если data имеет тип дата и она корректна
+    "use strict";
+    if (typeof data === 'undefined') {
+        return false;
+    }
+    if (!data.getTime) {
+        return false;
+    }
+    if ('Invalid Date' === data) {
+        return false;
+    }
+    return true;
+}
+
+function ratingtype(rating) {// возвращает true, если rating - число от 0 до 5
+    "use strict";
+    if (typeof rating !== 'number') {
+        return false;
+    }
+    if (rating > 5 || rating < 0) {
+        return false;
+    }
+    return true;
+}
+
+function inherits(Constructor, SuperConstructor) {
+    "use strict";
+    var F = function () {};
+
+    F.prototype = SuperConstructor.prototype;
+
+    Constructor.prototype = new F();
+}
+
+
+// наследуем от Абстракнтого конструктора Model объект Event
+var Event = function (data) {
+    "use strict";
+    Model.apply(this, arguments);
+};
+inherits(Event, Model);
+
+Event.prototype.validate = function () {//проверяет корректность переданных данных.
+    "use strict";
+    if (!datatype(this.start)) {
+        throw new Error(this.start + " не является датой!");
+    }
+    if (!datatype(this.end)) {
+        throw new Error(this.end + " не является датой!");
+    }
+    if (this.start.getTime() - this.end.getTime() > 0) {
+        throw new Error("некорректное событие: не может закончиться раньше, чем начаться!!!");
+    }
+    if (!ratingtype(this.rating)) {
+        throw new Error("введите рейтинг от 0 до 5");
+    }
+};
+
+Event.prototype.createSection = function () {
+    "use strict";
+    var el,
+        markup = "<p>Событие: ${Name}</p><p>Начало: ${Start}</p><p>Конец: ${End}</p><p>Продолжительность: ${Length}</p><p>Рейтинг: ${Rating}</p><p>Место: ${Place}</p><p>Комментарий: ${Comment}</p><p>Сcылка: ${Link}</p><br>",
+        event_temp = [{Name: this.name, Start: this.start, End: this.end, Length: hours(this.end - this.start), Rating: this.rating, Place: this.place, Comment: this.comment, Link: this.link}];
+    el = document.createElement('section');
+    $.template("eventTemplate", markup);
+    $.tmpl("eventTemplate", event_temp).appendTo(el);
+    return el;
+};
diff --git a/Events.js b/Events.js
@@ -0,0 +1,94 @@
+/*jslint plusplus: true, browser: true, devel: true */
+
+
+function getRandomInt(min, max) {//Случайное целое число  между min и max
+    "use strict";
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+var today = new Date();
+
+function addDay(n) {// прибавляет к текущей дате n дней
+    "use strict";
+    return new Date(today.getTime() + (86400000 * n));
+}
+function nDay(n) {// возвращает n-ый день от текущей даты в 00часов 00минут
+    "use strict";
+    var Day, a, b;
+    Day = addDay(n);
+    a = Day.getTime();
+    b = Day.getMilliseconds() + (Day.getHours() * 3600000) + (Day.getMinutes() * 60000) + (Day.getSeconds() * 1000);
+    return new Date(a - b);
+}
+function hours(milis) {// переводит миллисекунда в часы. Возвращает строку
+    "use strict";
+    var hour, minute, s;
+    hour = Math.floor(milis / 3600000);
+    minute = Math.floor((milis - (hour * 3600000)) / 60000);
+    s = hour + "ч " + minute + "мин";
+    return s;
+}
+var week = addDay(7);
+var maxdate = addDay(31);
+var mindate = addDay(-31);
+
+
+// наследуем коллекцию событий Events от абстрактной коллекции Collection
+var Events = function (items) {
+    "use strict";
+    Collection.apply(this, arguments);
+};
+inherits(Events, Collection);
+
+Events.prototype.write = function () {//выводит на экран все элементы коллекции
+    "use strict";
+
+    $("section").remove();
+
+    var $fragment = $('<section />'); // фрагмент новых элементов
+    this.items.forEach(function (NewEvent) {
+        $fragment.append(NewEvent.createSection());
+    });
+    $fragment.appendTo(document.body);
+};
+
+/**
+ * показывает все будующие события
+ * @return {Events}
+ */
+Events.prototype.findFutureEvents = function () {
+    "use strict";
+    return new Events((this.filter(function (NewEvent) {return (NewEvent.start > today); })).items);
+};
+/**
+ * показывает все прошедшие события
+ * @return {Events}
+ */
+Events.prototype.findPastEvents = function () {
+    "use strict";
+    return new Events((this.filter(function (NewEvent) {return (NewEvent.start < today); })).items);
+};
+/**
+ * сортировка по началу события
+ * @return {Events}
+ */
+Events.prototype.sortByStart = function () {
+    "use strict";
+    return new Events((this.sortBy("start")).items);
+};
+/**
+ * сортировка по продолжительности события
+ * @return {Events}
+ */
+Events.prototype.sortByLength = function () {
+    "use strict";
+    return new Events((this.sortBy("length")).items);
+};
+/**
+ * сортировка по рейтингу события
+ * @return {Events}
+ */
+Events.prototype.sortByRating = function () {
+    "use strict";
+    return new Events((this.sortBy("rating")).items);
+};