Sindbad~EG File Manager
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body id="menu_body" >-->
{% extends 'Backoffice/bo_layout.html' %}
{% block title %}Menu {% endblock %}
{% block content %}
<div class="container text-dark ">
<form action="" class="p-5" id="menu_form" enctype="multipart/form-data">
<div class="alert text-center alert-danger mt-1" id="errorMessage">
<label id="l" style="font-size: larger;"></label>
</div>
<div class="row p-2">
<div class="col">
<h3 class="text-center text-dark fw-bold">Menu</h3>
</div>
</div>
<input type="hidden" id="as_id" name="as_id" value="{{as_id}}">
<input type="hidden" id="id" name="id" value="{{datas.id}}">
<div class="row p-3">
<div class="col"> <label for="" class="form-label">Menu Name <span class="text-danger">*</span> :</label>
</div>
<div class="col"><input type="text" name="name" id="name" class="form-control" value="{{datas.title or ''}}">
</div>
</div>
<div class="row p-3">
<div class="col"><label for="" class="form-label">Description :</label></div>
<div class="col"><input type="text" id="description" class="form-control" value="{{datas.description or ''}}">
</div>
</div>
<div class="row p-3">
<div class="col"><label for="" class="form-label">Parent Id <span class="text-danger">*</span> :</label></div>
<div class="col">
<select name="parentid" id="parentid" class="form-select">
<!-- <option value="">--Select Id--</option> -->
<option value="0">Self</option>
{% for i in data or [] %}
{% if i.id|int != menu_id|int %}
<option value="{{i.id}}" {% if i.id == datas.parent_id %} selected {% endif %}>{{i.title}}</option>
{% endif %}
{% endfor %}
{% if datas.parent_id == 0 %}
<option value="0" selected>Self</option>
{% endif %}
<!-- <option value="0">Self</option> -->
</select>
</div>
</div>
{% if datas and datas.parent_id|int == 0 %}
{% set display = 'show' %}
{% else %}
{% set display = 'none' %}
{% endif %}
<div class="menu" style="display: {{display}};">
<div class="row p-3 ">
<div class="col"><label for="" class="form-label">Menu Icon :</label>
</div>
<div class="col">
<input type="file" name="menu_icon" id="menu_icon" class="form-control">
<!-- <button type="button" class="btn btn-primary ms-2" id="convert_btn1">Convert</button> -->
</div>
</div>
<div class="row ">
<div class="col"></div>
<div class="col">
{% if datas %}
<img src="data:image;base64,{{datas.image}}" id="imageview1" alt=""
style="display: {{display}}; width: 100px;">
{% else %}
<img src="" id="imageview1" alt="" style="display: none; width: 100px;">
{% endif %}
</div>
</div>
<!-- <div class="row p-3 ">
<div class="col"></div>
<div class="col"><textarea name="base_code1" id="base_code1" class="form-control base_code"
style="height: 150px;" placeholder="base code" readonly hidden>{{datas.image}}</textarea>
</div>
</div> -->
</div>
<div class="row p-3">
<div class="col"><label for="" class="form-label">Navigation Menu :</label></div>
<div class="col">
{% if datas and datas.navigation_menu|int==1 %}
<input type="checkbox" class="form-check-input" name="navigation_menu" id="navigation_menu" checked
value="1">
{% elif datas and datas.navigation_menu|int==0 %}
<input type="checkbox" class="form-check-input" name="navigation_menu" id="navigation_menu" value="0">
{% else %}
<input type="checkbox" class="form-check-input" name="navigation_menu" id="navigation_menu" value="0">
{% endif %}
</div>
</div>
<div class="navmenu" style="display: {{display}};">
<div class="row p-3 ">
<div class="col">
<label for="" class="form-label"> Navigation Menu :
</label></div>
<div class="col">
<input type="file" name="nav_menu" id="nav_menu" class="form-control">
<!-- <button type="button" name="convert_btn2" class="btn btn-primary ms-2"
id="convert_btn2">Convert</button> -->
</div>
</div>
<div class="row ">
<div class="col"></div>
<div class="col">
{% if datas %}
<img src="data:image;base64,{{datas.menu_icon}}" id="imageview2" alt=""
style="display: {{display}}; width: 100px;">
{% else %}
<img src="" id="imageview2" alt="ImagePreview" style="display: none; width: 100px;">
{% endif %}
</div>
</div>
<!-- <div class="row p-3 ">
<div class="col"></div>
<div class="col"><textarea name="base_code2" id="base_code2" class="form-control" placeholder="base 64 code"
style="height: 150px;" readonly hidden>{{datas.menu_icon}}</textarea>
</div> -->
<!-- </div> -->
</div>
<!-- <div class="row p-3">
<div class="col"><label for="" class="form-label">Banner Id :</label></div>
<div class="col">
<button type="button" class="btn btn-secondary me-3" data-bs-toggle="modal"
data-bs-target="#img_modal">Banner id</button>
{% if assetdatas %}
{% if assetdatas.asset_id == datas.banner_asset_id %}
<img src="data:image;base64,{{assetdatas.asset_data}}" alt="" id="banner_img" class="banner_img"
style="width: 100px; height: 150px;">
{% endif %}
{% else %}
<img src="" alt="" id="banner_img" class="banner_img" style="width: 100px; height: 150px;">
{% endif %}
<input type="hidden" id="bannerid" class="bannerid" value="{{datas.banner_asset_id}}"> -->
<!-- <select name="bannerid" class="form-select" id="bannerid">
<option value="">--Select Id--</option>
{% for i in asset %}
{% if i.asset_id == datas.banner_asset_id %}
<option value="{{i.asset_id}}" selected>{{i.asset_name}}</option>
{% endif %}
<option value="{{i.asset_id}}">{{i.asset_name}}</option>
{% endfor %}
<option value=""></option>
</select> -->
<!-- </div>
</div> -->
<div class="row p-3">
<div class="col"><label for="" class="form-label">Is Visible :</label></div>
<div class="col">
{% if datas and datas.is_visible|int==1 %}
<input type="checkbox" class="form-check-input" name="is_visible" id="is_visible" checked value="1">
{% elif datas and datas.is_visible|int==0 %}
<input type="checkbox" class="form-check-input" name="is_visible" id="is_visible" value="0">
{% else %}
<input type="checkbox" class="form-check-input" name="is_visible" id="is_visible" checked value="1">
{% endif %}
</div>
</div>
<div class="row p-3">
<div class="col"><label for="" class="form-label">Order by <span class="text-danger">*</span> :</label></div>
<div class="col"><input type="number" name="orderby" id="orderby" class="form-control"
value="{{datas.order_by}}"></div>
</div>
<div class="row align-items-center mt-3">
<div class="col"><a href="{{url_for('backoffice.ViewMenuIndex',as_id=as_id)}}"
class="btn btn-primary ms-3 back_btn" id="back_btn">BACK</a>
</div>
<div class="col text-end">
<button type="button" class="btn btn-primary submit_btn me-3" id="submit_btn">SUBMIT</button>
</div>
</div>
</form>
</div>
<!-- <div class="modal fade text-center " tabindex="-1" id="img_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
</div>
<div class="modal-body p-4">
{% for i in asset %}
{% if i.asset_type == 'image' %}
<img src="data:image;base64,{{i.asset_data}}" id="image_view_{{i.asset_id}}" alt=""
class="image_view w-25 m-1" style="height: 150px; border:1px solid black;"
onclick="banner_img_view('{{i.asset_id}}')">
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div> -->
{% endblock %}
{% block script %}
<script type="text/javascript">
var BaseUrl = document.location.origin;
// var confkey = "{{conf_key}}"
$(document).ready(function () {
// Form Validate
$("#menu_form").validate({
rules: {
name: {
required: true
},
parentid: {
required: true
},
orderby: {
required: true
},
},
messages: {
name: {
required: "Please enter a Menu name"
},
parentid: {
required: "Please select an parent id"
},
orderby: {
required: "Please select an order by"
},
},
});
// Menu Icon Input Change
$('#menu_icon').change(function () {
var file = $("#menu_icon")[0].files[0];
if (file.type.startsWith("image/")){
var reader = new FileReader();
reader.onload = function () {
// var basecode = reader.result.replace(/^data:image\/\w+;base64,/, "");
var img_view = reader.result;
$("#imageview1").attr('src', img_view).show();
// $("#base_code1").val(basecode).trigger("input").valid();
};
reader.readAsDataURL(file);
}
else{
alert('Sorry, we can only accept image files.')
}
});
// Nav Menu Input Change
$('#nav_menu').change(function () {
var file = $("#nav_menu")[0].files[0];
if (file.type.startsWith("image/")){
var reader = new FileReader();
reader.onload = function () {
// var basecode = reader.result.replace(/^data:image\/\w+;base64,/, "");
var img_view = reader.result;
$("#imageview2").attr('src', img_view).show();
// $("#base_code2").val(basecode).trigger("input").valid();
};
reader.readAsDataURL(file);
}
else{
alert('Sorry, we can only accept image files.')
}
});
// Parent Id Change
if ($("#parentid").val() == 0) {
$(".menu").show();
$(".navmenu").show();
} else {
$(".menu").hide();
$(".navmenu").hide();
}
$("#parentid").change(function () {
var option_select = this.value;
if (option_select == 0) {
if ($("#navigation_menu").is(":checked") == true) {
$(".menu").show();
$(".navmenu").show();
}
$(".menu").show();
} else {
$(".menu").hide();
$(".navmenu").hide();
}
});
// Navigation Checkbox Change
if ($("#navigation_menu").is(":checked") == true) {
$(".navmenu").show();
}
else {
$(".navmenu").hide();
}
$("#navigation_menu").change(function () {
if ($(this).is(":checked") == true) {
$(".navmenu").show();
}
else {
$(".navmenu").hide();
}
});
// // Banner id Image Tag Hide or Show
// if ($(".banner_img").attr('src') == '') {
// $(".banner_img").hide();
// } else {
// $(".banner_img").show();
// }
});
$("#errorMessage").hide();
// Submit Button Click
$("#submit_btn").click(function () {
if ($("#menu_form").valid()) {
if ($("#navigation_menu").is(":checked") == true) {
$("#navigation_menu").val(1);
}
else {
$("#navigation_menu").val(0);
$("#base_code2").val('');
}
if ($("#is_visible").is(":checked") == true) {
$("#is_visible").val(1);
}
else {
$("#is_visible").val(0);
}
var fd = new FormData();
var menu_id = $("#id").val();
var as_id = $("#as_id").val();
var menuname = $("#name").val();
var description = $("#description").val();
var parentid = $("#parentid").val();
var menu_icon = $("#menu_icon")[0].files[0];
var navigation_menu = $("#navigation_menu").val()
var navmenu = $("#nav_menu")[0].files[0];
var is_visible = $("#is_visible").val();
var orderby = $("#orderby").val();
fd.append('menu_id', menu_id);
// fd.append('confid', confid);
fd.append('menuname', menuname);
fd.append('description', description);
fd.append('parentid', parentid);
fd.append('menu_icon',menu_icon);
fd.append('navigation_menu', navigation_menu);
fd.append('navmenu', navmenu);
fd.append('is_visible', is_visible);
fd.append('orderby', orderby);
$.ajax({
url: BaseUrl + "/post_menu/" + menu_id + "/" + as_id,
type: 'POST',
data: fd,
contentType: false,
processData: false,
cache: false,
dataType: 'json',
success: function (data) {
if (data.status == 1) {
$('#l').html(data.msg);
$("#errorMessage").show();
} else {
window.location.href = BaseUrl + "/view_menu/" + as_id ;
}
}
});
}
else {
return false;
}
});
// // Banner Id Image View
// function banner_img_view(id) {
// $(".banner_img").attr('src', $('#image_view_' + id).attr('src'))
// $('#img_modal').modal('toggle');
// $(".banner_img").show();
// $("#bannerid").val(id);
// }
</script>
{% endblock %}
<!-- </body>
</html> -->
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists