AS1024
/
itflow
mirror of https://github.com/itflow-org/itflow
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add timers modal to see all timers

This commit is contained in:
Andrew Malsbury 2023-11-12 23:47:44 +00:00
parent 5c0ab72d69
commit 47fe6fe233
6 changed files with 164 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
footer.php
View File

@ -15,6 +15,7 @@
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom js--> <!-- Custom js-->
<script src="js/header_timers.js"></script>
<script src="plugins/moment/moment.min.js"></script> <script src="plugins/moment/moment.min.js"></script>
<script src="plugins/chart.js/Chart.min.js"></script> <script src="plugins/chart.js/Chart.min.js"></script>
<script src="plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script> <script src="plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
@ -26,6 +27,7 @@
<script src="plugins/clipboardjs/clipboard.min.js"></script> <script src="plugins/clipboardjs/clipboard.min.js"></script>
<script src="js/keepalive.js"></script> <script src="js/keepalive.js"></script>
<!-- AdminLTE App --> <!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script> <script src="dist/js/adminlte.min.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>

105
js/header_timers.js Normal file
View File

@ -0,0 +1,105 @@
// ticketCounter.js
(function() {
function getRunningTicketCount() {
let count = 0;
for (let i = 0; i < localStorage.length; i++) {
let key = localStorage.key(i);
if (key.includes("ticket-timer-running")) {
let isRunning = JSON.parse(localStorage.getItem(key));
if (isRunning) {
count++;
}
}
}
return count;
}
function updateTicketCountDisplay() {
let count = getRunningTicketCount();
let countDisplay = document.getElementById("runningTicketsCount");
if (countDisplay) {
countDisplay.innerText = count;
}
}
function getElapsedSeconds(ticketID) {
let storedStartTime = parseInt(localStorage.getItem(ticketID + "-startTime") || "0");
let pausedTime = parseInt(localStorage.getItem(ticketID + "-pausedTime") || "0");
if (!storedStartTime) return pausedTime;
let timeSinceStart = Math.floor((Date.now() - storedStartTime) / 1000);
return pausedTime + timeSinceStart;
}
function formatTime(seconds) {
let hours = Math.floor(seconds / 3600);
let minutes = Math.floor((seconds % 3600) / 60);
let secs = seconds % 60;
return `${hours}h ${minutes}m ${secs}s`;
}
function loadOpenTickets() {
var openTicketsContainer = document.getElementById('openTicketsContainer');
openTicketsContainer.innerHTML = ''; // Clear existing content
for (let i = 0; i < localStorage.length; i++) {
let key = localStorage.key(i);
if (key.startsWith("ticket-timer-running-")) {
let ticketID = key.replace("ticket-timer-running-", "");
let isRunning = JSON.parse(localStorage.getItem(key));
var ticketDiv = document.createElement('div');
ticketDiv.classList.add('card', 'card-outline', 'mb-3');
// Add class based on ticket status
ticketDiv.classList.add(isRunning ? 'card-info' : 'card-warning');
ticketDiv.id = 'ticket-' + ticketID;
let elapsedSecs = getElapsedSeconds(ticketID);
let timeString = formatTime(elapsedSecs);
ticketDiv.innerHTML = `
<div class="card-header">
<h3 class="card-title">Ticket ID: ${ticketID}</h3>
<a href="https://develop.twe.tech/ticket.php?ticket_id=${ticketID}" class="btn btn-primary float-right">View Ticket</a>
</div>
<div class="card-body">
<p id="time-${ticketID}">Total Time: ${timeString}</p>
</div>
`;
openTicketsContainer.appendChild(ticketDiv);
}
}
requestAnimationFrame(() => updateRunningTickets());
}
function updateRunningTickets() {
var runningTickets = document.querySelectorAll('[id^="ticket-"]');
runningTickets.forEach(ticket => {
let ticketID = ticket.id.replace("ticket-", "");
let isRunning = JSON.parse(localStorage.getItem("ticket-timer-running-" + ticketID));
if (isRunning) {
let updatedTime = formatTime(getElapsedSeconds(ticketID));
document.getElementById('time-' + ticketID).innerText = 'Total Time: ' + updatedTime;
}
});
requestAnimationFrame(updateRunningTickets);
}
// Initial update on script load
updateTicketCountDisplay();
// Add event listener to modal
document.addEventListener('DOMContentLoaded', function() {
var modal = document.getElementById('openTicketsModal');
if (modal) {
$('#openTicketsModal').on('show.bs.modal', loadOpenTickets);
}
});
})();

22
js/ticket_time_tracking.js
View File

