Hugging Face's logo

Spaces:
RANATI
/
ARAZIM
Runtime error

App Files Community
ARAZIM / templates /admin-dashboard.html
RANA
Add application file
53143bf
raw
history blame contribute delete
22.2 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ARAZIM</title>
<link rel="shortcut icon" type="image/png" href="../static/images/logos/Logo.png" />
<link rel="stylesheet" href="../static/styles/styles.min.css" />
<link rel="stylesheet" href="../static/styles/icons/tabler-icons/tabler-icons.css"/>
<link
rel="stylesheet"
href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
/>
</head>
<style>
#calendar {
width: 300px;
}
#calendar_weekdays div {
display: inline-block;
vertical-align: top;
}
#calendar_content,
#calendar_weekdays,
#calendar_header {
position: relative;
width: 300px;
overflow: hidden;
float: left;
z-index: 10;
}
#calendar_weekdays div,
#calendar_content div {
width: 40px;
height: 40px;
overflow: hidden;
text-align: center;
background-color: #ffffff;
color: #545454;
font-weight: 700;
}
#calendar_content {
-webkit-border-radius: 0px 0px 12px 12px;
-moz-border-radius: 0px 0px 12px 12px;
border-radius: 0px 0px 12px 12px;
}
#calendar_content div {
float: left;
}
#calendar_content div:hover {
background-color: #f8f8f8;
}
#calendar_content div.blank {
background-color: #e8e8e8;
}
#calendar_header,
#calendar_content div.today {
zoom: 1;
filter: alpha(opacity=70);
opacity: 0.7;
}
#calendar_content div.today {
color: #ffffff;
}
#calendar_header {
width: 100%;
height: 37px;
text-align: center;
background-color: #7bcfff;
padding: 18px 0;
-webkit-border-radius: 12px 12px 0px 0px;
-moz-border-radius: 12px 12px 0px 0px;
border-radius: 12px 12px 0px 0px;
}
#calendar_header h1 {
font-size: 1.5em;
color: #ffffff;
float: left;
width: 70%;
}
i[class^="icon-chevron"] {
color: #ffffff;
float: left;
width: 15%;
margin-top: -20px;
border-radius: 50%;
}
</style>
<body>
<!-- Body Wrapper -->
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
data-sidebar-position="fixed" data-header-position="fixed">
<!-- Sidebar Start -->
<aside class="left-sidebar" style="border-right: 1px solid rgb(199, 199, 199)">
<!-- Sidebar scroll-->
<div>
<div class="brand-logo d-flex align-items-center justify-content-between">
<a href="{{ url_for('admin') }}" class="text-nowrap logo-img">
<img src="../static/images/logos/Logo.png" width="180" alt="" />
</a>
<div class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" id="sidebarCollapse">
<i class="ti ti-x fs-8"></i>
</div>
</div>
<!-- Sidebar navigation-->
<nav class="sidebar-nav scroll-sidebar" data-simplebar="">
<ul id="sidebarnav">
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Useful Links</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ url_for('admin') }}" aria-expanded="false">
<span>
<i class="ti ti-layout-dashboard"></i>
</span>
<span class="hide-menu">Dashboard</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="#" aria-expanded="false">
<span>
<i class="ti ti-article"></i>
</span>
<span class="hide-menu">User Searching</span>
</a>
</li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<!-- Sidebar End -->
<!-- Main wrapper -->
<div class="body-wrapper">
<!-- Header Start -->
<header class="app-header" style="border-bottom: 1px solid rgb(199, 199, 199); z-index: 999">
<nav class="navbar navbar-expand-lg navbar-light">
<ul class="navbar-nav">
<li class="nav-item d-block d-xl-none">
<a class="nav-link sidebartoggler nav-icon-hover" id="headerCollapse" href="javascript:void(0)">
<i class="ti ti-menu-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-icon-hover" href="javascript:void(0)">
<i class="ti ti-bell-ringing"></i>
<div class="notification bg-primary rounded-circle"></div>
</a>
</li>
</ul>
<div class="navbar-collapse justify-content-end px-0" id="navbarNav">
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-end">
<a href="#" target="_blank" class="btn btn-primary">Welcome, {{ user_name }}!</a>
<li class="nav-item dropdown">
<a class="nav-link nav-icon-hover" href="javascript:void(0)" id="drop2" data-bs-toggle="dropdown"
aria-expanded="false">
<img src="../static/images/profile/user-1.jpg" alt="" width="35" height="35" class="rounded-circle">
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
<div class="message-body">
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-user fs-6"></i>
<p class="mb-0 fs-3">My Profile</p>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-mail fs-6"></i>
<p class="mb-0 fs-3">My Account</p>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-list-check fs-6"></i>
<p class="mb-0 fs-3">My Task</p>
</a>
<!-- <a href="../templates/authentication-login.html" class="btn btn-outline-primary mx-3 mt-2 d-block">Logout</a> -->
<a href="{{ url_for('logout') }}" id="logout-btn" class="btn btn-outline-primary mx-3 mt-2 d-block">Logout</a>
</div>
</div>
</li>
</ul>
</div>
</nav>
</header>
<!-- Header End -->
<div class="container-fluid">
<!-- Row 1 -->
<div class="row">
<div class="col-lg-8 d-flex align-items-strech">
<div class="card w-100">
<div class="card-body">
<div
class="d-sm-flex d-block align-items-center justify-content-between mb-9"
>
<div class="mb-3 mb-sm-0">
<h5 class="card-title fw-semibold">Posts Overview</h5>
</div>
</div>
<div id="chart1"></div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12">
<!-- Yearly Breakup -->
<div class="card overflow-hidden">
<div class="card-body p-4">
<h5 class="card-title mb-9 fw-semibold">
Post Information
</h5>
<div class="row align-items-center">
<div class="col-8">
<h4 class="fw-semibold mb-3">Donut Graph</h4>
<div class="d-flex align-items-center mb-3">
<!-- <p class="text-dark me-1 fs-3 mb-0">+9%</p> -->
<p class="fs-3 mb-0">
Overall seller and buyer posts distribution in
donut graph
</p>
</div>
<div class="d-flex align-items-center">
<div class="me-4">
<span
class="round-8 bg-primary rounded-circle me-2 d-inline-block"
></span>
<span class="fs-2">Seller</span>
</div>
<div>
<span
class="round-8 bg-secondary rounded-circle me-2 d-inline-block"
></span>
<span class="fs-2">Buyer</span>
</div>
</div>
</div>
<div class="col-4">
<div class="d-flex justify-content-center">
<div id="breakup1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<!-- Monthly Earnings -->
<div class="card">
<div class="card-body">
<div class="row alig n-items-start">
<div class="col-8">
<h5 class="card-title mb-9 fw-semibold">Line Graph Overview</h5>
</div>
</div>
</div>
<div id="earning"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 d-flex align-items-stretch">
<div class="card w-100">
<div class="card-body p-4">
<h1><b>Admin Panel</b></h1>
<br><br>
<a href="{{ url_for('AdminResults') }}" target="_blank" class="btn btn-primary">Results</a>
<br><br>
<form action="{{ url_for('AdminResults') }}" method="POST">
<div class="table-responsive">
<table class="table mb-0 align-middle">
<thead class="text-dark fs-4">
<tr>
<th class="border-bottom-0">
<h5 class="fw-semibold mb-0">Post</h4>
</th>
<th class="border-bottom-0">
<h5 class="fw-semibold mb-0">Label</h4>
</th>
<th class="border-bottom-0">
<h5 class="fw-semibold mb-0">
<label>
Select All&nbsp&nbsp
<input type="checkbox" class="select-all-checkbox">
</label>
</h4>
</th>
</tr>
</thead>
<tbody>
{% for post, label in results %}
<tr>
<td class="border-bottom-0" style="width: 900px">
<p class="mb-0 fw-normal">{{ post }}</p>
</td>
<td class="border-bottom-0" style="width: 100px">
<p class="mb-0 fw-normal">{{ label }}</p>
</td>
<td class="border-bottom-0">
<input type="checkbox" class="select-checkbox" name="selected-rows" value="{{ loop.index }}">
</td>
</tr>
{% endfor %}
</tbody>
</table>
<br>
<br>
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{{url_for('static', filename='jquery.min.js')}}"></script>
<script src="{{url_for('static', filename='bootstrap.bundle.min.js')}}"></script>
<script src="{{url_for('static', filename='sidebarmenu.js')}}"></script>
<script src="{{url_for('static', filename='app.min.js')}}"></script>
<script src="{{url_for('static', filename='simplebar.js')}}"></script>
<script src="{{url_for('static', filename='sidebarmenu.js')}}"></script>
<script src="{{url_for('static', filename='apexcharts.min.js')}}"></script>
<script src="{{url_for('static', filename='dashboard.js')}}"></script>
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<script>
$(document).ready(function() {
$('.select-all-checkbox').change(function() {
$('.select-checkbox').prop('checked', $(this).prop('checked'));
});
});
</script>
<script>
// Function to fetch post counts from the back-end
async function getPostCounts() {
const response = await fetch("/post_counts");
const data = await response.json();
return data;
}
// Function to create the bar graph using ApexCharts.js
async function createBarGraph() {
const data = await getPostCounts();
// Configuration options for the bar graph
const options = {
chart: {
type: "bar",
toolbar: {
show: true, // Set to true to show the toolbar
},
downloadMenu: {
// Options for the download menu
csv: false, // Set to true to enable CSV download
excel: false, // Set to true to enable Excel download
svg: true, // Set to true to enable SVG download
png: true, // Set to true to enable PNG download
jpeg: true, // Set to true to enable JPEG download
pdf: true, // Set to true to enable PDF download
},
},
colors: ["#5d87ff", "#64c7ff"], // Custom colors for Seller and Buyer bars
series: [
{
name: "Number of Posts",
data: [data.seller_posts, data.buyer_posts],
},
],
xaxis: {
categories: ["Seller", "Buyer"],
},
plotOptions: {
bar: {
distributed: true, // Display bars with equal spacing across the chart
},
},
};
// Get the chart container element
const chartContainer = document.getElementById("chart1");
// Check if there's an existing chart and destroy it before creating the new one
if (chartContainer._chart) {
chartContainer._chart.destroy();
}
// Create the bar graph using ApexCharts
const chart = new ApexCharts(chartContainer, options);
chart.render();
}
// Call the function to create the bar graph
createBarGraph();
</script>
<script>
// Function to fetch post counts from the back-end
async function getPostCounts() {
const response = await fetch("/post_counts");
const data = await response.json();
return data;
}
// Function to create the donut chart using ApexCharts.js
async function createDonutChart() {
const data = await getPostCounts();
// Configuration options for the donut chart
const options = {
chart: {
type: "donut",
width: "150", // Set the width of the chart (in pixels)
height: "150", // Set the height of the chart (in pixels)
},
series: [data.buyer_posts, data.seller_posts],
labels: ["Buyer", "Seller"],
colors: ["#5d87ff", "#64c7ff"], // Custom colors for Buyer and Seller sections
dataLabels: {
enabled: false,
formatter: function (val, opts) {
return opts.w.config.series[opts.seriesIndex] + " posts"; // Display the post count as a data label
},
},
legend: {
show: false, // Set to false to hide the legends
},
};
// Get the chart container element
const chartContainer = document.getElementById("breakup1");
// Check if there's an existing chart and destroy it before creating the new one
if (chartContainer._chart) {
chartContainer._chart.destroy();
}
// Create the donut chart using ApexCharts
const chart = new ApexCharts(chartContainer, options);
chart.render();
}
// Call the function to create the donut chart
createDonutChart();
</script>
<script>
$(function () {
function c() {
p();
var e = h();
var r = 0;
var u = false;
l.empty();
while (!u) {
if (s[r] == e[0].weekday) {
u = true;
} else {
l.append('<div class="blank"></div>');
r++;
}
}
for (var c = 0; c < 42 - r; c++) {
if (c >= e.length) {
l.append('<div class="blank"></div>');
} else {
var v = e[c].day;
var m = g(new Date(t, n - 1, v))
? '<div class="today">'
: "<div>";
l.append(m + "" + v + "</div>");
}
}
var y = o[n - 1];
a.css("background-color", y)
.find("h1")
.text(i[n - 1] + " " + t);
f.find("div").css("color", y);
l.find(".today").css("background-color", y);
d();
}
function h() {
var e = [];
for (var r = 1; r < v(t, n) + 1; r++) {
e.push({ day: r, weekday: s[m(t, n, r)] });
}
return e;
}
function p() {
f.empty();
for (var e = 0; e < 7; e++) {
f.append("<div>" + s[e].substring(0, 3) + "</div>");
}
}
function d() {
var t;
var n = $("#calendar").css("width", e + "px");
n.find((t = "#calendar_weekdays, #calendar_content"))
.css("width", e + "px")
.find("div")
.css({
width: e / 7 + "px",
height: e / 7 + "px",
"line-height": e / 7 + "px",
});
n.find("#calendar_header")
.css({ height: e * (1 / 7) + "px" })
.find('i[class^="icon-chevron"]')
.css("line-height", e * (1 / 7) + "px");
}
function v(e, t) {
return new Date(e, t, 0).getDate();
}
function m(e, t, n) {
return new Date(e, t - 1, n).getDay();
}
function g(e) {
return y(new Date()) == y(e);
}
function y(e) {
return e.getFullYear() + "/" + (e.getMonth() + 1) + "/" + e.getDate();
}
function b() {
var e = new Date();
t = e.getFullYear();
n = e.getMonth() + 1;
}
var e = 480;
var t = 2013;
var n = 9;
var r = [];
var i = [
"JANUARY",
"FEBRUARY",
"MARCH",
"APRIL",
"MAY",
"JUNE",
"JULY",
"AUGUST",
"SEPTEMBER",
"OCTOBER",
"NOVEMBER",
"DECEMBER",
];
var s = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
var o = [
"#5d87ff",
"#5d87ff",
"#5d87ff",
"#5d87ff",
"#5d87ff",
"#5d87ff",
"#5d87ff",
"#5d87ff",
"#5d87ff",
"#5d87ff",
"#5d87ff",
"#5d87ff",
];
var u = $("#calendar");
var a = u.find("#calendar_header");
var f = u.find("#calendar_weekdays");
var l = u.find("#calendar_content");
b();
c();
a.find('i[class^="icon-chevron"]').on("click", function () {
var e = $(this);
var r = function (e) {
n = e == "next" ? n + 1 : n - 1;
if (n < 1) {
n = 12;
t--;
} else if (n > 12) {
n = 1;
t++;
}
c();
};
if (e.attr("class").indexOf("left") != -1) {
r("previous");
} else {
r("next");
}
});
});
</script>
</body>
</html>