Реализовать расширяемую платформу Муром 1.2 с панелью управления 1.0.0

модули/муром.пу_1.0.0.js

@@ -0,0 +1,765 @@
+/*
+ *
+ * Внешний вид
+ *
+ */
+
+function задатьВнешнийВид()
+{
+    var вид = document.createElement("style");
+    document.head.appendChild(вид);
+    вид.innerHTML =
+`
+.муром-кнопка
+{
+    padding: 0.5em 2em 0.5em 2em;
+    margin-right: 0.5em;
+    float: right;
+    color: #222;
+    font-family: sans-serif;
+    border: 1px solid #ddd;
+    background-color: transparent;
+    cursor: pointer;
+    text-transform: uppercase;
+    -webkit-transition-duration: 0.2s; /* Safari */
+    transition-duration: 0.2s;
+}
+.муром-кнопка:hover
+{
+    border: 1px solid #222;
+}
+.муром-отступ-по-сторонам
+{
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+}
+`;
+}
+
+/*
+ *
+ * Список модулей
+ *
+ */
+
+function СписокМодулей()
+{
+    var я = this;
+
+    this.создатьИнтерфейс();
+    this.задатьВид();
+    this.выбрали = new Уведомитель();
+    this.выбрали.подписать(function(){
+        я.отобразитьВыбор();
+    });
+}
+СписокМодулей.prototype.создатьИнтерфейс = function()
+{
+    // Помещаем таблицу в div для реализации промотки.
+    this.иф = document.createElement("div");
+    this.таблица = document.createElement("table");
+    this.иф.appendChild(this.таблица);
+};
+СписокМодулей.prototype.задатьВид = function()
+{
+    this.иф.style.cssText =
+`
+overflow: auto;
+height: 18.5em;
+border: 1px solid #ddd;
+/*
+padding: 0.5em;
+margin: 0.5em;
+*/
+`;
+    this.таблица.style.cssText =
+`
+color: #666666;
+font-family: sans-serif;
+cursor: default;
+border-collapse: collapse;
+`;
+};
+СписокМодулей.prototype.очистить = function()
+{
+    while (this.таблица.rows.length)
+    {
+        this.таблица.deleteRow(0);
+    };
+};
+СписокМодулей.prototype.добавитьЭлемент = function(статус, имя)
+{
+    var статусHTML = "";
+    if (статус)
+    {
+        статусHTML = "checked";
+    }
+
+    var ряд = this.таблица.insertRow();
+    var ячейка = 0;
+
+    var номер = ряд.insertCell(ячейка++);
+    номер.innerHTML = this.таблица.rows.length - 1;
+    номер.style.cssText = "padding: 0.5em;";
+
+    var вкл = ряд.insertCell(ячейка++);
+    вкл.innerHTML = `<input type="checkbox" disabled ` + статусHTML + `></input>`;
+    
+    var название = ряд.insertCell(ячейка++);
+    название.innerHTML = имя;
+    название.style.cssText = "padding: 0.5em; width: 100%;";
+};
+СписокМодулей.prototype.отобразитьСписок = function(список)
+{
+    this.очистить();
+    for (var номер in список)
+    {
+        var элемент = список[номер];
+        var статус = элемент[0];
+        var имя = элемент[1];
+        this.добавитьЭлемент(статус, имя);
+    }
+};
+СписокМодулей.prototype.улавливатьВыборЭлемента = function(номер)
+{
+    var я = this;
+    
+    var ряд = this.таблица.rows[номер]
+    ряд.onclick = function()
+    {
+        я.выборРанее = я.выбор;
+        я.выбор = номер;
+        я.выбрали.уведомить();
+    };
+};
+СписокМодулей.prototype.улавливатьВыбор = function()
+{
+    this.выборРанее = null;
+    this.выбор = null;
+    for (var номер = 0; номер < this.таблица.rows.length; ++номер)
+    {
+        this.улавливатьВыборЭлемента(номер);
+    }
+};
+СписокМодулей.prototype.отобразитьВыбор = function()
+{
+    if (this.выборРанее != null)
+    {
+        var ряд = this.таблица.rows[this.выборРанее];
+        ряд.style.backgroundColor = null;
+    }
+    var ряд = this.таблица.rows[this.выбор];
+    ряд.style.backgroundColor = "#eee";
+};
+СписокМодулей.prototype.задатьСписок = function(список)
+{
+    this.отобразитьСписок(список);
+    this.улавливатьВыбор();
+};
+СписокМодулей.prototype.выбрать = function(номер)
+{
+    var ряд = this.таблица.rows[номер];
+    ряд.scrollIntoView();
+    ряд.onclick();
+};
+СписокМодулей.prototype.обновитьЭлемент = function(номер, статус, имя)
+{
+    var ряд = this.таблица.rows[номер];
+    ряд.cells[1].childNodes[0].checked = статус;
+    ряд.cells[2].innerHTML = имя;
+};
+СписокМодулей.prototype.удалитьЭлемент = function(номер)
+{
+    var ряд = this.таблица.rows[номер];
+    ряд.parentNode.removeChild(ряд);
+}
+
+/*
+ *
+ * Тест списка модулей
+ *
+ */
+
+function ТестСпискаМодулей()
+{
+    this.создатьИнтерфейс();
+}
+ТестСпискаМодулей.prototype.создатьИнтерфейс = function()
+{
+    var я = this;
+    
+    this.иф = document.createElement("div");
+    this.список = new СписокМодулей();
+    this.иф.appendChild(this.список.иф);
+    
+    var модули = [
+        [true,  "муром.загрузка_1.0.0"],
+        [true,  "муром.uuid_1.0.0"],
+        [true,  "Уведомитель_1.0.0"],
+        [false, "uikit_3.2.0.css"],
+        [false, "uikit_3.2.0.js"],
+        [false, "ПанельУправления.UIKit"],
+        [false, "ПанельУправления_1.0.0"],
+    ];
+    
+    this.список.задатьСписок(модули);
+    this.список.выбрать(0);
+    
+    this.создатьКнопку("Выбрать последний", function(){
+        console.log("выбрать");
+        я.список.выбрать(модули.length - 1);
+    });
+    this.создатьКнопку("Обновить последний", function(){
+        я.список.обновитьЭлемент(модули.length - 1, true, "Новое имя");
+    });
+    this.создатьКнопку("Удалить последний", function(){
+        я.список.удалитьЭлемент(модули.length - 1);
+    });
+    this.создатьКнопку("Добавить", function(){
+        я.список.добавитьЭлемент(true, "Новый-599");
+        var номер = я.список.таблица.rows.length - 1;
+        я.список.улавливатьВыборЭлемента(номер);
+        я.список.выбрать(номер);
+    });
+};
+ТестСпискаМодулей.prototype.создатьКнопку = function(имя, реакция)
+{
+    var кнопка = document.createElement("button");
+    кнопка.innerHTML = имя;
+    this.иф.appendChild(кнопка);
+    кнопка.onclick = реакция;
+};
+
+/*
+ *
+ * Свойства модуля
+ *
+ */
+
+function СвойстваМодуля()
+{
+    this.создатьИнтерфейс();
+    this.изменилиНомер = new Уведомитель();
+    this.настроитьНомер();
+    this.изменилиИмя = new Уведомитель();
+    this.настроитьИмя();
+    this.изменилиСтатус = new Уведомитель();
+    this.настроитьСтатус();
+    this.удалить = new Уведомитель();
+    this.настроитьУдаление();
+}
+СвойстваМодуля.prototype.создатьИнтерфейс = function()
+{
+    this.иф = document.createElement("div");
+    this.иф.style.cssText =
+`
+border: 1px solid #ddd;
+/*
+padding: 0.5em;
+margin: 0.5em;
+*/
+color: #666666;
+font-family: sans-serif;
+`;
+    this.таблица = document.createElement("table");
+    this.иф.appendChild(this.таблица);
+};
+Object.defineProperty(СвойстваМодуля.prototype, "номер", {
+    get: function()
+    {
+        return Number(this.полеНомер.value);
+    },
+    set: function(значение)
+    {
+        this.полеНомер.value = значение;
+    }
+});
+СвойстваМодуля.prototype.настроитьНомер = function()
+{
+    var я = this;
+    
+    var ряд = this.таблица.insertRow();
+    var ячейка = 0;
+
+    var ключ = ряд.insertCell(ячейка++);
+    ключ.innerHTML = "Номер:";
+    ключ.style.cssText = "padding: 0.5em;";
+
+    var значение = ряд.insertCell(ячейка++);
+    this.полеНомер = document.createElement("input");
+    this.полеНомер.type = "number";
+    this.полеНомер.min = 0;
+    значение.style.cssText = "width: 100%; padding: 0.5em;";
+    this.полеНомер.style.cssText = "width: 100%;";
+    значение.appendChild(this.полеНомер);
+    
+    this.полеНомер.oninput = function()
+    {
+        я.изменилиНомер.уведомить();
+    };
+};
+Object.defineProperty(СвойстваМодуля.prototype, "имя", {
+    get: function()
+    {
+        return this.полеИмя.value;
+    },
+    set: function(значение)
+    {
+        this.полеИмя.value = значение;
+    }
+});
+СвойстваМодуля.prototype.настроитьИмя = function()
+{
+    var я = this;
+
+    var ряд = this.таблица.insertRow();
+    var ячейка = 0;
+
+    var ключ = ряд.insertCell(ячейка++);
+    ключ.innerHTML = "Имя:";
+    ключ.style.cssText = "padding: 0.5em;";
+
+    var значение = ряд.insertCell(ячейка++);
+    this.полеИмя = document.createElement("input");
+    значение.style.cssText = "width: 100%; padding: 0.5em;";
+    this.полеИмя.style.cssText = "width: 100%;";
+    значение.appendChild(this.полеИмя);
+
+    this.полеИмя.oninput = function()
+    {
+        я.изменилиИмя.уведомить();
+    };
+};
+Object.defineProperty(СвойстваМодуля.prototype, "статус", {
+    get: function()
+    {
+        return this.переключатель.checked;
+    },
+    set: function(значение)
+    {
+        this.переключатель.checked = значение;
+    }
+});
+СвойстваМодуля.prototype.настроитьСтатус = function()
+{
+    var я = this;
+    
+    var ряд = this.таблица.insertRow();
+    var ячейка = 0;
+    
+    var ключ = ряд.insertCell(ячейка++);
+    ключ.innerHTML = "Исполнять:";
+    ключ.style.cssText = "padding: 0.5em;";
+
+    var значение = ряд.insertCell(ячейка++);
+    this.переключатель = document.createElement("input");
+    this.переключатель.type = "checkbox";
+    this.переключатель.style.cssText = "padding: 0.5em;";
+    значение.appendChild(this.переключатель);
+
+    this.переключатель.onchange = function()
+    {
+        я.изменилиСтатус.уведомить();
+    };
+    ключ.onclick = function()
+    {
+        я.переключатель.checked = !я.переключатель.checked;
+        я.изменилиСтатус.уведомить();
+    };
+};
+СвойстваМодуля.prototype.настроитьУдаление = function()
+{
+    var я = this;
+    
+    var ряд = this.таблица.insertRow();
+    var ячейка = 0;
+
+    ряд.insertCell(ячейка++);
+    var значение = ряд.insertCell(ячейка++);
+
+    this.кнопкаУдалить = document.createElement("button");
+    this.кнопкаУдалить.innerHTML = "Удалить";
+    this.кнопкаУдалить.classList.add("муром-кнопка");
+    значение.appendChild(this.кнопкаУдалить);
+    
+    this.кнопкаУдалить.onclick = function()
+    {
+        я.удалить.уведомить();  
+    };
+};
+
+/*
+ *
+ * Тест свойства модуля
+ *
+ */
+ 
+function ТестСвойстваМодуля()
+{
+    this.создатьИнтерфейс();
+}
+ТестСвойстваМодуля.prototype.создатьИнтерфейс = function()
+{
+    var я = this;
+    
+    this.иф = document.createElement("div");
+    this.свойства = new СвойстваМодуля();
+    this.иф.appendChild(this.свойства.иф);
+
+    this.свойства.изменилиНомер.подписать(function(){
+        console.log("номер: '" + я.свойства.номер + "'");
+    });
+    this.свойства.изменилиИмя.подписать(function(){
+        console.log("имя: '" + я.свойства.имя + "'");
+    });
+    this.свойства.изменилиСтатус.подписать(function(){
+        console.log("статус: '" + я.свойства.статус + "'");
+    });
+    this.свойства.удалить.подписать(function(){
+        console.log("удалить модуль '" + я.свойства.имя + "'");
+    });
+};
+
+/*
+ *
+ * Модули
+ *
+ */
+
+function Модули()
+{
+    
+}
+Модули.prototype.свойства = function(номер)
+{
+    return murom.moduleProperties(номер);
+};
+Модули.prototype.задатьСвойства = function(номер, свойства)
+{
+    var м = муром.модули[номер];
+    м[2] = свойства;
+};
+Модули.prototype.статус = function(номер)
+{
+    return murom.moduleStatus(номер);
+};
+Модули.prototype.задатьСтатус = function(номер, статус)
+{
+    var св = this.свойства(номер);
+    св["status"] = статус;
+    this.задатьСвойства(номер, св);
+};
+Модули.prototype.задатьИмя = function(номер, имя)
+{
+    var м = муром.модули[номер];
+    м[0] = имя;
+};
+Модули.prototype.задатьНомер = function(старый, новый)
+{
+    //console.log("задать номер. '" + старый + "' -> '" + новый + "'");
+    var модуль = муром.модули[старый];
+    // Удаляем старую запись.
+    муром.модули.splice(старый, 1);
+    // Добавляем модуль в новую позицию.
+    муром.модули.splice(новый, 0, модуль);
+};
+
+/*
+ *
+ * Панель управления
+ *
+ */
+
+function ПанельУправления()
+{
+    this.модули = new Модули();
+    this.создатьОснову();
+    this.создатьСохранениеСкачиваниеДобавление();
+    this.создатьСписокМодулей();
+    this.создатьСвойстваМодуля();
+}
+ПанельУправления.prototype.создатьОбёрткуЯчейку = function()
+{
+    var обёртка = document.createElement("table");
+    обёртка.style.cssText = "width: 100%;";
+    var ряд = обёртка.insertRow();
+    var ячейка = ряд.insertCell();
+    return [обёртка, ячейка];
+};
+ПанельУправления.prototype.создатьОснову = function()
+{
+    this.иф = document.createElement("table");
+    this.иф.style.cssText = "width: 100%;";
+    var ряд = this.иф.insertRow();
+    this.лево = ряд.insertCell();
+    this.лево.style.cssText = "width: 100%;";
+    var право = ряд.insertCell();
+    право.style.cssText = "height: 100%;";
+    this.кнопки = document.createElement("table");
+    this.кнопки.style.cssText = "height: 100%;";
+    право.appendChild(this.кнопки);
+    ряд = this.иф.insertRow();
+    this.низ = ряд.insertCell();
+    this.низ.colSpan = 2;
+};
+ПанельУправления.prototype.создатьСписокМодулей = function()
+{
+    this.список = new СписокМодулей();
+    this.список.задатьСписок(this.списокМодулей());
+    var оя = this.создатьОбёрткуЯчейку();
+    this.лево.appendChild(оя[0]);
+    оя[1].appendChild(this.список.иф);
+};
+ПанельУправления.prototype.создатьСвойстваМодуля = function()
+{
+    this.свойства = new СвойстваМодуля();
+    оя = this.создатьОбёрткуЯчейку();
+    this.низ.appendChild(оя[0]);
+    оя[1].appendChild(this.свойства.иф);
+};
+ПанельУправления.prototype.списокМодулей = function()
+{
+    var список = [];
+    for (var номер in муром.модули)
+    {
+        var м = муром.модули[номер];
+        var статус = this.модули.статус(номер);
+        var имя = м[0];
+        var элемент = [статус, имя];
+        список.push(элемент);
+    }
+    
+    return список;
+};
+ПанельУправления.prototype.создатьКнопку = function(имя, уведомитель)
+{
+    var кнопка = document.createElement("button");
+    кнопка.innerHTML = имя;
+    кнопка.style.cssText = "width: 100%;";
+    кнопка.classList.add("муром-кнопка");
+    кнопка.onclick = function()
+    {
+        уведомитель.уведомить();  
+    };
+    
+    return кнопка;
+};
+ПанельУправления.prototype.создатьСохранениеСкачиваниеДобавление = function()
+{
+    var я = this;
+    
+    var ряд = this.кнопки.insertRow();
+    var ячейка = ряд.insertCell();
+    this.сохранить = new Уведомитель();
+    this.кнопкаСохранить = this.создатьКнопку("Сохранить", this.сохранить);
+    ячейка.appendChild(this.кнопкаСохранить);
+    
+    ряд = this.кнопки.insertRow();
+    ячейка = ряд.insertCell();
+    this.скачать = new Уведомитель();
+    this.кнопкаСкачать = this.создатьКнопку("Скачать", this.скачать);
+    ячейка.appendChild(this.кнопкаСкачать);
+    
+    // Пробел.
+    ряд = this.кнопки.insertRow();
+    ячейка = ряд.insertCell();
+    ячейка.style.cssText = "height: 100%;";
+
+    ряд = this.кнопки.insertRow();
+    ячейка = ряд.insertCell();
+    this.добавить = new Уведомитель();
+    this.кнопкаДобавить = this.создатьКнопку("Добавить", this.добавить);
+    ячейка.appendChild(this.кнопкаДобавить);
+};
+ПанельУправления.prototype.имяФайла = function()
+{
+    var путь = window.location.pathname;
+    var имя = путь.split("/").pop();
+    return decodeURI(имя);
+};
+
+function запуститьПУ()
+{
+    var пу = new ПанельУправления();
+    муром.пу = пу;
+    var области = муром.создатьЛевуюПравуюОбласти();
+    var по = области[1];
+    по.appendChild(пу.иф);
+    муром.создатьРедакторВЛевойОбласти();
+    var список = пу.список;
+    var свойства = пу.свойства;
+    var модули = пу.модули;
+    
+    function отобразитьКодВыбранногоМодуля()
+    {
+        var модуль = муром.модули[список.выбор];
+        var код = муром.atob(модуль[1]);
+        муром.редактор.session.setValue(код);
+    }
+    function отобразитьСвойстваВыбранногоМодуля()
+    {
+        var модуль = муром.модули[список.выбор];
+        
+        свойства.номер = список.выбор;
+        свойства.имя = модуль[0];
+        свойства.статус = пу.модули.статус(список.выбор);
+    }
+    список.выбрали.подписатьМного([
+        отобразитьКодВыбранногоМодуля,
+        отобразитьСвойстваВыбранногоМодуля,
+    ]);
+    
+    function обновитьСтатусМодуля()
+    {
+        var номер = список.выбор;
+        var имя = свойства.имя;
+        var статус = свойства.статус;
+        модули.задатьСтатус(номер, статус);
+        список.обновитьЭлемент(номер, статус, имя);
+    }
+    свойства.изменилиСтатус.подписать(обновитьСтатусМодуля);
+    
+    function обновитьИмяМодуля()
+    {
+        var номер = список.выбор;
+        var имя = свойства.имя;
+        var статус = свойства.статус;
+        модули.задатьИмя(номер, имя);
+        список.обновитьЭлемент(номер, статус, имя);
+    }
+    свойства.изменилиИмя.подписать(обновитьИмяМодуля);
+    
+    function обновитьНомерМодуля()
+    {
+        var старый = список.выбор;
+        var новый = свойства.номер;
+        if (старый == новый)
+        {
+            return;
+        }
+        if (новый > муром.модули.length - 1)
+        {
+            новый = муром.модули.length - 1;
+        }
+        модули.задатьНомер(старый, новый);
+        список.задатьСписок(пу.списокМодулей());
+        список.выбрать(новый);
+    }
+    свойства.изменилиНомер.подписать(обновитьНомерМодуля);
+    
+    function добавитьМодуль()
+    {
+        var число = Math.floor(Math.random() * Math.floor(1000));
+        var имя = "новый-" + число; 
+        var код = `console.log("НАДО Добавить код в модуль '` + имя + `'");`;
+        var модуль = [имя, муром.btoa(код)];
+        муром.модули.push(модуль);
+        var модули = пу.списокМодулей();
+        список.задатьСписок(модули);
+        список.выбрать(модули.length - 1);
+    }
+    пу.добавить.подписать(добавитьМодуль);
+    
+    function удалитьМодуль()
+    {
+        var номер = список.выбор;
+        
+        var статус = пу.модули.статус(номер);
+        if (статус)
+        {
+            alert("ОШИБКА Удалить можно лишь неисполняемый модуль");
+            return;
+        }
+        
+        // Удалить выбранный модуль.
+        муром.модули.splice(номер, 1);
+        --номер;
+        if (номер < 0)
+        {
+            номер = 0;
+        }
+        var модули = пу.списокМодулей();
+        список.задатьСписок(модули);
+        список.выбрать(номер);
+    }
+    свойства.удалить.подписать(удалитьМодуль);
+    
+    function сохранитьВыбранныйМодуль()
+    {
+        var модуль = муром.модули[список.выбор];
+        var код = муром.редактор.session.getValue();
+        модуль[1] = муром.btoa(код);
+    }
+    function сохранить()
+    {
+        пу.кнопкаСохранить.disabled = true;
+        localforage.setItem("modules", муром.модули, function(ошибка, значение){
+            пу.кнопкаСохранить.disabled = false;
+            if (ошибка)
+            {
+                console.error("Не удалось сохранить модули: '" + ошибка + "'");
+            }
+        });
+    }
+    пу.сохранить.подписатьМного([
+        сохранитьВыбранныйМодуль,
+        сохранить,
+    ]);
+
+    // How to create a file in memory for user to download, but not through server?
+    // https://stackoverflow.com/a/18197341
+    function скачать()
+    {
+        var содержимое = муром.файл.начало;
+        for (var номер in муром.модули)
+        {
+            var модуль = муром.модули[номер];
+            var имя = модуль[0];
+            var код64 = модуль[1];
+            var свойства = модули.свойства(номер);
+            содержимое +=
+`
+
+[
+"` + имя + `",
+"` + код64 + `",
+`
++
+JSON.stringify(свойства)
++
+`
+],
+`
+;
+        }
+        содержимое += муром.файл.конец;
+        содержимое = муром.btoa(содержимое);
+    
+        var ссыль = document.createElement("a");
+        ссыль.setAttribute("href", "data:text/html;charset=utf-8;base64," + содержимое);
+        var имя = пу.имяФайла();
+        ссыль.setAttribute("download", имя);
+        ссыль.style.display = "none";
+        document.body.appendChild(ссыль);
+        ссыль.click();
+        document.body.removeChild(ссыль);
+    }
+    пу.скачать.подписать(скачать);
+
+    // При запуске.
+    список.выбрать(0);
+}
+
+/*
+ *
+ * Пуск
+ *
+ */
+
+if (window.location.search == "?0")
+{
+    console.debug("Запуск панели управления");
+    задатьВнешнийВид();
+    запуститьПУ();
+    console.debug("Панель управления запущена")
+}