@ -8,6 +8,8 @@
var ticketID = getCurrentTicketID(); var ticketID = getCurrentTicketID();
var elapsedSecs = getElapsedSeconds(); var elapsedSecs = getElapsedSeconds();
updateRunningTicketsCount();
function getCurrentTicketID() { function getCurrentTicketID() {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
return urlParams.get('ticket_id'); return urlParams.get('ticket_id');
@ -53,6 +55,9 @@
timerInterval = setInterval(countTime, 1000); timerInterval = setInterval(countTime, 1000);
isPaused = false; isPaused = false;
document.getElementById("startStopTimer").innerText = "Pause"; document.getElementById("startStopTimer").innerText = "Pause";
updateRunningTicketsCount();
localStorage.setItem("ticket-timer-running-" + ticketID, "true");
} }
function pauseTimer() { function pauseTimer() {
@ -65,6 +70,9 @@
localStorage.removeItem(getLocalStorageKey("startTime")); localStorage.removeItem(getLocalStorageKey("startTime"));
isPaused = true; isPaused = true;
document.getElementById("startStopTimer").innerText = "Start"; document.getElementById("startStopTimer").innerText = "Start";
updateRunningTicketsCount();
localStorage.setItem("ticket-timer-running-" + ticketID, "false");
} }
function clearTimeStorage() { function clearTimeStorage() {
@ -81,6 +89,8 @@
displayTime(); displayTime();
document.getElementById("startStopTimer").innerText = "Start"; document.getElementById("startStopTimer").innerText = "Start";
} }
localStorage.setItem("ticket-timer-running-" + ticketID, "false");
updateRunningTicketsCount();
} }
function forceResetTimer() { function forceResetTimer() {
@ -114,6 +124,18 @@
localStorage.removeItem(getLocalStorageKey("pausedTime")); localStorage.removeItem(getLocalStorageKey("pausedTime"));
} }
} }
function updateRunningTicketsCount() {
var runningTickets = parseInt(document.getElementById('runningTicketsCount').innerText, 10);
if (!isPaused && timerInterval) {
runningTickets += 1;
} else {
runningTickets = Math.max(0, runningTickets - 1);
}
document.getElementById('runningTicketsCount').innerText = runningTickets.toString();
}
document.getElementById("hours").addEventListener('change', updateTimeFromInput); document.getElementById("hours").addEventListener('change', updateTimeFromInput);
document.getElementById("minutes").addEventListener('change', updateTimeFromInput); document.getElementById("minutes").addEventListener('change', updateTimeFromInput);

8
ticket.php
View File

@ -316,7 +316,7 @@ if (isset($_GET['ticket_id'])) {
</div> </div>
<!-- Time Tracking: Hours --> <!-- Time Tracking: Hours -->
<div class="col-md-2"> <div class="col-md-3">
<div class="input-group mb-3"> <div class="input-group mb-3">
<input type="number" class="form-control" id="hours" name="hours" placeholder="Hours" min="0" max="23"> <input type="number" class="form-control" id="hours" name="hours" placeholder="Hours" min="0" max="23">
<div class="input-group-append"> <div class="input-group-append">
@ -326,7 +326,7 @@ if (isset($_GET['ticket_id'])) {
</div> </div>
<!-- Time Tracking: Minutes --> <!-- Time Tracking: Minutes -->
<div class="col-md-2"> <div class="col-md-3">
<div class="input-group mb-3"> <div class="input-group mb-3">
<input type="number" class="form-control" id="minutes" name="minutes" placeholder="Minutes" min="0" max="59"> <input type="number" class="form-control" id="minutes" name="minutes" placeholder="Minutes" min="0" max="59">
<div class="input-group-append"> <div class="input-group-append">
@ -336,7 +336,7 @@ if (isset($_GET['ticket_id'])) {
</div> </div>
<!-- Time Tracking: Seconds --> <!-- Time Tracking: Seconds -->
<div class="col-md-2"> <div class="col-md-3">
<div class="input-group mb-3"> <div class="input-group mb-3">
<input type="number" class="form-control" id="seconds" name="seconds" placeholder="Seconds" min="0" max="59"> <input type="number" class="form-control" id="seconds" name="seconds" placeholder="Seconds" min="0" max="59">
<div class="input-group-append"> <div class="input-group-append">
@ -346,7 +346,7 @@ if (isset($_GET['ticket_id'])) {
</div> </div>
<!-- Timer Controls --> <!-- Timer Controls -->
<div class="col-md-2"> <div class="col-md-3">
<div class="btn-group mt-2" role="group"> <div class="btn-group mt-2" role="group">
<button type="button" class="btn btn-success" id="startStopTimer">Pause</button> <button type="button" class="btn btn-success" id="startStopTimer">Pause</button>
<button type="button" class="btn btn-danger" id="resetTimer">Reset</button> <button type="button" class="btn btn-danger" id="resetTimer">Reset</button>

10
top_nav.php
View File

@ -37,6 +37,14 @@
</a> </a>
</li> </li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#openTicketsModal">
<i class="fas fa-hourglass-half"></i>
<span class="badge badge-danger" id="runningTicketsCount">0</span>
</a>
</li>
<!-- New Notifications Dropdown --> <!-- New Notifications Dropdown -->
<?php <?php
$sql_notifications = mysqli_query($mysqli, "SELECT * FROM notifications $sql_notifications = mysqli_query($mysqli, "SELECT * FROM notifications
@ -151,4 +159,6 @@
</ul> </ul>
</nav> </nav>
<?php include_once "top_nav_tickets_modal.php"; ?>
<!-- /.navbar --> <!-- /.navbar -->

21
top_nav_tickets_modal.php Normal file
View File

@ -0,0 +1,21 @@
<!-- Open Tickets Modal -->
<div class="modal fade" id="openTicketsModal" tabindex="-1" role="dialog" aria-labelledby="openTicketsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="openTicketsModalLabel">Open Tickets</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div id="openTicketsContainer">
<!-- Open tickets will be loaded here via JavaScript -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>