JezK
Edit File: contentManagement.php
<?php include "sidemenu-start.php"; // ini_set('display_errors', 1); // ini_set('display_startup_errors', 1); error_reporting(E_ALL); ?> <style> .disabled { pointer-events: none; opacity: 0.4; /* You can set the desired disabled appearance here */ } .tox-notifications-container,.tox-statusbar{ display: none !important; } </style> <div class="container-fluid"> <div class="row"> <div class="col-lg-5 col-12"> <h1>Home</h1> </div> </div> <form id="home"> <div class="row mt-5"> <div class="col-sm-12 col-md-5 db-3"> <div class="content-tile"> <h4 class="mb-4">Slider</h4> <div class="content-forms"> <div class="row"> <div class="col-lg-6"> <label for="name" class="form-label">Slider Image</label> <div class="file-upload d-flex"> <input class="file-upload-input3" onchange="readURL(this, '#slider-image-preview');" type="file" id="slider_icon" name="slider_img" /> <img class="preview-image" name="slider_image" id="slider-image-preview" src="../admin/images/190x100.png" alt="Image Preview" style="max-width: 170px; max-height: 100px;"> </div> <button type="button" class="de-btn-content upload-button">Upload</button> <div class="error slider_error"></div> </div> <!-- <div class="col-lg-6"> <label for="name" class="form-label">Background Image</label> <div class="file-upload d-flex"> <input class="file-upload-input3" onchange="readURL(this, '#bg-image-preview');" type="file" id="slider_background_img" name="slider_background_img" /> <img class="preview-image" id="bg-image-preview" src="../admin/images/190x100.png" alt="Image Preview" style="max-width: 170px; max-height: 100px;"> </div> <button type="button" class="de-btn-content upload-button">Upload</button> <div class="error slider_background_img_error"></div> </div> --> <div class="col-lg-12"> <label for="name" class="form-label my-4">Slider Text</label> <textarea id="editor"></textarea> <div class="error editor_error"></div> </div> </div> </div> </div> </div> <div class=" col-sm-12 col-md-7 db-3"> <div class="content-tile"> <div class="mb-3 d-flex justify-content-between align-items-center"> <h4>Features cards</h4> </div> <div class="content-forms"> <div class="row"> <div class="col-lg-4 br-1" id="fc1"> <div class="d-flex justify-content-between align-items-center"> <label for="name" class="form-label">Icon (48x48)</label> <label class="toggle-switch"> <input type="checkbox" id="ftoggleBtn1"> <span class="slider"></span> </label> </div> <div id="fcard1"> <div class="file-upload d-flex"> <input class="file-upload-input3" onchange="readURL(this, '#ico1-image-preview');" type="file" id="fc_img1" name="fc_img1" /> <img class="preview-image" id="ico1-image-preview" src="../admin/images/48x48.png" alt="Image Preview" style="max-width: 48px; max-height: 48px;"> </div> <button type="button" class="de-btn-content upload-button">Upload</button> <div class="error fcimg_error1"></div> <div class="mt-2"> <label for="title" class="form-label2">Title</label> <input class="mt-2 form-control" type='text' name="fctitle1" id="fctitle1" /> <div class="error fctitle_error1"></div> </div> <div class="mt-2"> <label for="description" class="form-label2">Description</label> <textarea id="fcta1" name="fcta1" rows="8"></textarea> <div class="error fcta_error1"></div> </div> </div> </div> <div class=" col-lg-4 br-1" id="fc2"> <div class=" d-flex justify-content-between align-items-center"> <label for="name" class="form-label">Icon (48x48)</label> <label class="toggle-switch"> <input type="checkbox" id="ftoggleBtn2"> <span class="slider"></span> </label> </div> <div id="fcard2"> <div class="file-upload d-flex"> <input class="file-upload-input3" onchange="readURL(this, '#ico2-image-preview');" type="file" id="fc_img2" name="fc_img2" /> <img class="preview-image" id="ico2-image-preview" src="../admin/images/48x48.png" alt="Image Preview" style="max-width: 48px; max-height: 48px;"> </div> <button type="button" class="de-btn-content upload-button">Upload</button> <div class="error fcimg_error2"></div> <div class="mt-2"> <label for="title" class="form-label2">Title</label> <input class="mt-2 form-control" type='text' name="fctitle2" id="fctitle2" /> <div class="error fctitle_error2"></div> </div> <div class="mt-2"> <label for="description" class="form-label2">Description</label> <textarea id="fcta2" name="fcta2" rows="8"></textarea> <div class="error fcta_error2"></div> </div> </div> </div> <div class=" col-lg-4 " id="fc3"> <div class=" d-flex justify-content-between align-items-center"> <label for="name" class="form-label">Icon (48x48)</label> <label class="toggle-switch"> <input type="checkbox" id="ftoggleBtn3"> <span class="slider"></span> </label> </div> <div id="fcard3"> <div class="file-upload d-flex"> <input class="file-upload-input3" onchange="readURL(this, '#ico3-image-preview');" type="file" id="fc_img3" name="fc_img3" /> <img class="preview-image" id="ico3-image-preview" src="../admin/images/48x48.png" alt="Image Preview" style="max-width: 48px; max-height: 48px;"> </div> <button type="button" class="de-btn-content upload-button">Upload</button> <div class="error fcimg_error3"></div> <div class="mt-2"> <label for="title" class="form-label2">Title</label> <input class="mt-2 form-control" type='text' name="fctitle3" id="fctitle3" /> <div class="error fctitle_error3"></div> </div> <div class="mt-2"> <label for="description" class="form-label2">Description</label> <textarea id="fcta3" name="fcta3" rows="8"></textarea> <div class="error fcta_error3"></div> </div> </div> </div> </div> </div> </div> </div> </div> <div class=" row mt-5 db-m"> <div class=" col-sm-12 col-md-9 db-3"> <div class="content-tile"> <div class="mb-3 d-flex justify-content-between align-items-center"> <h4>Services</h4> </div> <div class="content-forms"> <div class="row"> <div class="col-lg-4 br-1" id="sc1"> <div class=" d-flex justify-content-between align-items-center"> <label for="name" class="form-label">Image (348x250)</label> <label class="toggle-switch"> <input type="checkbox" id="stoggleBtn1"> <span class="slider"></span> </label> </div> <div id="scard1"> <div class="file-upload d-flex"> <input class="file-upload-input3" onchange="readURL(this, '#img1-image-preview');" type="file" id="sc_img1" name="service_img1" /> <img class="preview-image" id="img1-image-preview" src="../admin/images/190x100.png" alt="Image Preview" style="max-width: 170px; max-height: 100px;"> </div> <button type="button" class="de-btn-content upload-button">Upload</button> <div class="error scimg_error1"></div> <div class="mt-2"> <label for="title" class="form-label2">Title</label> <input class="mt-2 form-control" type='text' name="sctitle1" id="sctitle1" /> <div class="error sctitle_error1"></div> </div> <div class="mt-2"> <label for="description" class="form-label2">Description</label> <textarea id="scta1" name="scta1" rows="8"></textarea> <div class="error scta_error1"></div> </div> </div> </div> <div class=" col-lg-4 br-1" id="sc2"> <div class="mb-3 d-flex justify-content-between align-items-center"> <label for="name" class="form-label">Image (348x250)</label> <label class="toggle-switch"> <input type="checkbox" id="stoggleBtn2"> <span class="slider"></span> </label> </div> <div id="scard2"> <div class="file-upload d-flex"> <input class="file-upload-input3" onchange="readURL(this, '#img2-image-preview');" type="file" id="sc_img2" name="service_img2" /> <img class="preview-image" id="img2-image-preview" src="../admin/images/190x100.png" alt="Image Preview" style="max-width: 170px; max-height: 100px;"> </div> <button type="button" class="de-btn-content upload-button">Upload</button> <div class="error scimg_error2"></div> <div class="mt-2"> <label for="title" class="form-label2">Title</label> <input class="mt-2 form-control" type='text' name="sctitle2" id="sctitle2" /> <div class="error sctitle_error2"></div> </div> <div class="mt-2"> <label for="description" class="form-label2">Description</label> <textarea id="scta2" name="scta2" rows="8"></textarea> <div class="error scta_error2"></div> </div> </div> </div> <div class=" col-lg-4" id="sc3"> <div class="mb-3 d-flex justify-content-between align-items-center"> <label for="name" class="form-label">Image (348x250)</label> <label class="toggle-switch"> <input type="checkbox" id="stoggleBtn3"> <span class="slider"></span> </label> </div> <div id="scard3"> <div class="file-upload d-flex"> <input class="file-upload-input3" onchange="readURL(this, '#img3-image-preview');" type="file" id="sc_img3" name="service_img3" /> <img class="preview-image" id="img3-image-preview" src="../admin/images/190x100.png" alt="Image Preview" style="max-width: 170px; max-height: 100px;"> </div> <button type="button" class="de-btn-content upload-button">Upload</button> <div class="error scimg_error3"></div> <div class="mt-2"> <label for="title" class="form-label2">Title</label> <input class="mt-2 form-control" type='text' name="sctitle3" id="sctitle3" /> <div class="error sctitle_error3"></div> </div> <div class="mt-2"> <label for="description" class="form-label2">Description</label> <textarea id="scta3" name="scta3" rows="8"></textarea> <div class="error scta_error3"></div> </div> </div> </div> </div> </div> </div> </div> </div> <input type="hidden" id="FCard1" name="FCard1" value=""> <input type="hidden" id="FCard2" name="FCard2" value=""> <input type="hidden" id="FCard3" name="FCard3" value=""> <input type="hidden" id="SCard1" name="SCard1" value=""> <input type="hidden" id="SCard2" name="SCard2" value=""> <input type="hidden" id="SCard3" name="SCard3" value=""> <button type="submit" class="mt-5 de-btn-content" onclick="return validateForm();">Submit</button> </form> </div> <?php include "sidemenu-end.php"; ?> <script> let baseUrl = "<?php echo $baseUrl; ?>" $(document).ready(function() { $.ajax({ type: 'GET', url: 'app/getHomeApp.php', success: function(data) { response = JSON.parse(data) // Slider Section document.querySelector("#slider-image-preview").src = baseUrl + "images/" + response["slider_img"]; document.querySelector("#editor").innerHTML = response["slider_text"]; // Features Cards document.querySelector("#ico1-image-preview").src = baseUrl + "images/" + response["fc_img1"]; $('#fctitle1').val(response["fc_title1"]); $('#fcta1').val(response["fc_description1"]); document.querySelector("#ico2-image-preview").src = baseUrl + "images/" + response["fc_img2"]; $('#fctitle2').val(response["fc_title2"]); $('#fcta2').val(response["fc_description2"]); document.querySelector("#ico3-image-preview").src = baseUrl + "images/" + response["fc_img3"]; $('#fctitle3').val(response["fc_title3"]); $('#fcta3').val(response["fc_description3"]); // Services Section document.querySelector("#img1-image-preview").src = baseUrl + "images/" + response["service_img1"]; $('#sctitle1').val(response["service_title1"]); $('#scta1').val(response["service_description1"]); document.querySelector("#img2-image-preview").src = baseUrl + "images/" + response["service_img2"]; $('#sctitle2').val(response["service_title2"]); $('#scta2').val(response["service_description2"]); document.querySelector("#img3-image-preview").src = baseUrl + "images/" + response["service_img3"]; $('#sctitle3').val(response["service_title3"]); $('#scta3').val(response["service_description3"]); if (response["fc1_status"] == 1) { const toggleBtn = document.getElementById('ftoggleBtn1'); toggleBtn.checked = true; $('#FCard1').val(1); } else { $('#fcard1').addClass("disabled") $('#FCard1').val(0); } if (response["fc2_status"] == 1) { const toggleBtn = document.getElementById('ftoggleBtn2'); toggleBtn.checked = true; $('#FCard2').val(1); } else { $('#fcard2').addClass("disabled") $('#FCard2').val(0); } if (response["fc3_status"] == 1) { const toggleBtn = document.getElementById('ftoggleBtn3'); toggleBtn.checked = true; $('#FCard3').val(1); } else { $('#fcard3').addClass("disabled") $('#FCard3').val(0); } if (response["services1_status"] == 1) { const toggleBtn = document.getElementById('stoggleBtn1'); toggleBtn.checked = true; $('#SCard1').val(1); } else { $('#scard1').addClass("disabled") $('#SCard1').val(0); } if (response["services2_status"] == 1) { const toggleBtn = document.getElementById('stoggleBtn2'); toggleBtn.checked = true; $('#SCard2').val(1); } else { $('#scard2').addClass("disabled") $('#SCard2').val(0); } if (response["services3_status"] == 1) { const toggleBtn = document.getElementById('stoggleBtn3'); toggleBtn.checked = true; $('#SCard3').val(1); } else { $('#scard3').addClass("disabled") $('#SCard3').val(0); } } }) }) const toggleBtn1 = document.getElementById('ftoggleBtn1'); status === $('#FCard1').val(); toggleBtn1.addEventListener('change', function() { const newStatus = this.checked ? 1 : 0; $('#FCard1').val(newStatus); if (newStatus == 1) { $('#fcard1').removeClass("disabled") } else { $('#fcard1').addClass("disabled") } }); const toggleBtn2 = document.getElementById('ftoggleBtn2'); status === $('#FCard2').val(); toggleBtn2.addEventListener('change', function() { const newStatus = this.checked ? 1 : 0; $('#FCard2').val(newStatus); if (newStatus == 1) { $('#fcard2').removeClass("disabled") } else { $('#fcard2').addClass("disabled") } }); const toggleBtn3 = document.getElementById('ftoggleBtn3'); status === $('#FCard3').val(); toggleBtn3.addEventListener('change', function() { const newStatus = this.checked ? 1 : 0; $('#FCard3').val(newStatus); if (newStatus == 1) { $('#fcard3').removeClass("disabled") } else { $('#fcard3').addClass("disabled") } }); const toggleBtn4 = document.getElementById('stoggleBtn1'); status === $('#SCard1').val(); toggleBtn4.addEventListener('change', function() { const newStatus = this.checked ? 1 : 0; $('#SCard1').val(newStatus); if (newStatus == 1) { $('#scard1').removeClass("disabled") } else { $('#scard1').addClass("disabled") } }); const toggleBtn5 = document.getElementById('stoggleBtn2'); status === $('#SCard2').val(); toggleBtn5.addEventListener('change', function() { const newStatus = this.checked ? 1 : 0; $('#SCard2').val(newStatus); if (newStatus == 1) { $('#scard2').removeClass("disabled") } else { $('#scard2').addClass("disabled") } }); const toggleBtn6 = document.getElementById('stoggleBtn3'); status === $('#SCard3').val(); toggleBtn6.addEventListener('change', function() { const newStatus = this.checked ? 1 : 0; $('#SCard3').val(newStatus); if (newStatus == 1) { $('#scard3').removeClass("disabled") } else { $('#scard3').addClass("disabled") } }); $('#home').submit(function(event) { event.preventDefault(); var myContent = tinymce.get("editor").getContent(); var formData = new FormData($('#home')[0]); const sliderTextName = "slider_text"; const sliderTextValue = myContent; formData.append(sliderTextName, sliderTextValue); $.ajax({ type: 'POST', url: 'app/home.php', data: formData, processData: false, contentType: false, cache: false, success: function(data) { if (data == 1) { toastr.success("Updated Successfully...") function redirect() { location.reload(); } setTimeout(redirect, 2000) } else { toastr.warning("Unable to Update") } } }) }) function readURL(input, previewId) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $(previewId).attr('src', e.target.result); }; reader.readAsDataURL(input.files[0]); } } function validateImageDimensions(imageInput, maxWidth, maxHeight) { if (imageInput.files && imageInput.files[0]) { var img = new Image(); var reader = new FileReader(); reader.onload = function(e) { img.src = e.target.result; img.onload = function() { var width = img.width; var height = img.height; if (width > maxWidth || height > maxHeight) { alert('Image dimensions must be within ' + maxWidth + 'x' + maxHeight + ' pixels.'); imageInput.value = ''; $(imageInput).siblings('.preview-image').attr('src', '../admin/images/190x100.png'); return false; } }; }; reader.readAsDataURL(imageInput.files[0]); } } function validateForm() { $('.error').html(""); // Validate Slider Images var sliderImageInput = document.getElementById('slider_icon').files[0]; if (sliderImageInput) { // validateImageDimensions(sliderImageInput, 1029, 522); // validateImageType(sliderImageInput); imgFile = document.getElementById('slider_icon').files[0]; let type = imgFile.type.split('/').pop().toLowerCase(); if (type != "jpeg" && type != "jpg" && type != "png") { $('.slider_error').html('Please upload image like jpeg, jpg, png'); return false; } } // Validate Background Images // var bgImageInput = document.getElementById('slider_background_img').files[0]; // if (bgImageInput) { // // validateImageDimensions(bgImageInput, 1920, 871); // // validateImageType(bgImageInput); // imgFile = document.getElementById('slider_background_img').files[0]; // let type = imgFile.type.split('/').pop().toLowerCase(); // if (type != "jpeg" && type != "jpg" && type != "png") { // $('.slider_background_img_error').html('Please upload image like jpeg, jpg, png'); // return false; // } // } var editor = $('#editor').val() if (editor == "") { $('.editor_error' + i).html('Please Enter Slider Text'); return false; } // Validate Feature Cards Images if ($('#FCard1').val() == '1') { var imageElement = document.getElementById('ico1-image-preview'); const srcValue = imageElement.getAttribute('src'); const filename = srcValue.substring(srcValue.lastIndexOf('/') + 1); if (filename == "48x48.png") { var fcImageInput = document.getElementById('fc_img1').files[0]; if (!fcImageInput) { $('.fcimg_error1').html('Please upload image'); return false; } } var fcImageInput = document.getElementById('fc_img1').files[0]; if (fcImageInput) { imgFile = document.getElementById('fc_img1').files[0]; let type = imgFile.type.split('/').pop().toLowerCase(); if (type != "jpeg" && type != "jpg" && type != "png") { $('.fcimg_error1').html('Please upload image like jpeg, jpg, png'); return false; } }; var fctitle = $('#fctitle1').val() if (fctitle == "") { $('.fctitle_error1').html('Please Enter Force Card Title'); return false; } var fcta = $('#fcta1').val() if (fcta == "") { $('.fcta_error1').html('Please Enter Force Card Description'); return false; } } if ($('#FCard2').val() == 1) { var imageElement = document.getElementById('ico2-image-preview'); const srcValue = imageElement.getAttribute('src'); const filename = srcValue.substring(srcValue.lastIndexOf('/') + 1); if (filename == "48x48.png") { var fcImageInput = document.getElementById('fc_img2').files[0]; if (!fcImageInput) { $('.fcimg_error2').html('Please upload image'); return false; } } var fcImageInput = document.getElementById('fc_img2').files[0]; if (fcImageInput) { imgFile = document.getElementById('fc_img2').files[0]; let type = imgFile.type.split('/').pop().toLowerCase(); if (type != "jpeg" && type != "jpg" && type != "png") { $('.fcimg_error2').html('Please upload image like jpeg, jpg, png'); return false; } }; var fctitle = $('#fctitle2').val() if (fctitle == "") { $('.fctitle_error2').html('Please Enter Force Card Title'); return false; } var fcta = $('#fcta2').val() if (fcta == "") { $('.fcta_error2').html('Please Enter Force Card Description'); return false; } } if ($('#FCard3').val() == 1) { var imageElement = document.getElementById('ico3-image-preview'); const srcValue = imageElement.getAttribute('src'); const filename = srcValue.substring(srcValue.lastIndexOf('/') + 1); if (filename == "48x48.png") { var fcImageInput = document.getElementById('fc_img3').files[0]; if (!fcImageInput) { $('.fcimg_error3').html('Please upload image'); return false; } } var fcImageInput = document.getElementById('fc_img3').files[0]; if (fcImageInput) { imgFile = document.getElementById('fc_img3').files[0]; let type = imgFile.type.split('/').pop().toLowerCase(); if (type != "jpeg" && type != "jpg" && type != "png") { $('.fcimg_error1').html('Please upload image like jpeg, jpg, png'); return false; } }; var fctitle = $('#fctitle3').val() if (fctitle == "") { $('.fctitle_error3').html('Please Enter Force Card Title'); return false; } var fcta = $('#fcta3').val() if (fcta == "") { $('.fcta_error3').html('Please Enter Force Card Description'); return false; } } // Validate Services Images if ($('#SCard1').val() == 1) { var imageElement = document.getElementById('img1-image-preview'); const srcValue = imageElement.getAttribute('src'); const filename = srcValue.substring(srcValue.lastIndexOf('/') + 1); if (filename == "190x100.png") { alert(filename) var scImageInput = document.getElementById('sc_img1').files[0]; if (!scImageInput) { $('.scimg_error1').html('Please upload image'); return false; } } var scImageInput = document.getElementById('sc_img1').files[0]; if (scImageInput) { imgFile = document.getElementById('sc_img1').files[0]; let type = imgFile.type.split('/').pop().toLowerCase(); if (type != "jpeg" && type != "jpg" && type != "png") { $('.scimg_error1').html('Please upload image like jpeg, jpg, png'); return false; } }; var sctitle = $('#sctitle1').val() if (sctitle == "") { $('.sctitle_error1').html('Please Enter Title'); return false; } var scta = $('#scta1').val() if (scta == "") { $('.scta_error1').html('Please Enter Description'); return false; } } if ($('#SCard2').val() == 1) { var imageElement = document.getElementById('img2-image-preview'); const srcValue = imageElement.getAttribute('src'); const filename = srcValue.substring(srcValue.lastIndexOf('/') + 1); if (filename == "190x100.png") { var scImageInput = document.getElementById('sc_img2').files[0]; if (!scImageInput) { $('.scimg_error2').html('Please upload image'); return false; } } var scImageInput = document.getElementById('sc_img2').files[0]; if (scImageInput) { imgFile = document.getElementById('sc_img2').files[0]; let type = imgFile.type.split('/').pop().toLowerCase(); if (type != "jpeg" && type != "jpg" && type != "png") { $('.scimg_error2').html('Please upload image like jpeg, jpg, png'); return false; } }; var sctitle = $('#sctitle2').val() if (sctitle == "") { $('.sctitle_error2').html('Please Enter Title'); return false; } var scta = $('#scta2').val() if (scta == "") { $('.scta_error2').html('Please Enter Description'); return false; } } if ($('#SCard3').val() == 1) { var imageElement = document.getElementById('img3-image-preview'); const srcValue = imageElement.getAttribute('src'); const filename = srcValue.substring(srcValue.lastIndexOf('/') + 1); if (filename == "190x100.png") { var scImageInput = document.getElementById('sc_img3').files[0]; if (!scImageInput) { $('.scimg_error3').html('Please upload image'); return false; } } var scImageInput = document.getElementById('sc_img3').files[0]; if (scImageInput) { imgFile = document.getElementById('sc_img3').files[0]; let type = imgFile.type.split('/').pop().toLowerCase(); if (type != "jpeg" && type != "jpg" && type != "png") { $('.scimg_error3').html('Please upload image like jpeg, jpg, png'); return false; } }; var sctitle = $('#sctitle3').val() if (sctitle == "") { $('.sctitle_error3').html('Please Enter Title'); return false; } var scta = $('#scta3').val() if (scta == "") { $('.scta_error3').html('Please Enter Description'); return false; } } return true; } </script>