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>View Menu</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body> -->
{% extends 'Backoffice/bo_layout.html' %}
{% block title %}Menu Index {% endblock %}
{% block content %}
<div class="row p-2 mt-2 text-center">
<div class="col-12">
<h3 class="p-2 text-dark ms-2 fw-bold">Menu Index</h3>
</div>
</div>
<div class="row alert text-center alert-success m-3 " id="successMessage">
<div class="col-12">
<label id="l" style="font-size: larger;"></label>
</div>
</div>
<div class="row">
<div class="col">
<input type="hidden" id="as_id" name="as_id" value="{{as_id}}">
<!--<input type="hidden" id="conf_key" name="conf_key" value="{{conf_key}}">-->
</div>
</div>
<div class="row p-2">
<div class="col-lg-6 ms-3">
<!-- <div class="p-1 ms-2 border border-secondary text-center rounded w-75"> -->
<div class="btn-group">
<button type="button" class="visible_btn btn btn-outline-primary" data-status="active" id="active_btn">
ACTIVE
</button>
<button type="button" class="visible_btn btn btn-outline-primary" data-status="all" id="all_btn">
ALL
</button>
<button type="button" class="visible_btn btn btn-outline-primary" data-status="inactive" id="inactive_btn">
INACTIVE
</button>
</div>
<!-- </div> -->
</div>
<div class="col text-end">
<a href="{{url_for('backoffice.GetMenuTable',as_id=as_id)}}" class="btn btn-primary"><i
class="fa fa-plus">ADD</i></a>
</div>
</div>
<div class="row p-1 align-items-center">
<div class="col-lg-6 ms-3" id="status_show">
<input type="hidden" value="{{data1[0].total}}" id="all">
<input type="hidden" value="{{data1[0].active}}" id="active">
<input type="hidden" value="{{data1[0].inactive}}" id="inactive">
<input type="hidden" value="{{status or ''}}" id="btn_status">
<h5 class="fs-6 text-dark"></h5>
</div>
<div class="col-lg-4 text-end">
<input type="search" class="form-control border-secondary me-5" id="search_menu" name="search_menu"
placeholder="Search by Menu Name">
</div>
<div class="col text-end">
<button type="button" class="btn btn-danger delete_all_btn " id="delete_all_btn" value="">Delete All</button>
</div>
</div>
<div class="row p-1">
<div class="col-12">
<div class="mobile-responsive table-responsive">
<table class="table table-bordered table-striped m-2" id="menu_table">
<thead class=" table-dark text-center ">
<tr>
<th scope="col">S.no</th>
<th scope="col">Delete All <br>
<input type="checkbox" name="" id="delete_all_chb">
</th>
<th scope="col">Action</th>
<th scope="col">Menu Name</th>
<th scope="col">Parent Menu</th>
<th scope="col">Page Name</th>
<th scope="col">Is Visible</th>
<th scope="col">Order by</th>
</tr>
</thead>
<tbody>
{% if data %}
{% for d in data %}
<tr id="{{d.id}}" class="all_status_{{d.visible_status}}">
<td data-label="S.no">{{loop.index}}</td>
<td data-label="DeleteAll" class="text-center">
<input type="checkbox" class="delete_chb_{{d.visible_status}}" name="delete_chb"
id="delete_chb" value="{{d.id}}">
</td>
<td data-label="Action" class="d-flex justify-content-evenly">
<a href="{{url_for('backoffice.GetMenuTable',menu_id=d.id,as_id=as_id)}}"
class="btn btn-primary"><i class="fa fa-edit"></i></a>
<button type="button" class="btn btn-danger delete_btn ms-1" id="delete_btn"
value="{{d.id}}"><i class="fa fa-trash"></i></button>
</td>
<td data-label="Menuname">{{d.title}}</td>
<td data-label="Parentmenu">{% if d.parent_id|int == 0 %} Main Menu {% else %} Sub Menu {% endif
%}
</td>
<td data-label="Pagename">{{d.page_name or '-'}}</td>
<td data-label="Isvisible" class="text-center">
{% if d.visible_status == 'active'%}
<span class="badge bg-success">Active</span>
{% else %}
<span class="badge bg-danger">InActive</span>
{% endif %}
</td>
<td data-label="Orderby" class="text-center">{{d.order_by}}</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}
{% block script %}
<script>
var BaseUrl = document.location.origin;
$(document).ready(function () {
// $(".all_status_inactive").hide();
// $(".all_status_active").show();
$(".all_status_all").show();
var all = $("#all").val();
if ($('#btn_status').val() == '') {
$('#btn_status').val('all')
$("#status_show h5").html("ALL MENU - COUNT(" + all + ")");
} else {
var status = $('#btn_status').val();
show_fields(status)
}
$(".visible_btn").click(function () {
var status = $(this).attr('data-status')
$('#btn_status').val(status);
show_fields(status)
})
$("#successMessage").hide();
// Delete Buttton Click
$(".delete_btn").click(function () {
var menu_id = this.value;
var as_id = $("#as_id").val();
// var conf_key = $("#conf_key").val();
var val = 1
if (confirm('Are you sure you want to Delete?')) {
$.ajax({
url: BaseUrl + "/delete_menu/" + val + "/" + as_id,
data: { 'menu_id': menu_id },
type: 'GET',
dataType: 'json',
success: function (data) {
$('#' + menu_id).remove();
$('#l').html(data.msg);
$("#successMessage").show();
}
});
}
else {
}
});
// Search By Menu Name
$('#search_menu').keyup(function () {
var status = $('#btn_status').val();
var search = $(this).val().toLowerCase();
if (status == 'all') {
$("#menu_table tbody tr").filter(function () {
var menu_col = $(this).find("td:eq(3)").text().toLowerCase();
$(this).toggle(menu_col.indexOf(search) > -1);
});
} else {
$("#menu_table tbody tr.all_status_" + status).filter(function () {
var menu_col = $(this).find("td:eq(3)").text().toLowerCase();
$(this).toggle(menu_col.indexOf(search) > -1);
});
}
});
// Delete All Checkbox Change
$("#delete_all_chb").change(function () {
var btn_status = $('#btn_status').val();
if ($(this).is(":checked")) {
if (btn_status == 'all') {
$(".delete_chb_active").prop("checked", true);
$(".delete_chb_inactive").prop("checked", true);
}
else {
$(".delete_chb_" + btn_status).prop("checked", true);
}
} else {
$(".delete_chb_active").prop("checked", false);
$(".delete_chb_inactive").prop("checked", false);
}
});
$("#delete_all_btn").hide();
$("[type=checkbox]").change(function () {
if (($("[name=delete_chb]")).is(":checked", true)) {
$("#delete_all_btn").show();
} else {
$("#delete_all_btn").hide();
}
})
// Delete All Button Click
$("#delete_all_btn").click(function () {
var as_id = $("#as_id").val();
// var conf_key = $("#conf_key").val();
var val = 0
if (confirm('Are you sure you want to Delete?')) {
$.ajax({
url: BaseUrl + "/delete_menu/" + val + "/" + as_id ,
type: 'GET',
data: $("[name=delete_chb]").serialize(),
dataType: 'json',
success: function (data) {
window.location.href = BaseUrl + "/view_menu/" + as_id;
$('#l').html(data.msg);
$("#successMessage").show();
}
});
}
else {
}
});
});
// Status Active,Inactive,All
$("#all_btn").addClass('active');
function show_fields(status) {
var all = $("#all").val();
var active = $("#active").val();
var inactive = $("#inactive").val();
if (status == 'active') {
$(".all_status_inactive").hide();
$(".all_status_active").show();
$("#status_show h5").html("ACTIVE MENU - COUNT(" + active + ")");
$("#active_btn").addClass('active');
$("#inactive_btn").removeClass('active');
$("#all_btn").removeClass('active');
}
if (status == 'inactive') {
$(".all_status_active").hide();
$(".all_status_inactive").show();
$("#status_show h5").html("INACTIVE MENU - COUNT(" + inactive + ")");
$("#inactive_btn").addClass('active');
$("#active_btn").removeClass('active');
$("#all_btn").removeClass('active');
}
if (status == 'all') {
$(".all_status_active").show();
$(".all_status_inactive").show();
$("#status_show h5").html("ALL MENU - COUNT(" + all + ")");
$("#all_btn").addClass('active');
$("#inactive_btn").removeClass('active');
$("#active_btn").removeClass('active');
}
};
</script>
{% endblock %}
<!-- </body>
</html> -->
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists