v0.0.1

Разработка:
- БД скрипт с начальными данными
- вывод списка номеров телефонов по группам

js/message.js

@@ -0,0 +1,100 @@
+class Message {
+    timer;
+
+    constructor() {
+        this.div = $('<div id="div-message"></div>');
+        this.div.css({
+            "position": "absolute",
+            "top": "10px",
+            "right": "20px",
+            "z-index": "1000"
+        });
+
+        $('body').append(this.div);
+    }
+
+    success(message, delay = 6000) {
+        this.print(message, delay, '#52b818', '#bffdc0');
+    }
+
+    warning(message, delay = 6000) {
+        this.print(message, delay, '#b8ae18', '#f8fdbf');
+    }
+
+    error(message, delay = 6000) {
+        this.print(message, delay, '#b96161', '#fddede');
+    }
+
+    print = function(message, delay, border, background) {
+        if (delay < 6000) delay = 6000;
+        let Timer = function(callback, delay) {
+            let timerId, start, remaining = delay;
+        
+            this.pause = function() {
+                clearTimeout(timerId);
+                remaining -= new Date() - start;
+            };
+        
+            this.resume = function() {
+                start = new Date();
+                clearTimeout(timerId);
+                timerId = setTimeout(callback, remaining);
+            };
+        
+            this.dead = function() {
+                clearTimeout(timerId);
+            };
+        
+            this.resume();
+        }
+
+        let newMessage = $(`<div class="message">${message}</div>`);
+
+        newMessage.css({
+            "border": `1px solid ${border}`,
+            "background-color": `${background}`,
+            "color": "#333",
+            "padding": "10px 30px",
+            "text-align": "center",
+            "display": "none",
+            "margin": "10px 0 0 0",
+            "width": "350px",
+            "opacity": "1",
+            "cursor": "pointer"
+        });
+
+        newMessage.hover(function(){
+            $(this).css({
+                "opacity": "1"
+            });
+        }, function(){
+            $(this).css({
+                "opacity": "0.3"
+            });
+        });
+
+        this.div.append(newMessage);
+
+        let opacityTimeout = setTimeout(function() {
+            newMessage.fadeTo(1000, 0.3);
+        }, 2500);
+
+        newMessage.fadeIn(500).mouseenter(() => {
+            clearTimeout(opacityTimeout);
+            this.timer.pause();
+        }).mouseleave(() => {
+            this.timer.resume();
+        }).click(() => {
+            this.timer.dead();
+            newMessage.fadeOut(0, function(){
+                this.remove();
+            });
+        });
+
+        this.timer = new Timer(() => {
+            newMessage.fadeOut(500, function(){
+                this.remove();
+            });
+        }, delay);
+    }
+}

js/script.js

@@ -0,0 +1,90 @@
+$(document).ready(function () {
+    message = new Message;
+
+    // (new divNotFoundNumbers).push("Загрузка...");
+
+    $("button").button();
+    $("#tabs").tabs();
+    // $("#accordion-numbers").accordion();
+
+    // $(".addNumber").click(() => {
+    //     numberAdd()
+    // });
+
+    $("body").fadeTo(500, 1);
+
+    // getData("Список номеров успешно загружен");
+
+    $(".search").on("input", function () {
+        // showNumbers(numbers.filter(e => e.id.includes($(this).val())))
+    }).keydown(function (e) {
+        // e.key == "Escape" && ($(this).val(""), showNumbers())
+    });
+
+    loadData();
+})
+
+async function request(query, type, queryData = {}) {
+    let response = await fetch('.', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json;charset=utf-8'
+        },
+        body: JSON.stringify({
+            ...queryData, 
+            query: query
+        })
+    });
+
+    if (!response.ok)
+        throw new Error(`Произошла неизвестаня ошибка: ${response.status}`);
+    
+    const data = await response[type]();
+    return data;
+}
+
+function isJSON(str) {
+    try {
+        return (JSON.parse(str) && !!str);
+    } catch (e) {
+        return false;
+    }
+}
+
+function loadData() {
+    request('listsgroups', 'json').then(data => {
+        data.error ? message.error(data.message) : generateListsGroups(data);
+    }).catch(error => {
+        message.error(error.message);
+    });
+}
+
+function generateListsGroups(data) {
+    let numbers = $("#tabs-numbers");
+    let group = $('<div id="accordion-numbers"></div>');
+    $(data).each((i, j) => {
+        group.append(`<h3>${j.comment}</h3><div class="group-content" data-group-name="${j.name}"></div>`);
+    });
+    numbers.append(group);
+    $("#accordion-numbers").accordion({
+        heightStyle: "content",
+        create: function( event, ui ) {
+            generateGroupNumbers(ui.panel);
+        },
+        beforeActivate: function( event, ui ) {
+            generateGroupNumbers(ui.newPanel);
+        }
+    });
+}
+
+async function generateGroupNumbers(panel) {
+    request('groupnumbers', 'text', { group: panel.data("group-name") }).then(data => {
+        if (isJSON(data) && JSON.parse(data).error)
+            message.error(JSON.parse(data).message);
+        else {
+            panel.html(data);
+        }
+    }).catch(error => {
+        message.error(error.message);
+    });
+}