From 7b4720e0febc2d2d91a0678e75baba952c4f3a47 Mon Sep 17 00:00:00 2001 From: marsooooo Date: Thu, 30 May 2024 19:20:32 +0200 Subject: [PATCH] Interface Update (Ongoing) Update front end according to web design (Ongoing) --- admin/batch_manager_unit.php | 130 ++++- admin/themes/default/js/album_selector.js | 17 +- admin/themes/default/js/batchManagerUnit.js | 145 ++++++ .../default/template/batch_manager_unit.tpl | 493 +++++++++++++++--- 4 files changed, 719 insertions(+), 66 deletions(-) create mode 100644 admin/themes/default/js/batchManagerUnit.js diff --git a/admin/batch_manager_unit.php b/admin/batch_manager_unit.php index 352f8d2f0..abc69c0cc 100644 --- a/admin/batch_manager_unit.php +++ b/admin/batch_manager_unit.php @@ -193,6 +193,20 @@ SELECT * LIMIT '.$page['nb_images'].' OFFSET '.$page['start'].' ;'; $result = pwg_query($query); + + $storage_category_id = null; + if (!empty($row['storage_category_id'])) + { + $storage_category_id = $row['storage_category_id']; + } + + $level_convert = [ + "0" => "4", + "1" => "3", + "2" => "2", + "4" => "1", + "8" => "0", +]; while ($row = pwg_db_fetch_assoc($result)) { @@ -200,6 +214,10 @@ SELECT * $src_image = new SrcImage($row); + $image_file = $row['file']; + + + $query = ' SELECT id, @@ -208,6 +226,7 @@ SELECT JOIN '.TAGS_TABLE.' AS t ON t.id = it.tag_id WHERE image_id = '.$row['id'].' ;'; + $tag_selection = get_taglist($query); $legend = render_element_name($row); @@ -216,12 +235,94 @@ SELECT $legend.= ' ('.$row['file'].')'; } $extTab = explode('.',$row['path']); + + + +// represent + + // categories + + $query = ' + SELECT category_id, uppercats, dir + FROM '.IMAGE_CATEGORY_TABLE.' AS ic + INNER JOIN '.CATEGORIES_TABLE.' AS c + ON c.id = ic.category_id + WHERE image_id = '.$row['id'].' + ;'; + + $sub_result = pwg_query($query); + $related_categories = array(); + $related_category_ids = array(); + $media['image'] = get_image_infos($row['id'], true); + while ($item = pwg_db_fetch_assoc($sub_result)) + { + $name = + get_cat_display_name_cache( + $item['uppercats'], + get_root_url().'admin.php?page=album-' + ); + + if ($item['category_id'] == $storage_category_id) + { + $template->assign('STORAGE_CATEGORY', $name); + } + + $related_categories[$item['category_id']] = array('name' => $name, 'unlinkable' => $item['category_id'] != $storage_category_id); + $related_category_ids[] = $item['category_id']; + } + + // jump to link + $image_file = $row['file']; + + $query = ' + SELECT category_id + FROM '.IMAGE_CATEGORY_TABLE.' + WHERE image_id = '.$row['id'].' + ;'; + $authorizeds = array_diff( + array_from_query($query, 'category_id'), + explode( + ',', + calculate_permissions($user['id'], $user['status']) + ) + ); + + if (isset($row['cat_id']) + and in_array($row['cat_id'], $authorizeds)) + { + $url_img = make_picture_url( + array( + 'image_id' => $row['id'], + 'image_file' => $image_file, + 'category' => $cache['cat_names'][ $row['cat_id'] ], + ) + ); + } + else + { + foreach ($authorizeds as $category) + { + $url_img = make_picture_url( + array( + 'image_id' => $row['id'], //utile ? + 'image_file' => $image_file, + 'category' => $cache['cat_names'][ $category ], + ) + ); + break; + } + } + $admin_photo_base_url = get_root_url().'admin.php?page=photo-'.$row['id']; + $admin_url_start = $admin_photo_base_url.'-properties'; + $admin_url_start.= isset($row['cat_id']) ? '&cat_id='.$row['cat_id'] : ''; + $selected_level = isset($row['level']) ? $row['level'] : $row['level']; + $template->append( 'elements', array_merge($row, array( 'ID' => $row['id'], - 'TN_SRC' => DerivativeImage::url(IMG_THUMB, $src_image), + 'TN_SRC' => DerivativeImage::url(IMG_MEDIUM, $src_image), 'FILE_SRC' => DerivativeImage::url(IMG_LARGE, $src_image), 'LEGEND' => $legend, 'U_EDIT' => get_root_url().'admin.php?page=photo-'.$row['id'], @@ -232,14 +333,41 @@ SELECT 'DATE_CREATION' => $row['date_creation'], 'TAGS' => $tag_selection, 'is_svg' => (strtoupper(end($extTab)) == 'SVG'), + 'TITLE' => render_element_name($row), + 'DIMENSIONS' => @$row['width'].'x'.@$row['height'].' px', + 'FORMAT' => ($row['width'] >= $row['height'])? 1:0,//0:horizontal, 1:vertical + 'FILESIZE' => l10n('%.2f MB',$row['filesize']/1024), + 'REGISTRATION_DATE' => format_date($row['date_available']), + 'EXT' => l10n('%s file type',end($extTab)), + 'POST_DATE' => l10n('Posted the %s', format_date($row['date_available'], array('day', 'month', 'year'))), + 'AGE' => l10n(ucfirst(time_since($row['date_available'], 'year'))), + 'ADDED_BY' => l10n('Added by %s', $row['added_by']), + 'STATS' => l10n('Visited %d times', $row['hit']), + 'FILE' => l10n('%s', $row['file']), + 'related_categories' => $related_categories, + 'related_category_ids' => $related_category_ids, + 'U_JUMPTO' => (isset($url_img) and $user['level'] >= $media['image']['level']) ? $url_img : null, + 'tag_selection' => $tag_selection, + 'U_DOWNLOAD' => 'action.php?id='.$row['id'].'&part=e&pwg_token='.get_pwg_token().'&download', + 'U_HISTORY' => get_root_url().'admin.php?page=history&filter_image_id='.$row['id'], + 'U_DELETE' => $admin_url_start.'&delete=1&pwg_token='.get_pwg_token(), + 'U_SYNC' => $admin_url_start.'&sync_metadata=1', + 'PATH'=>$row['path'], + 'LEVEL_CONVERT' => $level_convert[!empty($row['level'])?$row['level']:'0'], + 'level_options_selected' => array($selected_level) + + ) )); } + $template->assign(array( 'ELEMENT_IDS' => implode(',', $element_ids), 'CACHE_KEYS' => get_admin_client_cache_keys(array('tags')), + )); + } trigger_notify('loc_end_element_set_unit'); diff --git a/admin/themes/default/js/album_selector.js b/admin/themes/default/js/album_selector.js index 16cf5d308..1d2fbb01c 100644 --- a/admin/themes/default/js/album_selector.js +++ b/admin/themes/default/js/album_selector.js @@ -8,15 +8,20 @@ function linked_albums_close() { $("#addLinkedAlbum").fadeOut(); } -function linked_albums_open() { +function linked_albums_open(pictureId) { $("#addLinkedAlbum").fadeIn(); + if(null != pictureId) + { + console.log(pictureId); + $("#addLinkedAlbum .linkedAlbumPopInContainer").attr("id",pictureId); + } $(".search-input").val(""); $(".search-input").focus(); $("#searchResult").empty(); $(".limitReached").html(str_no_search_in_progress); } -function linked_albums_search(searchText) { +function linked_albums_search(searchText, pictureId) { if (api_method == 'pwg.categories.getList') { api_params = { @@ -32,8 +37,6 @@ function linked_albums_search(searchText) { } } - // console.log(api_method); - $(".linkedAlbumPopInContainer .searching").show(); $.ajax({ url: "ws.php?format=json&method=" + api_method, @@ -47,7 +50,11 @@ function linked_albums_search(searchText) { $(".linkedAlbumPopInContainer .searching").hide(); categories = raw_data.result.categories; - fill_results(categories); + if (typeof pictureId !== 'undefined') { + fill_results(categories, pictureId); + } else { + fill_results(categories); + } if (raw_data.result.limit_reached) { $(".limitReached").html(str_result_limit.replace("%d", categories.length)); diff --git a/admin/themes/default/js/batchManagerUnit.js b/admin/themes/default/js/batchManagerUnit.js new file mode 100644 index 000000000..26a5c1093 --- /dev/null +++ b/admin/themes/default/js/batchManagerUnit.js @@ -0,0 +1,145 @@ +$(document).ready(function () { + + $(".linked-albums.add-item").on("click", function () { + var pictureId = $(this).parents("fieldset").data("image_id") + linked_albums_open(pictureId); + set_up_popin(); + }); + + $(".limitReached").html(str_no_search_in_progress); + $(".search-cancel-linked-album").hide(); + $(".linkedAlbumPopInContainer .searching").hide(); + $("#linkedAlbumSearch .search-input").on('input', function () { + var pictureId = $("#linkedAlbumSearch .search-input").parents(".linkedAlbumPopInContainer").attr("id"); + + if ($(this).val() != 0) { + $("#linkedAlbumSearch .search-cancel-linked-album").show() + } else { + $("#linkedAlbumSearch .search-cancel-linked-album").hide(); + } + + // Search input value length required to start searching + if ($(this).val().length > 0) { + + linked_albums_search($(this).val(), pictureId ); + } else { + $(".limitReached").html(str_no_search_in_progress); + $("#searchResult").empty(); + } + }) + + $(".search-cancel-linked-album").on("click", function () { + $("#linkedAlbumSearch .search-input").val(""); + $("#linkedAlbumSearch .search-input").trigger("input"); + }) + + $(".related-categories-container .breadcrumb-item .remove-item").on("click", function () { + var pictureId = $(this).parents("fieldset").attr("id"); + remove_related_category($(this).attr("id"),pictureId); + }) + +}) + +function fill_results(cats, pictureId) { + + $("#searchResult").empty(); + cats.forEach(cat => { + $("#searchResult").append( + "
" + + "" + cat.fullname +"" + + "
" + ); + var this_related_category_ids = window["related_category_ids_" + pictureId]; + console.log("relatedCAT "+this_related_category_ids); + console.log("catID "+cat.id); + + if (this_related_category_ids.includes(cat.id)) { + $("#"+pictureId+" .search-result-item #"+ cat.id +".item-add").addClass("notClickable").attr("title", str_already_in_related_cats).on("click", function (event) { + event.preventDefault(); + }); + $("#"+pictureId+" .search-result-item").addClass("notClickable").attr("title", str_already_in_related_cats).on("click", function (event) { + + event.preventDefault(); + }); + } else { + $("#"+pictureId+" .search-result-item#"+ cat.id).on("click", function () { + + add_related_category(cat.id, cat.full_name_with_admin_links, pictureId); + }); + } + }); + } + + function remove_related_category(cat_id,pictureId) { + var this_related_category_ids = window["related_category_ids_" + pictureId]; + + $("#"+pictureId+" .invisible-related-categories-select option[value="+ cat_id +"]").remove(); + $("#"+pictureId+" .invisible-related-categories-select").trigger('change'); + $("#"+pictureId+" #" + cat_id).parent().remove(); + + cat_to_remove_index = this_related_category_ids.indexOf(cat_id); + if (cat_to_remove_index > -1) { + this_related_category_ids.splice(cat_to_remove_index, 1); + } + + check_related_categories(pictureId); + } + + function add_related_category(cat_id, cat_link_path, pictureId) { + var this_related_category_ids = window["related_category_ids_" + pictureId]; + if (!this_related_category_ids.includes(cat_id)) { + $(".related-categories-container").append( + "
" + + "" + cat_link_path + "" + + "
" + ); + + $(".search-result-item #" + cat_id).addClass("notClickable"); + this_related_category_ids.push(cat_id); + $(".invisible-related-categories-select").append("").trigger('change'); + + $("#"+ cat_id).on("click", function () { + remove_related_category($(this).attr("id")) + }) + + linked_albums_close(); + } + + check_related_categories(pictureId); + } + + function check_related_categories(pictureId) { + var this_related_category_ids = window["related_category_ids_" + pictureId]; + + $("#picture-"+pictureId+" .linked-albums-badge").html(this_related_category_ids.length); + + if (this_related_category_ids.length == 0) { + $("#"+pictureId+" .linked-albums-badge").addClass("badge-red"); + $("#"+pictureId+" .add-item").addClass("highlight"); + $("#"+pictureId+" .orphan-photo").html(str_orphan).show(); + } else { + $("#"+pictureId+" .linked-albums-badge.badge-red").removeClass("badge-red"); + $("#"+pictureId+" .add-item.highlight").removeClass("highlight"); + $("#"+pictureId+" .orphan-photo").hide(); + } + } +// $(function () { +// $('.privacy-filter-slider').each(function() { +// var id = $(this).attr('id'); + +// $(this).slider({ +// range: 'min', +// value: $(this).attr('value'), +// min: 0, +// max: 4, +// slide: function (event, ui) { +// updateCertificationFilterLabel(ui.value, id); +// } +// }); +// }); +// }); + +// function updateCertificationFilterLabel(value, id) { +// let label = strs_privacy[value]; +// $('#' + id + ' .privacy').html(label); +// } \ No newline at end of file diff --git a/admin/themes/default/template/batch_manager_unit.tpl b/admin/themes/default/template/batch_manager_unit.tpl index 0edc7df86..e6ae98bde 100644 --- a/admin/themes/default/template/batch_manager_unit.tpl +++ b/admin/themes/default/template/batch_manager_unit.tpl @@ -2,11 +2,21 @@ {include file='include/datepicker.inc.tpl'} {include file='include/colorbox.inc.tpl'} +{combine_script id='jquery.sort' load='footer' path='themes/default/js/plugins/jquery.sort.js'} + {combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'} -{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'} +{combine_script id='jquery.selectize' load='header' path='themes/default/js/plugins/selectize.min.js'} {combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.{$themeconf.colorscheme}.css"} +{combine_script id='jquery.ui.slider' require='jquery.ui' load='header' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'} +{combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"} + +{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'} + +{combine_script id='jquery.confirm' load='footer' require='jquery' path='themes/default/js/plugins/jquery-confirm.min.js'} +{combine_css path="themes/default/js/plugins/jquery-confirm.min.css"} + {footer_script} (function(){ {* *} @@ -32,9 +42,62 @@ jQuery(function(){ {* *} jQuery("a.preview-box").colorbox( { photo: true }); + +str_are_you_sure = '{'Are you sure?'|translate|escape:javascript}'; +str_yes = '{'Yes, delete'|translate|escape:javascript}'; +str_no = '{'No, I have changed my mind'|translate|@escape:'javascript'}'; +str_albums_found = '{"%d albums found"|translate|escape:javascript}'; +str_album_found = '{"1 album found"|translate|escape:javascript}'; +str_result_limit = '{"%d+ albums found, try to refine the search"|translate|escape:javascript}'; +str_orphan = '{'This photo is an orphan'|@translate|escape:javascript}'; +str_no_search_in_progress = '{'No search in progress'|@translate|escape:javascript}'; +str_already_in_related_cats = '{'This albums is already in related categories list'|translate|escape:javascript}'; + +{literal} +$('#action-delete-picture').on('click', function() { + $.confirm({ + title: str_are_you_sure, + draggable: false, + titleClass: "groupDeleteConfirm", + theme: "modern", + content: "", + animation: "zoom", + boxWidth: '30%', + useBootstrap: false, + type: 'red', + animateFromElement: false, + backgroundDismiss: true, + typeAnimated: false, + buttons: { + confirm: { + text: str_yes, + btnClass: 'btn-red', + action: function () { + window.location.href = url_delete.replaceAll('amp;', ''); + } + }, + cancel: { + text: str_no + } + } + }); +}) +{/literal} + }()); +const strs_privacy = { + "0" : "{$level_options[8]}", + "1" : "{$level_options[4]}", + "2" : "{$level_options[2]}", + "3" : "{$level_options[1]}", + "4" : "{$level_options[0]}", +}; + {/footer_script} +{combine_script id='batchManagerUnit' load='footer' require='jquery.ui.effect-blind,jquery.sort' path='admin/themes/default/js/batchManagerUnit.js'} + +
@@ -52,79 +115,156 @@ jQuery("a.preview-box").colorbox( { {if !empty($elements) }
{foreach from=$elements item=element} -
- {$element.LEGEND} + {footer_script} + window.related_category_ids_{$element.ID} = {$element.related_category_ids|@json_encode}; + console.log(related_category_ids_{$element.ID}); + url_delete = '{$element.U_DELETE}'; + id = '{$element.ID}'; - - - {'Edit'|@translate} - + {/footer_script} - +{debug} +
+
+ imagename +
+
+ + + + + {if !url_is_remote($element.PATH)} + + + {/if} -
- - - + + {if isset($element.U_JUMPTO)} + +

{'Open in gallery'|@translate}

+ {else} + +

{'Open in gallery'|translate}

+ {/if} + + + +
+
+
+ +
+ {$element.FILE} + {$element.DIMENSIONS} + {$element.FILESIZE} + {$element.EXT} -
- - - - - - - - - - - - - - - - - - - - - - - -
{'Title'|@translate}
{'Author'|@translate}
{'Creation date'|@translate} - - - {'unset'|translate} -
{'Who can see this photo?'|@translate}
({'Privacy level'|translate})		 - -
{'Tags'|@translate} - -
{'Description'|@translate}
+
+
+
+ +
+ {$element.POST_DATE} + {$element.AGE} + {$element.ADDED_BY} + {$element.STATS} +
+
+
+ +
+ {'Title'|@translate} + +
+ +
+ {'Creation date'|@translate} + + + + +
+ +
+ {'Author'|@translate} + +
+ +
+
+ Qui peut voir ? Niveau de confidentialité +
+ + {*
+
+ {'Who can see this photo?'|@translate} + +
+
+
+
+
+
+
+
*} +
+ +
+ {'Tags'|@translate} + +
+ +
+ {'Linked albums'|@translate} {$element.related_categories|@count} + {if $element.related_categories|@count < 1} + {'This photo is an orphan'|@translate} + {else} + + {/if} +
+ {foreach from=$element.related_categories item=$cat_path key=$key} +
{$cat_path['name']}{if $cat_path['unlinkable']}{else}{/if}
+ {/foreach} +
+
{'Add'|translate}
+
+ +
+ {'Description'|@translate} + +
+
{'Submit'|@translate}
+
{/foreach} {if !empty($navbar)}{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if} -

+

- - + {* {'Submit'|@translate} *} {* *} -

+
{/if}
- +{include file='include/album_selector.inc.tpl' + title={'Associate to album'|@translate} + searchPlaceholder={'Search'|@translate} +} \ No newline at end of file + +.breadcrumb-item.add-item.highlight{ + color: #3C3C3C !important; +} + +.breadcrumb-item{ + margin: 5px 0 5px 0 !important; +} + +.album-listed{ + background-color: #FFFFFF !important; +} + +.elementEdit{ + display:flex; + flex-direction:row; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); + background-color:#FAFAFA; + padding:0px; + margin: 1.5em !important; + border-radius: 4px; +} + + +.media-box{ + display: flex; + background-color: #3C3C3C; + width:33%; + justify-content: center; + position: relative; + border-radius: 4px 0 0 4px; +} + +.media-box-embed{ + height: 100%; + object-fit: contain; + position: absolute; +} + +.media-hover{ + opacity:0%; + background-color: #0000009c; + position: relative; + height: 100%; + width: 100%; +} + +.media-hover:hover{ + opacity: 100%; +} + +.main-info-container{ + display:flex; + flex-direction:column; + text-align:center; + padding:20px; + row-gap:15px; + width:200px; +} + +.main-info-block{ + display:flex; + flex-direction:column; + border: 1px solid #D3D3D3; + background: #FFF; + border-radius: 2px; + flex:1; + align-items: center; + justify-content: center; +} + +.main-info-icon{ + width:40px; + height:40px; + margin-bottom:5px; + fill: #3C3C3C; +} + +.main-info-title{ + color: #000; + text-align: center; + font-size: 12px; + font-weight: 700; + line-height: normal; + width:100px; +} + +.main-info-desc{ + color: #777; + text-align: center; + font-family: "Open Sans"; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: normal; + width:100px; +} + +.info-container{ + flex:1; + display:flex; + flex-direction:row; + flex-wrap:wrap; + align-content: flex-start; + padding: 20px 0px; + gap: 10px 0px; + color:#7A7A7A; + +} + +.half-line-info-box{ + flex: 0 0 calc(50% - 20px); + margin: 0px 10px; + display:flex; + flex-direction:column; + text-align:left; + height: 50px; +} + +.full-line-info-box{ + flex: 0 0 calc(100% - 20px); + margin: 0px 10px; + display:flex; + flex-direction:column; +} + +.full-line-tag-box{ + flex: 0 0 calc(100% - 20px); + margin: 0px 10px; + display:flex; + flex-direction:column; +} + +.calendar-box{ + flex: 0 0 calc(50% - 20px); + height: 50px; + margin: 0px 10px; + display:flex; + flex-direction:column; +} + +.full-line-info-box input, +.half-line-info-box input, +.half-line-info-box select{ + display: flex; + border-radius: 2px; + padding: 0 7px; + border: 1px solid #D3D3D3; + background: #FFF; + flex: 1; +} + +.full-line-tag-box select{ + display: flex; + border-radius: 2px; + padding: 0 7px; + border: 1px solid #D3D3D3; + background: #FFF; +} + +.calendar-input{ + display: flex; + border-radius: 2px; + padding: 0 7px; + border: 1px solid #D3D3D3; + background: #FFF; + align-items: center; + justify-content: space-between; + flex: 1; +} + +.calendar-box input{ + border:none; + outline: none; + height: 90%; + width: 90%; +} + +.full-line-description-box{ + flex: 0 0 calc(100% - 20px); + min-height: 50px; + margin: 0px 10px; + display:flex; + flex-direction:column; +} + +.description-box{ + resize: none; + border-radius: 2px; + border: 1px solid #D3D3D3; + background: #FFF; +} +.full-line-info-box input, +.half-line-info-box input, +.description-box{ + outline: none !important; +} + +.save-button{ + margin: 0% 10px; + margin-top: 20px; +} + +.privacy-label-container{ + display: flex; + flex-direction: row; + gap: 5px; +} + +.privacy-label-container span{ + color: #ffa646; + font-weight: bold; +} +.bottom-save-bar{ + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background-color: #ffffff; + text-align: right; + z-index: 4; + border-top: 1px solid #CCCCCC +} + +.bottom-save-bar button{ + margin: 10px 0; + margin-right: 2%; +} + +