made drag and dropable page, it is saving positions in database and localstorage. in this commit I also upload sql file of the table I created.
This commit is contained in:
parent
5ff66c5e3a
commit
b9ee06121a
32
dbbackup/auth_chart_order.sql
Normal file
32
dbbackup/auth_chart_order.sql
Normal file
@ -0,0 +1,32 @@
|
||||
/*
|
||||
Navicat Premium Dump SQL
|
||||
|
||||
Source Server : local
|
||||
Source Server Type : MySQL
|
||||
Source Server Version : 100432 (10.4.32-MariaDB)
|
||||
Source Host : localhost:3306
|
||||
Source Schema : reportifynew
|
||||
|
||||
Target Server Type : MySQL
|
||||
Target Server Version : 100432 (10.4.32-MariaDB)
|
||||
File Encoding : 65001
|
||||
|
||||
Date: 25/09/2024 01:08:34
|
||||
*/
|
||||
|
||||
SET NAMES utf8mb4;
|
||||
SET FOREIGN_KEY_CHECKS = 0;
|
||||
|
||||
-- ----------------------------
|
||||
-- Table structure for auth_chart_order
|
||||
-- ----------------------------
|
||||
DROP TABLE IF EXISTS `auth_chart_order`;
|
||||
CREATE TABLE `auth_chart_order` (
|
||||
`id` int NOT NULL,
|
||||
`user_id` int NULL DEFAULT NULL,
|
||||
`order` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
|
||||
`insert_date` datetime NULL DEFAULT current_timestamp ON UPDATE CURRENT_TIMESTAMP,
|
||||
PRIMARY KEY (`id`) USING BTREE
|
||||
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
|
||||
|
||||
SET FOREIGN_KEY_CHECKS = 1;
|
||||
38
public/userarea/statkpi/chartorder.php
Normal file
38
public/userarea/statkpi/chartorder.php
Normal file
@ -0,0 +1,38 @@
|
||||
<?php
|
||||
include('../../Connections/repnew.php');
|
||||
include('../include/headscript.php');
|
||||
include("../class/company.php");
|
||||
|
||||
$conn = new mysqli($servername, $username, $password, $database);
|
||||
|
||||
if ($conn->connect_error) {
|
||||
die("Connection failed: " . $conn->connect_error);
|
||||
}
|
||||
|
||||
// two methods save and load data
|
||||
if ($_POST['method'] == 'save') {
|
||||
$order = $_POST['order'];
|
||||
$user_id = $iduserlogin;
|
||||
// check if user already have order
|
||||
$sql = "SELECT * FROM auth_chart_order WHERE user_id = $user_id";
|
||||
$result = $conn->query($sql);
|
||||
$order = implode(',', $order);
|
||||
if ($result->num_rows > 0) {
|
||||
$sql = "UPDATE auth_chart_order SET `order` = '$order' WHERE user_id = $user_id";
|
||||
} else {
|
||||
$sql = "INSERT INTO auth_chart_order (user_id, `order`) VALUES ($user_id, '$order')";
|
||||
}
|
||||
$conn->query($sql);
|
||||
echo 'Data saved';
|
||||
} else if($_POST['method'] == 'load') {
|
||||
$sql = "SELECT `order` FROM auth_chart_order WHERE user_id = $iduserlogin ORDER BY insert_date DESC LIMIT 1";
|
||||
$result = $conn->query($sql);
|
||||
if($result->num_rows == 0) {
|
||||
echo json_encode([]);
|
||||
return;
|
||||
}else{
|
||||
$row = $result->fetch_assoc();
|
||||
$order_list = explode(',', $row['order']);
|
||||
echo json_encode($order_list);
|
||||
}
|
||||
}
|
||||
@ -193,6 +193,17 @@ include('parsedatachart.php');
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
margin: 20px;
|
||||
}
|
||||
.chart-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
@ -429,56 +440,59 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="chart-container" id="charts">
|
||||
|
||||
<div class="row chart-box" id="chart1" data-id="1">
|
||||
<div class="col-xl-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<!-- cards -->
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-md-2 col-sm-6">
|
||||
<div class="card text-center bg-light border-primary">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Products</h5>
|
||||
<h2 id="totalProducts">0</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-6">
|
||||
<div class="card text-center bg-light border-info">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Reports</h5>
|
||||
<h2 id="totalReports">0</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-6">
|
||||
<div class="card text-center bg-light border-danger">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Failed Reports</h5>
|
||||
<div class="d-flex justify-content-center align-items-baseline">
|
||||
<h2 id="failedReports">0</h2>
|
||||
<span class="percentage text-danger" id="failedReportsPercent" style="margin-left: 10px;">(0%)</span>
|
||||
<!-- cards -->
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-md-2 col-sm-6">
|
||||
<div class="card text-center bg-light border-primary">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Products</h5>
|
||||
<h2 id="totalProducts">0</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-6">
|
||||
<div class="card text-center bg-light border-success">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Total Tests</h5>
|
||||
<h2 id="totalTests">0</h2>
|
||||
<div class="col-md-2 col-sm-6">
|
||||
<div class="card text-center bg-light border-info">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Reports</h5>
|
||||
<h2 id="totalReports">0</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-6">
|
||||
<div class="card text-center bg-light border-warning">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Failed Tests</h5>
|
||||
<div class="d-flex justify-content-center align-items-baseline">
|
||||
<h2 id="failedTests">0</h2>
|
||||
<span class="percentage text-danger" id="failedTestsPercent" style="margin-left: 10px;">(0%)</span>
|
||||
<div class="col-md-2 col-sm-6">
|
||||
<div class="card text-center bg-light border-danger">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Failed Reports</h5>
|
||||
<div class="d-flex justify-content-center align-items-baseline">
|
||||
<h2 id="failedReports">0</h2>
|
||||
<span class="percentage text-danger" id="failedReportsPercent" style="margin-left: 10px;">(0%)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-6">
|
||||
<div class="card text-center bg-light border-success">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Total Tests</h5>
|
||||
<h2 id="totalTests">0</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-6">
|
||||
<div class="card text-center bg-light border-warning">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Failed Tests</h5>
|
||||
<div class="d-flex justify-content-center align-items-baseline">
|
||||
<h2 id="failedTests">0</h2>
|
||||
<span class="percentage text-danger" id="failedTestsPercent" style="margin-left: 10px;">(0%)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -487,64 +501,63 @@ include('parsedatachart.php');
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4"> <!-- Colonna per il primo grafico (Pie Chart) -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" id="reports_overview">Reports Overview</h5>
|
||||
<div id="reportPieChart"></div>
|
||||
<div class="row chart-box" id="chart2" data-id="2">
|
||||
<div class="col-md-4"> <!-- Colonna per il primo grafico (Pie Chart) -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" id="reports_overview">Reports Overview</h5>
|
||||
<div id="reportPieChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8"> <!-- Colonna per il secondo grafico -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Worst Analysis</h5>
|
||||
<div id="worsttenanalysis"></div> <!-- Questo è lo spazio per il secondo grafico -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8"> <!-- Colonna per il secondo grafico -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Worst Analysis</h5>
|
||||
<div id="worsttenanalysis"></div> <!-- Questo è lo spazio per il secondo grafico -->
|
||||
|
||||
<div class="row chart-box" id="chart3" data-id="3">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Worst Suppliers by Failed Report Percentage</h5>
|
||||
<div id="worstSuppliersChart"></div> <!-- Il grafico verrà inserito qui -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Worst Suppliers by Failed Report Percentage</h5>
|
||||
<div id="worstSuppliersChart"></div> <!-- Il grafico verrà inserito qui -->
|
||||
<div class="row chart-box" id="chart4" data-id="4">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Number of Products by Supplier</h5>
|
||||
<div id="productBySupplierChart"></div> <!-- Lo spazio per il grafico -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Number of Products by Supplier</h5>
|
||||
<div id="productBySupplierChart"></div> <!-- Lo spazio per il grafico -->
|
||||
<div class="row chart-box" id="chart5" data-id="5">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Analysis Distribution</h5>
|
||||
<div id="analysisDistributionChart"></div> <!-- Il grafico verrà inserito qui -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Analysis Distribution</h5>
|
||||
<div id="analysisDistributionChart"></div> <!-- Il grafico verrà inserito qui -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div><!-- container -->
|
||||
|
||||
</div> <!-- Page content Wrapper -->
|
||||
@ -558,7 +571,73 @@ include('parsedatachart.php');
|
||||
|
||||
</div>
|
||||
<!-- END wrapper -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const chartContainer = document.getElementById('charts');
|
||||
const sortable = new Sortable(chartContainer, {
|
||||
animation: 150,
|
||||
onEnd: function () {
|
||||
saveChartOrder(); // Save chart order after dragging
|
||||
}
|
||||
});
|
||||
|
||||
// Function to save chart order to localStorage
|
||||
function saveChartOrder() {
|
||||
const order = Array.from(chartContainer.children).map(chart => chart.dataset.id);
|
||||
localStorage.setItem('chartOrder', JSON.stringify(order));
|
||||
|
||||
// lets save it for the user
|
||||
$.ajax({
|
||||
url: 'chartorder.php',
|
||||
method: 'POST',
|
||||
data: {
|
||||
method:'save',
|
||||
order: order
|
||||
},
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
},
|
||||
error: function() {
|
||||
alert('Error saving chart order.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Function to restore chart order from localStorage
|
||||
function loadChartOrder() {
|
||||
|
||||
// Load the saved order from localStorage
|
||||
|
||||
const savedOrder = JSON.parse(localStorage.getItem('chartOrder'));
|
||||
if (savedOrder) {
|
||||
savedOrder.forEach(id => {
|
||||
const chart = document.querySelector(`[data-id='${id}']`);
|
||||
chartContainer.appendChild(chart); // Append charts in saved order
|
||||
});
|
||||
}
|
||||
|
||||
// Load the saved order from the database
|
||||
$.ajax({
|
||||
url: 'chartorder.php',
|
||||
method: 'POST',
|
||||
data: {
|
||||
method:'load'
|
||||
},
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
const order = JSON.parse(response);
|
||||
order.forEach(id => {
|
||||
const chart = document.querySelector(`[data-id='${id}']`);
|
||||
chartContainer.appendChild(chart); // Append charts in saved order
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Load the saved chart order when the page loads
|
||||
loadChartOrder();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user