CMXX - Media

This commit is contained in:
“VeLiTi”
2025-01-16 17:13:42 +01:00
parent 05b0c2bdb1
commit 2dc2100269
12 changed files with 668 additions and 12 deletions

View File

@@ -38,11 +38,17 @@ if (isset($_GET['rowID'])) {
$products_attributes = json_decode(json_encode($responses[0]), true);
//CALL TO API FOR RELATED TRANSLATIONS
$api_url = '/v2/products_attributes_items/group_id='.$_GET['rowID'];
$api_url = '/v2/products_attributes_items/media=all&group_id='.$_GET['rowID'];
$products_attributes_items = ioServer($api_url,'');
//Decode Payload
if (!empty($products_attributes_items)){$products_attributes_items = json_decode($products_attributes_items,true);}else{$products_attributes_items = null;}
//CALL TO API
$api_url = '/v2/media/';
$media_responses = ioServer($api_url,'');
//Decode Payload
if (!empty($media_responses)){$media_responses = json_decode($media_responses,true);}else{$media_responses = null;}
if ($update_allowed === 1){
if (isset($_POST['submit'])) {
@@ -265,14 +271,34 @@ $view .= '
<td><input form="update" type="text" name="attributes['.$items['rowID'].'][item_name]" placeholder="'.($products_attributes_item_name ?? '').'" value="'.$items['item_name'].'"></td>
<td><input form="update" type="number" name="attributes['.$items['rowID'].'][item_quantity]" placeholder="'.($products_attributes_item_quantity ?? '').'" value="'.$items['item_quantity'].'"></td>
<td><input form="update" type="number" name="attributes['.$items['rowID'].'][item_position]" placeholder="'.($products_attributes_item_position ?? '').'" value="'.$items['item_position'].'"></td>
<td><input form="update" type="file" name="attributes['.$items['rowID'].'][item_media]" placeholder="'.($products_attributes_item_media ?? '').'" value="'.$items['item_media'].'"></td>
<td><input form="update" id="source_'.$items['rowID'].'" type="hidden" name="attributes['.$items['rowID'].'][item_media]" value="'.$items['item_media'].'">
<img id="image_'.$items['rowID'].'" src="'.$items['full_path'].'" alt="" style="display: block; max-width: 75px;">
</td>
<td>'.getRelativeTime($items['created']).'</td>
<td><input form="update" type="submit" name="update" value="&" class="btn"></td>
<td>
<button type="button" class="btn" id="openSelectorBtn" onclick="setSourceID(\''.$items['rowID'].'\'), openDialog(\'image_'.$items['rowID'].'\')">'.($button_assign_image ?? 'Assign Image').'</button>
<input form="update" type="submit" name="update" value="&" class="btn">
</td>
<input form="update" type="hidden" name="attributes['.$items['rowID'].'][rowID]" value="'.$items['rowID'].'" readonly>
<input form="update" type="hidden" name="attributes['.$items['rowID'].'][group_id]" value="'.$products_attributes['rowID'].'" readonly>
</tr>
</form>';
}
$view .= '<!-- Image Selector Dialog -->
<dialog id="imageSelector" style="padding: 20px; max-width: 800px;">
<h3>Select an Image</h3>
<div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 20px 0;">';
foreach ($media_responses as $media_response){
$view .= '
<img src="'.$media_response['full_path'].'" id="'.$media_response['rowID'].'" style="width: 100%; cursor: pointer; border: 2px solid transparent;" onmouseover="this.style.border=\'2px solid #4CAF50\'" onmouseout="this.style.border=\'2px solid transparent\'" onclick="selectImage(this.id,this.src)">
';
}
$view .= '</div>
<button onclick="closeImageSelector()">Close</button>
</dialog>
';
}
$view .= '
</tbody>
@@ -295,7 +321,11 @@ $view .= '
<td><input form="new" type="text" name="item_name" placeholder="'.($products_attributes_item_name ?? '').'" value=""></td>
<td><input form="new" type="number" name="item_quantity" placeholder="'.($products_attributes_item_quantity ?? '').'" value=""></td>
<td><input form="new" type="number" name="item_position" placeholder="'.($products_attributes_item_position ?? '').'" value=""></td>
<td><input form="new" type="file" name="item_media" placeholder="'.($products_attributes_item_media ?? '').'" value=""></td>
<td>
<input form="new" type="hidden" id="selectedImage" name="item_media" value="">
<img id="previewImage" src="" alt="Selected image" style="display: none; max-width: 200px;">
</td>
<td><button type="button" class="btn" id="openSelectorBtn" onclick="openDialog()">'.($button_assign_image ?? 'Assign Image').'</button></td>
<td><input form="new" type="submit" name="add" value="+" class="btn"></td>
<input form="new" type="hidden" name="rowID" value="" readonly>
<input form="new" type="hidden" name="group_id" value="'.$products_attributes['rowID'].'" readonly>
@@ -303,7 +333,47 @@ $view .= '
tbody.appendChild(newRow);
}
//POPUP FOR IMAGE SELECTION
const dialog = document.getElementById(\'imageSelector\');
image_source_id = 0;
//const openButton = document.getElementById(\'openSelectorBtn\');
function setSourceID(sourceid){
image_source_id = "source_"+sourceid;
image_source_src = "image_"+sourceid;
}
function openDialog(){
dialog.showModal();
}
function selectImage(id,src) {
if (image_source_id != 0){
const selectedImageInput = document.getElementById(image_source_id);
const previewImage = document.getElementById(image_source_src);
selectedImageInput.value = id;
previewImage.src = src;
}
else {
const selectedImageInput = document.getElementById(\'selectedImage\');
const previewImage = document.getElementById(\'previewImage\');
selectedImageInput.value = id;
previewImage.src = src;
previewImage.style.display = \'block\';
}
dialog.close();
}
function closeImageSelector() {
dialog.close();
}
</script>
</div>
</div>