Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Mise en place de la possibilité Upload des images dans sa bibliothèque. #1740

Merged
merged 1 commit into from
Apr 23, 2020
Merged

Mise en place de la possibilité Upload des images dans sa bibliothèque. #1740

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions assets/css/compiled/pages/widget.scss
View file
Original file line number Diff line number Diff line change
@@ -60,6 +60,9 @@
input[type=text]{
width: 400px;
}
.icon {
font-size: 3em;
}
}

.fieldset_display_preview {
10 changes: 8 additions & 2 deletions assets/css/components/_buttons.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
10 changes: 5 additions & 5 deletions assets/js/desktop/libs/displayCardWidget.js
View file
Original file line number Diff line number Diff line change
@@ -415,15 +415,15 @@ class DisplayCardWidget extends DisplayCardPageA {
div += '<div class="input-group">';
div += '<input type="text" class="testAttr form-control roundedLeft" data-l1key="state_light" placeholder="Résultat si test ok (light)"/>';
div += '<span class="input-group-btn">';
div += '<a class="btn btn-sm chooseIcon roundedRight"><i class="fas fa-flag initial"></i><i class="fas fa-refresh fa-spin" style="display:none;"></i></a>';
div += '<a class="btn btn-sm chooseIcon roundedRight"><i class="fas fa-icons initial"></i><i class="fas fa-refresh fa-spin" style="display:none;"></i></a>';
div += '</span>';
div += '</div>';
div += '</div>';
div += '<div class="col-sm-3">';
div += '<div class="input-group">';
div += '<input type="text" class="testAttr form-control roundedLeft" data-l1key="state_dark" placeholder="Résultat si test ok (dark)"/>';
div += '<span class="input-group-btn">';
div += '<a class="btn btn-sm chooseIcon roundedRight"><i class="fas fa-flag initial"></i><i class="fas fa-refresh fa-spin" style="display:none;"></i></a>';
div += '<a class="btn btn-sm chooseIcon roundedRight"><i class="fas fa-icons initial"></i><i class="fas fa-refresh fa-spin" style="display:none;"></i></a>';
div += '</span>';
div += '</div>';
div += '</div>';
@@ -456,16 +456,16 @@ class DisplayCardWidget extends DisplayCardPageA {
}
replace += '<div class="mix-group">';
if (data.replace[i].indexOf('icon_') !== -1 || data.replace[i].indexOf('img_') !== -1) {
replace += '<a class="btn btn-action chooseIcon"><i class="fas fa-flag initial"></i><i class="fas fa-refresh fa-spin" style="display:none;"></i><span>{{ Choisir }}</span></a>';
replace += '<div class="label label-icon attr" data-l1key="replace" data-l2key="#_' + data.replace[i] + '_#"></div>';
replace += '<a class="btn btn-action chooseIcon" style="height:35px;"><i class="fas fa-icons initial"></i><i class="fas fa-refresh fa-spin" style="display:none;"></i><span>{{ Choisir }}</span></a>';
replace += '<span class="attr" data-l1key="replace" data-l2key="#_' + data.replace[i] + '_#"></span>';
} else {
var type;
if ($this.widget_parameters_opt[data.replace[i]]) {
type = $this.widget_parameters_opt[data.replace[i]].type;
} else {
type = "text";
}
replace += '<input id="' + data.replace[i] + 'type="' + type + '" class="form-control attr" data-l1key="replace" data-l2key="#_' + data.replace[i] + '_#"/>';
replace += '<input id="' + data.replace[i] + '" type="' + type + '" class="form-control attr" data-l1key="replace" data-l2key="#_' + data.replace[i] + '_#"/>';
}
replace += '</div>';
replace += '</div>';
44 changes: 23 additions & 21 deletions assets/js/desktop/params/summary.js
View file
Original file line number Diff line number Diff line change
@@ -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,35 +67,36 @@ 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);
modifyWithoutSave = true;
$(".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 += '</select>';
tr += '</td>';
tr += '<td class="col-xs-1 input-group">';
tr += '<a class="objectSummaryAction btn btn-action" data-l1key="chooseIcon"><i class="fas fa-flag initial"></i><i class="fas fa-refresh fa-spin" style="display:none;"></i></a>';
tr += '<a class="objectSummaryAction btn btn-action" data-l1key="chooseIcon"><i class="fas fa-icons initial"></i><i class="fas fa-refresh fa-spin" style="display:none;"></i></a>';
tr += '<span class="label label-icon objectSummaryAttr" data-l1key="icon"></span>';
tr += '</td>';
tr += '<td>';
@@ -199,7 +201,7 @@ function addObjectSummary(_summary) {
tr += '<input type="checkbox" class="objectSummaryAttr" data-l1key="allowDisplayZero"/>';
tr += '</td>';
tr += '<td>';
if(isset(_summary) && isset(_summary.key) && _summary.key != ''){
if(isset(_summary) && isset(_summary.key) && _summary.key !== ''){
tr += '<a class="btn btn-success btn-sm objectSummaryAction" data-l1key="createVirtual"><i class="fas fa-puzzle-piece"></i>{{summary.create_virtual}}</a>';
}
tr += '</td>';
@@ -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;
}
23 changes: 16 additions & 7 deletions assets/js/libs/utils.js
View file
Original file line number Diff line number Diff line change
@@ -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('<div id="mod_selectIcon" title="{{Choisissez votre icône}}" ></div>');
if (chooseIconModal.length === 0) {
$('#div_pageContainer').append('<div id="mod_selectIcon" title="{{Choisissez votre icône}}" ></div>');
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('<img src=')) {
clazz = clazz.replace('<img src=\'', '').trim().replace('\'>', '');
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);
58 changes: 50 additions & 8 deletions assets/js/modals/icon.selector.js
View file
Original file line number Diff line number Diff line change
@@ -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);
}
});

//* */
10 changes: 10 additions & 0 deletions src/Ajax/NextDomAjax.php
View file
Original file line number Diff line number Diff line change
@@ -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']);
}
}
8 changes: 6 additions & 2 deletions src/Controller/Modals/IconSelector.php
View file
Original file line number Diff line number Diff line change
@@ -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'],
Loading