From 61d160b194b02396799656236970cb840345adb6 Mon Sep 17 00:00:00 2001 From: Luc Guinchard Date: Thu, 23 Apr 2020 08:59:15 +0200 Subject: [PATCH] =?UTF-8?q?Mise=20en=20place=20de=20la=20posibilit=C3=A9?= =?UTF-8?q?=20uploader=20des=20images=20dans=20sa=20biblioth=C3=A8que.=20M?= =?UTF-8?q?odification=20des=20icones=20pour=20le=20choix=20des=20icones.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/compiled/pages/widget.scss | 3 + assets/css/components/_buttons.scss | 10 ++- assets/js/desktop/libs/displayCardWidget.js | 10 +-- assets/js/desktop/params/summary.js | 44 +++++----- assets/js/libs/utils.js | 23 +++-- assets/js/modals/icon.selector.js | 58 ++++++++++-- src/Ajax/NextDomAjax.php | 10 +++ src/Controller/Modals/IconSelector.php | 8 +- src/Managers/ImageManager.php | 59 +++++++++++++ views/desktop/params/summary.html.twig | 22 ++--- views/desktop/tools/object.html.twig | 2 +- views/desktop/tools/scenario.html.twig | 2 +- views/desktop/tools/widget.html.twig | 2 +- views/modals/cmd.configure.html.twig | 2 +- views/modals/icon.selector.html.twig | 88 ++++++++++++------- views/modals/plan.configure.html.twig | 2 +- views/modals/plan3dHeader.configure.html.twig | 2 +- views/modals/planHeader.configure.html.twig | 2 +- views/modals/view.configure.html.twig | 2 +- views/templates/scenario/icon.default.html | 2 +- 20 files changed, 258 insertions(+), 95 deletions(-) create mode 100644 src/Managers/ImageManager.php diff --git a/assets/css/compiled/pages/widget.scss b/assets/css/compiled/pages/widget.scss index 2f4c1d35f..5dada0d53 100644 --- a/assets/css/compiled/pages/widget.scss +++ b/assets/css/compiled/pages/widget.scss @@ -60,6 +60,9 @@ input[type=text]{ width: 400px; } + .icon { + font-size: 3em; + } } .fieldset_display_preview { diff --git a/assets/css/components/_buttons.scss b/assets/css/components/_buttons.scss index 9d9ab75a9..b4f9e2997 100644 --- a/assets/css/components/_buttons.scss +++ b/assets/css/components/_buttons.scss @@ -70,8 +70,14 @@ margin: 3px 2px 3px 2px; min-width: 107px; border-radius: 4px; - .iconSel i { - padding-top: 7px; + .iconSel { + img { + max-height: 150px; + max-width: 150px; + } + i { + padding-top: 7px; + } } span { opacity: .5; diff --git a/assets/js/desktop/libs/displayCardWidget.js b/assets/js/desktop/libs/displayCardWidget.js index 5798e4cb4..c5f192494 100644 --- a/assets/js/desktop/libs/displayCardWidget.js +++ b/assets/js/desktop/libs/displayCardWidget.js @@ -415,7 +415,7 @@ class DisplayCardWidget extends DisplayCardPageA { div += '
'; div += ''; div += ''; - div += ''; + div += ''; div += ''; div += '
'; div += ''; @@ -423,7 +423,7 @@ class DisplayCardWidget extends DisplayCardPageA { div += '
'; div += ''; div += ''; - div += ''; + div += ''; div += ''; div += '
'; div += ''; @@ -456,8 +456,8 @@ class DisplayCardWidget extends DisplayCardPageA { } replace += '
'; if (data.replace[i].indexOf('icon_') !== -1 || data.replace[i].indexOf('img_') !== -1) { - replace += '{{ Choisir }}'; - replace += '
'; + replace += '{{ Choisir }}'; + replace += ''; } else { var type; if ($this.widget_parameters_opt[data.replace[i]]) { @@ -465,7 +465,7 @@ class DisplayCardWidget extends DisplayCardPageA { } else { type = "text"; } - replace += ''; + replace += ''; } replace += '
'; replace += ''; diff --git a/assets/js/desktop/params/summary.js b/assets/js/desktop/params/summary.js index febd3acb3..1d1e47f3a 100644 --- a/assets/js/desktop/params/summary.js +++ b/assets/js/desktop/params/summary.js @@ -43,7 +43,8 @@ initEvents(); */ function initEvents() { // Param changed : page leaving lock by msgbox - $('#summary').delegate('.objectSummaryAttr', 'change', function () { + var summary = $('#summary'); + summary.delegate('.objectSummaryAttr', 'change', function () { if (!lockModify) { modifyWithoutSave = true; $(".bt_cancelModifs").show(); @@ -66,21 +67,22 @@ function initEvents() { }); // Delete handlers on delete summary - $('#summary').undelegate('.objectSummary .objectSummaryAction[data-l1key=chooseIcon]', 'click').delegate('.objectSummary .objectSummaryAction[data-l1key=chooseIcon]', 'click', function () { + summary.undelegate('.objectSummary .objectSummaryAction[data-l1key=chooseIcon]', 'click').delegate('.objectSummary .objectSummaryAction[data-l1key=chooseIcon]', 'click', function () { var objectSummary = $(this).closest('.objectSummary'); - objectSummary.find('.objectSummaryAction[data-l1key=chooseIcon]').addClass('disabled'); - objectSummary.find('.objectSummaryAction[data-l1key=chooseIcon]').find('.fa-refresh').show(); - objectSummary.find('.objectSummaryAction[data-l1key=chooseIcon]').find('.initial').hide(); - var clazz = $('.objectSummaryAttr[data-l1key=icon] > i').attr('class'); + var objectChooseIcon = objectSummary.find('.objectSummaryAction[data-l1key=chooseIcon]'); + objectChooseIcon.addClass('disabled'); + objectChooseIcon.find('.fa-refresh').show(); + objectChooseIcon.find('.initial').hide(); + var clazz = objectSummary.find('.objectSummaryAttr[data-l1key=icon] > i').attr('class'); setTimeout(function () { chooseIcon(function (_icon) { objectSummary.find('.objectSummaryAttr[data-l1key=icon]').empty().append(_icon); }, { clazz: clazz, finally: function() { - $('.objectSummaryAction[data-l1key=chooseIcon]').removeClass('disabled'); - $('.objectSummaryAction[data-l1key=chooseIcon]').find('.fa-refresh').hide(); - $('.objectSummaryAction[data-l1key=chooseIcon]').find('.initial').show(); + objectChooseIcon.removeClass('disabled'); + objectChooseIcon.find('.fa-refresh').hide(); + objectChooseIcon.find('.initial').show(); } }); }, 50); @@ -88,13 +90,13 @@ function initEvents() { $(".bt_cancelModifs").show(); }); - $('#summary').undelegate('.objectSummary .objectSummaryAction[data-l1key=remove]', 'click').delegate('.objectSummary .objectSummaryAction[data-l1key=remove]', 'click', function () { + summary.undelegate('.objectSummary .objectSummaryAction[data-l1key=remove]', 'click').delegate('.objectSummary .objectSummaryAction[data-l1key=remove]', 'click', function () { $(this).closest('.objectSummary').remove(); modifyWithoutSave = true; $(".bt_cancelModifs").show(); }); - $('#summary').undelegate('.objectSummary .objectSummaryAction[data-l1key=createVirtual]', 'click').delegate('.objectSummary .objectSummaryAction[data-l1key=createVirtual]', 'click', function () { + summary.undelegate('.objectSummary .objectSummaryAction[data-l1key=createVirtual]', 'click').delegate('.objectSummary .objectSummaryAction[data-l1key=createVirtual]', 'click', function () { var objectSummary = $(this).closest('.objectSummary'); $.ajax({ type: "POST", @@ -109,7 +111,7 @@ function initEvents() { handleAjaxError(request, status, error); }, success: function (data) { - if (data.state != 'ok') { + if (data.state !== 'ok') { notify('Erreur', data.result, 'error'); return; } @@ -139,13 +141,13 @@ function printObjectSummary() { handleAjaxError(request, status, error); }, success: function (data) { - if (data.state != 'ok') { + if (data.state !== 'ok') { notify('Erreur', data.result, 'error'); return; } $('#table_objectSummary tbody').empty(); for (var i in data.result) { - if(isset(data.result[i].key) && data.result[i].key == ''){ + if(isset(data.result[i].key) && data.result[i].key === ''){ continue; } if(!isset(data.result[i].name)){ @@ -183,7 +185,7 @@ function addObjectSummary(_summary) { tr += ''; tr += ''; tr += ''; - tr += ''; + tr += ''; tr += ''; tr += ''; tr += ''; @@ -199,7 +201,7 @@ function addObjectSummary(_summary) { tr += ''; tr += ''; tr += ''; - if(isset(_summary) && isset(_summary.key) && _summary.key != ''){ + if(isset(_summary) && isset(_summary.key) && _summary.key !== ''){ tr += '{{summary.create_virtual}}'; } tr += ''; @@ -211,7 +213,7 @@ function addObjectSummary(_summary) { if (isset(_summary)){ $('#table_objectSummary tbody tr:last').setValues(_summary, '.objectSummaryAttr'); } - if(isset(_summary) && isset(_summary.key) && _summary.key != ''){ + if(isset(_summary) && isset(_summary.key) && _summary.key !== ''){ $('#table_objectSummary tbody tr:last .objectSummaryAttr[data-l1key=key]').attr('disabled','disabled'); } modifyWithoutSave = true; @@ -226,10 +228,10 @@ function saveObjectSummary() { temp = $('#table_objectSummary tbody tr').getValues('.objectSummaryAttr'); for(var i in temp){ temp[i].key = temp[i].key.toLowerCase().stripAccents().replace(/\_/g, '').replace(/\-/g, '').replace(/\&/g, '').replace(/\s/g, ''); - if(temp[i].key == ''){ - temp[i].key = temp[i].name.toLowerCase().stripAccents().replace(/\_/g, '').replace(/\-/g, '').replace(/\&/g, '').replace(/\s/g, '') + if(temp[i].key === ''){ + temp[i].key = temp[i].name.toLowerCase().stripAccents().replace(/\_/g, '').replace(/\-/g, '').replace(/\&/g, '').replace(/\s/g, ''); } - summary[temp[i].key] = temp[i] + summary[temp[i].key] = temp[i]; } value = {'object:summary' : summary}; $.ajax({ @@ -245,7 +247,7 @@ function saveObjectSummary() { handleAjaxError(request, status, error); }, success: function (data) { - if (data.state != 'ok') { + if (data.state !== 'ok') { notify('Erreur', data.result, 'error'); return; } diff --git a/assets/js/libs/utils.js b/assets/js/libs/utils.js index b2230260c..f426a5333 100644 --- a/assets/js/libs/utils.js +++ b/assets/js/libs/utils.js @@ -145,10 +145,14 @@ function notify(_title, _text, _class_name) { * Opening a icone selector modal to choose one * * @param callbackFunc Callback function who receive the icon code + * @param _params Parameters */ function chooseIcon(callbackFunc, _params) { var chooseIconModal = $('#mod_selectIcon'); - $('#div_pageContainer').append('
'); + if (chooseIconModal.length === 0) { + $('#div_pageContainer').append('
'); + chooseIconModal = $('#mod_selectIcon'); + } // Init choose icon modal chooseIconModal.dialog({ closeText: '', @@ -177,13 +181,18 @@ function chooseIcon(callbackFunc, _params) { } if (_params.clazz) { var clazz = _params.clazz; - var color = clazz.substring(clazz.lastIndexOf(" ")+1, clazz.length); - if(color.startsWith('icon_')) { - url += '&colorIcon=' + color; - clazz = clazz.replace(color, ''); + if(clazz.startsWith('', ''); + url += '&selectImg=' + clazz; + } else { + var color = clazz.substring(clazz.lastIndexOf(" ")+1, clazz.length); + if(color.startsWith('icon_')) { + url += '&colorIcon=' + color; + clazz = clazz.replace(color, ''); + } + clazz = clazz.replace('icon ', '').trim().replace(' ', '_'); + url += '&selectIcon=' + clazz; } - clazz = clazz.replace('icon ', '').trim().replace(' ', '_'); - url += '&selectIcon=' + clazz; } } chooseIconModal.load(url); diff --git a/assets/js/modals/icon.selector.js b/assets/js/modals/icon.selector.js index cc4379b44..7a4b907c4 100644 --- a/assets/js/modals/icon.selector.js +++ b/assets/js/modals/icon.selector.js @@ -32,13 +32,28 @@ $(function() { setTimeout(function () { - elem = $('#mod_selectIcon .iconSelected'); - if (elem.length === 1) { - var positionElem = elem.position(); - if (positionElem) { - container = $('#mod_selectIcon'); - var pos = positionElem.top + container.scrollTop() - container.position().top; - container.animate({scrollTop: pos}); + container = $('#mod_selectIcon'); + + elemIcon = $('#tabicon .iconSelected'); + elemImg = $('#tabimg .iconSelected'); + if(elemImg.length === 0 && elemIcon.length === 0) { + $('#mod_selectIcon ul li a[href="#tabicon"]').click(); + } else { + if (elemIcon.length === 1) { + $('#mod_selectIcon ul li a[href="#tabicon"]').click(); + var positionElem = elemIcon.position(); + if (positionElem) { + var pos = positionElem.top + elemIcon.parent().parent().parent().position().top - container.scrollTop(); + $('#tabicon').animate({scrollTop: pos}); + } + } + if (elemImg.length === 1) { + $('#mod_selectIcon ul li a[href="#tabimg"]').click(); + var positionElem = elemImg.position(); + if (positionElem) { + var pos = positionElem.top + elemImg.parent().parent().parent().position().top - container.scrollTop(); + $('#tabimg').animate({scrollTop: pos}); + } } } }, 250); @@ -89,7 +104,34 @@ $('.btn-selector').on('click', function () { $('.btn-selector').on('dblclick', function () { this.click(); - $('#mod_selectIcon').dialog("option", "buttons")['Valider'].apply($('#mod_selectIcon')); + var mod_selectIcon = $('#mod_selectIcon'); + mod_selectIcon.dialog("option", "buttons")['Valider'].apply(mod_selectIcon); +}); + +$('#mod_selectIcon ul li a[href="#tabicon"]').click(function(e) { + $('#sel_colorIcon').show(); + $('#uploadImageIcon').hide(); + $('#tabicon').show(); + $('#tabimg').hide(); +}); +$('#mod_selectIcon ul li a[href="#tabimg"]').click(function(e) { + $('#uploadImageIcon').show(); + $('#sel_colorIcon').hide(); + $('#tabimg').show(); + $('#tabicon').hide(); +}); + +$('#bt_uploadImageIcon').fileupload({ + replaceFileInput: false, + url: 'core/ajax/nextdom.ajax.php?action=uploadImageIcon&nextdom_token='+NEXTDOM_AJAX_TOKEN, + dataType: 'json', + done: function (e, data) { + if (data.result.state !== 'ok') { + $('#div_iconSelectorAlert').showAlert({message: data.result.result, level: 'danger'}); + return; + } + $('#mod_selectIcon').empty().load('index.php?v=d&modal=icon.selector&showimg=1&selectImg=' + data.result.result); + } }); //* */ diff --git a/src/Ajax/NextDomAjax.php b/src/Ajax/NextDomAjax.php index 12addbf8d..5cbda1b52 100644 --- a/src/Ajax/NextDomAjax.php +++ b/src/Ajax/NextDomAjax.php @@ -38,6 +38,7 @@ use NextDom\Managers\ScenarioManager; use NextDom\Managers\UserManager; use NextDom\Managers\ViewManager; +use NextDom\Managers\ImageManager; use NextDom\Model\Entity\Listener; /** @@ -414,4 +415,13 @@ public function version() $version['jeedom'] = NextDomHelper::getJeedomVersion(); $this->ajax->success($version); } + + public function uploadImageIcon() + { + AuthentificationHelper::isConnectedAsAdminOrFail(); + $this->ajax->checkToken(); + $imageDir = ImageManager::getDirectory(); + Utils::readUploadedFile($_FILES, "file", $imageDir, 1000, ['.jpg', '.png','.gif']); + $this->ajax->success('data/img/' . $_FILES['file']['name']); + } } diff --git a/src/Controller/Modals/IconSelector.php b/src/Controller/Modals/IconSelector.php index 71f6f17d7..a73793003 100644 --- a/src/Controller/Modals/IconSelector.php +++ b/src/Controller/Modals/IconSelector.php @@ -42,11 +42,15 @@ public static function get(): string { $iconsStylePath = 'public/icons/'; $pageData = []; - $pageData['tabimg'] = Utils::init('tabimg', false); + $pageData['tabimg'] = Utils::init('showimg', false); + if($pageData['tabimg']) { + $pageData['imgList'] = FileSystemHelper::ls('data/img/', '*'); + } $pageData['selectIcon'] = Utils::init('selectIcon', false); + $pageData['selectImg'] = Utils::init('selectImg', false); $pageData['colorIcon'] = Utils::init('colorIcon', ''); $pageData['colorList'] = [ - ['id' => '', 'label' => 'Aucune'], + ['id' => '', 'label' => 'Couleur par défaut'], ['id' => 'icon_blue', 'label' => 'Blue'], ['id' => 'icon_yellow', 'label' => 'Jaune'], ['id' => 'icon_orange', 'label' => 'Orange'], diff --git a/src/Managers/ImageManager.php b/src/Managers/ImageManager.php new file mode 100644 index 000000000..de46af98a --- /dev/null +++ b/src/Managers/ImageManager.php @@ -0,0 +1,59 @@ +. +*/ + +/* This file is part of Jeedom. + * + * Jeedom is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Jeedom is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Jeedom. If not, see . + */ + +namespace NextDom\Managers; + + +/** + * Class CacheManager + * @package NextDom\ImageManager + */ +class ImageManager +{ + /** + * Get all widget themes + * + * @return WidgetTheme[] + */ + public static function getDirectory() { + $dir = "data/img/"; + if ('/' != substr($dir, 0, 1)) { + $dir = sprintf("%s/%s", NEXTDOM_DATA, $dir); + } + if (!is_dir($dir) && !mkdir($dir, 0775, true)) { + throw new CoreException("unable to create backup directory " . $dir); + } + return $dir; + } +} diff --git a/views/desktop/params/summary.html.twig b/views/desktop/params/summary.html.twig index 81a11ff30..aab401774 100644 --- a/views/desktop/params/summary.html.twig +++ b/views/desktop/params/summary.html.twig @@ -61,17 +61,17 @@
- - - - - - - - - - - + + + + + + + + + + +
{{ 'summary.key' | trans }}{{ 'common.name' | trans }}{{ 'summary.calculation' | trans }}{{ 'summary.icon' | trans }}{{ 'summary.unit' | trans }}{{ 'summary.counting_method' | trans }}{{ 'summary.display_if_zero' | trans }}{{ 'summary.link_to_a_virtual' | trans }}
{{ 'summary.key' | trans }}{{ 'common.name' | trans }}{{ 'summary.calculation' | trans }}{{ 'summary.icon' | trans }}{{ 'summary.unit' | trans }}{{ 'summary.counting_method' | trans }}{{ 'summary.display_if_zero' | trans }}{{ 'summary.link_to_a_virtual' | trans }}
diff --git a/views/desktop/tools/object.html.twig b/views/desktop/tools/object.html.twig index 8abc489d5..a87c28eea 100644 --- a/views/desktop/tools/object.html.twig +++ b/views/desktop/tools/object.html.twig @@ -168,7 +168,7 @@
- {{ 'common.choose' | trans }} + {{ 'common.choose' | trans }}
diff --git a/views/desktop/tools/scenario.html.twig b/views/desktop/tools/scenario.html.twig index 9a504867e..d89d9fb57 100644 --- a/views/desktop/tools/scenario.html.twig +++ b/views/desktop/tools/scenario.html.twig @@ -267,7 +267,7 @@
- {{ 'common.choose' | trans }} + {{ 'common.choose' | trans }}
diff --git a/views/desktop/tools/widget.html.twig b/views/desktop/tools/widget.html.twig index ec3123a62..a86f0704e 100644 --- a/views/desktop/tools/widget.html.twig +++ b/views/desktop/tools/widget.html.twig @@ -173,7 +173,7 @@
diff --git a/views/modals/cmd.configure.html.twig b/views/modals/cmd.configure.html.twig index b93de706d..d99039456 100644 --- a/views/modals/cmd.configure.html.twig +++ b/views/modals/cmd.configure.html.twig @@ -158,7 +158,7 @@
-   {{ 'Icône' }} +