Scribd
Upload
7 views21 pages

Lesoko Project Report Downloads

The document is an HTML template for a dashboard that allows users to generate and download various types of reports related to projects, specifically focusing on tower and span components. It includes functionality for staff users to generate Excel and PPTX reports, customize report options, and interact with dropdown menus for selecting components and defects. The layout is styled with CSS for a user-friendly interface, featuring buttons for report generation and options for filtering and selecting data.

Uploaded by

krishnapriya08083
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views21 pages

Lesoko Project Report Downloads

The document is an HTML template for a dashboard that allows users to generate and download various types of reports related to projects, specifically focusing on tower and span components. It includes functionality for staff users to generate Excel and PPTX reports, customize report options, and interact with dropdown menus for selecting components and defects. The layout is styled with CSS for a user-friendly interface, featuring buttons for report generation and options for filtering and selecting data.

Uploaded by

krishnapriya08083
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'tline/client/[Link]' %}">
{% include "analytics/[Link]" %}
<title>Lesoko - Dashboard</title>
{% include 'common/sidebar/sidebar_style.html'%}

</head>
<style>
tr,td{
text-align: center;
border:1px solid rgba(191, 189, 189, 1) !important;
}
.content-project {
position: relative;
left: 2%;
top: 40px;
}

#report-table{
position: relative;
left: 2%;

}
#report-table th {
position: relative;
background-color: rgba(244, 244, 244, 1); /* Light gray background */
border: 1px solid rgba(230, 230, 230, 1); /* Light gray border */
}

#downloadbtn{
display: inline-block;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
color: #F57C00; /* Orange text */
background-color: transparent;
border: 2px solid #F57C00; /* Orange border */
border-radius: 5px;
text-decoration: none;
transition: all 0.3s ease-in-out;

#downloadbtn:hover {
background-color: #F57C00;
color: white;
}

</style>
<body>
{% if [Link].is_staff %}
{% include 'common/sidebar/[Link]' %}
{% endif %}
{% include 'common/navigationbar/[Link]' %}
<div class="content-project">
<div class="container-fluid">

<div class="content">
<h2> {{project_name}} Reports</h2>
</div>
<h4>Download Reports</h4>
<div class="row mt-3">
<div class="col">

<table id="report-table" style="width:100%">


<thead style="background:#fef3eb">
<tr>
<th scope="col">Report Type</th>
<th scope="col">Report Download</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tower Excel</td>
<td>
<button id="{{project_name}}towerbtn" class="btn btn-
primary" type="button" onclick="DownloadExcel('{% url 'tline:gisteamexcelreport'
pid=[Link] componenttype='tower'%}','{{project_name}}','_tower');">
<span role="status"
id="{{project_name}}tower_status">Generate</span>
<span id="{{project_name}}tower" class="tower" aria-
hidden="true"></span>
</button>

</td>
</tr>
<tr>
<td>Span Excel</td>
<td>
<button id="{{project_name}}spanbtn" class="btn btn-
primary" type="button" onclick="DownloadExcel('{% url 'tline:gisteamexcelreport'
pid=[Link] componenttype='span'%}','{{project_name}}','_span');">
<span role="status"
id="{{project_name}}span_status">Generate</span>
<span id="{{project_name}}span" class="span" aria-
hidden="true"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table id="report-table" style="width:100%">
<thead style="background:#fef3eb">
<tr>
<th scope="col">Report Type</th>
<th scope="col">Cumulative Report</th>
<th scope="col">Defect Cumulative Report</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tower PPTX</td>
<td>
<button id="{{project_name}}towerallbtn" class="btn
btn-primary" type="button" onclick="PPTX_Report('{% url
'tline:cumulativepptxreport' pid=[Link] componenttype='tower'
cumulativetype='all' %}','{{project_name}}','towerall');">
<span role="status"
id="{{project_name}}towerall_status">Generate</span>
<span id="{{project_name}}towerall"
class="towerall" aria-hidden="true"></span>
</button>

</td>
<td>
<button id="{{project_name}}towerdefectbtn" class="btn
btn-primary" type="button" onclick="PPTX_Report('{% url
'tline:cumulativepptxreport' pid=[Link] componenttype='tower'
cumulativetype='defect'%}','{{project_name}}','towerdefect');">
<span role="status"
id="{{project_name}}towerdefect_status">Generate</span>
<span id="{{project_name}}towerdefect"
class="towerdefect" aria-hidden="true"></span>
</button>

</td>
</tr>
<tr>
<td>Span PPTX</td>
<td>
<button id="{{project_name}}spanallbtn" class="btn btn-
primary" type="button" onclick="PPTX_Report('{% url 'tline:cumulativepptxreport'
pid=[Link] componenttype='span'
cumulativetype='all'%}','{{project_name}}','spanall');">
<span role="status"
id="{{project_name}}spanall_status">Generate</span>
<span id="{{project_name}}spanall" class="spanall"
aria-hidden="true"></span>
</button>
</td>
<td>
<button id="{{project_name}}spandefectbtn" class="btn
btn-primary" type="button" onclick="PPTX_Report('{% url
'tline:cumulativepptxreport' pid=[Link] componenttype='span'
cumulativetype='defect'%}','{{project_name}}','spandefect');">
<span role="status"
id="{{project_name}}spandefect_status">Generate</span>
<span id="{{project_name}}spandefect"
class="spandefect" aria-hidden="true"></span>
</button>
</td>
</tr>

</tbody>
</table>
</div>
</div>

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

div {
margin-bottom: 5px; /* Adjust the value as needed */
}

.btn-container {
display: inline-block;
margin: 5px;
padding-left: -10px;
}

.button {
display: flex;
align-items: center;
padding: 8px 15px;
border: 1px solid rgba(177, 177, 177, 1);
background-color: rgba(219, 219, 219, 1);
border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 14px;
text-decoration: none;
color: black;
cursor: pointer;
}

.button img {
width: 16px;
height: 16px;
margin-right: 5px;
}

.dropdown-container {
display: flex;
gap: 8px; /* Reduce space between dropdowns */
flex-wrap: wrap; /* Wrap to next line if needed */
}

.dropdown-group {
width: 280px;
position: relative;

#report {
width: 200px;
font-weight:bold;
}

.selecttower,.selectcomponents,.reportselect,.selectdefect{
font-weight:bold;
}

.dropdown-toggle, select {
width: 100%;
padding: 6px;
border: 1px solid #ccc;
background: #fff;
text-align: left;
font-size: 14px;
cursor: pointer;
border-radius: 4px;
}

.dropdown-content {
display: none;
position: absolute;
width: 100%;
background: white;
border: 1px solid #ccc;
max-height: 150px;
overflow-y: auto;
z-index: 10;
padding: 5px;
box-sizing: border-box;
}

.dropdown-content input[type="text"] {
width: 90%;
padding: 6px;
margin: 5px auto;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
}

.dropdown-content label {
display: flex;
align-items: center;
padding: 5px;
cursor: pointer;
gap: 5px;
}

.dropdown-content label:hover {
background: #f0f0f0;
}

.dropdown-content input[type="checkbox"] {
margin-right: 10px;
transform: scale(1.1);
}

.toggle-container {
display: inline-flex;
align-items: center;
font-family: Arial, sans-serif;
padding-left: -10px;
}

.toggle-label {
font-size: 18px;
font-weight: bold;
margin-right: 10px;
}

.toggle-button {
display: flex;
border: 2px solid #ccc;
border-radius: 10px;
overflow: hidden;
}

.toggle-button button {
padding: 8px 12px;
border: none;
cursor: pointer;
background-color: #f0f0f0;
transition: background 0.3s;
font-size: 14px;
font-weight: bold;
}

.toggle-button .active {
background-color: #f57c20 !important;
color: white !important;
}

.container {
margin-left: -10px;
}

.title {
font-weight: bold;
font-size: 16px;
margin-bottom: 10px;
}

.checkbox-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three columns */
gap: 10px;
max-width: 600px;
}

.checkbox-item {
display: flex;
align-items: center;
}

.checkbox-item input {
margin-right: 8px;
}
#dropdownList{
font-weight:normal;

.dropdown-content #defectList {
width: 200px; /* Set the width */
}
select {
height: 35px; /* Ensures uniform height */

}
.disabled {
pointer-events: none; /* Disable mouse interaction */
opacity: 0.5; /* Optional: reduce opacity to indicate it's disabled */
}

/* Disable the checkboxes inside the dropdown */


.disabled + .dropdown-content input[type="checkbox"] {
pointer-events: none; /* Disable checkbox interaction */
opacity: 0.5; /* Optional: reduce opacity of checkboxes to indicate
it's disabled */
}

#pagecont{
margin-top:-40px;
margin-left: 600px;
}

.generate-btn {
position: absolute;
top: 360px;
left: 1240px;
background-color: #ff6600;
color: white;
border: none;
padding: 10px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
display: flex;
gap: 10px;
}

.generate-btn:hover {
background-color: #e65c00; /* Darker orange on hover */
}

</style>
</head>
<body>
<hr>
<div>
<div class="toggle-container">
<span class="toggle-label">Select Generate Report</span>
<div class="toggle-button">
<button id="tower-btn" class="active"
onclick="toggleSelection('tower')">Tower</button>
<button id="span-btn"
onclick="toggleSelection('span')">Span</button>
</div>
</div>
<div>
<button class="generate-btn" onclick=""
id="generatebut">Generate</button>
</div>
</div>

<div>
<!-- <div class="btn-container">
<button class="button">
<img src="{% static 'tline/images/reporticon/[Link]' %}" alt="Tower
Report">Tower Report
</button>
</div> -->

<div class="btn-container">
<button class="button">
<img src="{% static 'tline/images/reporticon/[Link]' %}" alt="Tower
Report">Tower Cumulative
</button>
</div>

<div class="btn-container">
<button class="button">
<img src="{% static 'tline/images/reporticon/[Link]' %}" alt="Tower
Report">Defect Towers
</button>
</div>

<div class="btn-container">
<button class="button">
<img src="{% static 'tline/images/reporticon/[Link]' %}" alt="Tower
Report">Good Towers
</button>
</div>
</div>
<br>
<div id="wholediv">

<div class="dropdown-container">
<div class="dropdown-group">
<label for="tower" class="selecttower">Select Tower</label>
<div class="dropdown-toggle"
onclick="toggleDropdown('dropdownList')"></div>
<div class="dropdown-content" id="dropdownList">
<label><input type="text" id="searchInput"
placeholder="Search..." onkeyup="filterFunction()"></label>
<label><input type="checkbox" id="allTower"
onclick="toggleAllTowers(this)"> All Tower</label>
<div id="my_list">

</div>
</div>
</div>
<div class="dropdown-group">
<label for="tower" class="selectcomponents">Select
Components</label>
<div class="dropdown-toggle"
onclick="toggleDropdown('components')"></div>
<div class="dropdown-content" id="components">
<label><input type="checkbox" value="towers"
onclick="toggleAllComponents(this)"> All Sub Components</label>
<label><input type="checkbox" class="component-checkbox"
value="tower1">Insulator</label>
<label><input type="checkbox" class="component-checkbox"
value="tower2"> Jumper</label>
<label><input type="checkbox" class="component-checkbox"
value="tower3">Joints</label>
<label><input type="checkbox" class="component-checkbox"
value="tower3">Across Arm</label>
</div>
</div>

<div class="dropdown-group">
<label for="report" class="reportselect">Report Types</label>
<select id="report">
<option value=""></option>
<option value="Good">Good</option>
<option value="Cummulative">Cummulative</option>
<option value="Defect">Defect</option>
<option value="High Criticality">High Criticality</option>
<option value="Medium Criticality">Medium Criticality</option>
<option value="Low Criticality">Low Criticality</option>
</select>
</div>

<div class="dropdown-group">
<label for="defect" class="selectdefect">Select Defect</label>
<div id="defectDropdown" class="dropdown-toggle disabled"
onclick="toggleDropdown('defectList')">

</div>
<div class="dropdown-content" id="defectList">
<label><input type="checkbox" value="defect1" class="defect-
checkbox" onclick="toggleAllDefect(this)"> All</label>
{% for i in defect_list %}
<label><input type="checkbox" value="{{i}}" class="defect-
checkbox">{{i}}</label>
{% endfor %}
</div>
</div>
</div>
<br>
<div>

<div class="container">
<div class="title">Customize Without Report</div>
<div class="checkbox-grid">
<label class="checkbox-item"><input type="checkbox">
Logo</label>
<label class="checkbox-item"><input type="checkbox">
Filename</label>
<label class="checkbox-item"><input type="checkbox">
Comments</label>
<label class="checkbox-item"><input type="checkbox"> Phase
and circuit</label>
<label class="checkbox-item"><input type="checkbox">
Table</label>
<label class="checkbox-item"><input type="checkbox"> Defect
Images</label>
<label class="checkbox-item"><input type="checkbox"> View
angle</label>
<label class="checkbox-item"><input type="checkbox">
Impact</label>
<label class="checkbox-item"><input type="checkbox"
id="pagecontinue"> Page Continuation</label>
</div>
</div>
</div>
<div class="col-sm-1">
<input type="number" class="form-control" name="pagecont"
id="pagecont" placeholder="" required="" value="0">
</div>
</div>
</div>

<script>
function toggleAllTowers(allTowerCheckbox) {
let towerCheckboxes = [Link](".tower-checkbox");

[Link](checkbox => {
[Link] = [Link];
});
}

function toggleAllComponents(allTowerCheckbox) {
let componentCheckboxes = [Link](".component-
checkbox");

[Link](checkbox => {
[Link] = [Link];
});
}

function toggleAllDefect(allTowerCheckbox) {
let defectCheckboxes = [Link](".defect-checkbox");

[Link](checkbox => {
[Link] = [Link];
});
}

function filterFunction() {
[Link]('reacth search')
let input = [Link]("searchInput").[Link]();
let labels = [Link]("#my_list label");

[Link](label => {
let text = [Link]();
[Link] = [Link](input) ? "block" : "none";
});
}

[Link]("click", function(event) {
let dropdowns = [Link](".dropdown-content");
[Link](function(dropdown) {
if (![Link]([Link]) && !
[Link]([Link])) {
[Link] = "none";
}
});
});

[Link]("DOMContentLoaded", function () {
var reportDropdown = [Link]("report");
var defectDropdown = [Link]("defectDropdown");
var defectList = [Link]("defectList");
var checkboxes = [Link]('.defect-checkbox');

// Initially disable defect dropdown


[Link]("disabled");
[Link] = "none"; // Prevent clicking
[Link] = "none";

[Link]("change", function () {
var selectedReport = [Link];
[Link]("Selected Report:", selectedReport);

if (selectedReport === "Defect") {


[Link]("disabled");
[Link] = "auto"; // Allow clicking
[Link] = "block";
[Link](checkbox => [Link] = false);
} else {
[Link]("disabled");
[Link] = "none"; // Disable clicking
[Link] = "none";
[Link](checkbox => [Link] = true);
}
});
});

//for collecting tower and span names


const towerDetails = [Link]('{{towerDetails|safe}}');
const spanDetails = [Link]('{{ spanDetails|safe }}');

function updateDropdown(type) {
const checkboxesContainer = [Link]("#my_list");
[Link]=""

let namesList = [];

if (type === "tower") { // ✅ Matches exact spelling


for (let key in towerDetails) {
if (towerDetails[key].towerName) {
[Link](towerDetails[key].towerName);
[Link](" inside tower")
}
}
} else {
for (let key in spanDetails) {
if (spanDetails[key].spanName) {
[Link](spanDetails[key].spanName);
[Link]("inside span")
}
}
}

[Link](name => {
const label = [Link]("label");
[Link] = `<input type="checkbox" class="tower-checkbox"
value="${name}"> ${name}`;
[Link](label);
});
}

updateDropdown('tower');
subcomponent('tower');
//for collecting subcomponetnmaes for tower and span
function subcomponent(type){

const Towerfeatures = [Link]('{{Towerfeatures|escapejs}}');


const Spanfeatures = [Link]('{{Spanfeatures|escapejs}}');
const checksubcomponent = [Link]("#components");
[Link](type) // Select the container
[Link] = `
<label><input type="checkbox" value="all"
onclick="toggleAllComponents(this)"> All Sub Components</label>
`;
if (type === "tower") {
for (let subcomponent in Towerfeatures) {
[Link](`Subcomponent: ${subcomponent}`); // Logs
"ccring", "joints", "jumper", "arcingguard"
const label = [Link]("label");
[Link] = `<input type="checkbox" class="component-
checkbox" value="${subcomponent}"> ${subcomponent}`;
[Link](label);
}
}
else{

for (let spancomponent in Spanfeatures) {


[Link](`Subcomponent: ${spancomponent}`); // Logs
"ccring", "joints", "jumper", "arcingguard"
const label = [Link]("label");
[Link] = `<input type="checkbox" class="component-
checkbox" value="${spancomponent}"> ${spancomponent}`;
[Link](label);
}
}
}
//for toggle show
function toggleDropdown(id) {
var dropdown = [Link](id);
[Link] = [Link] === "none" ? "block" :
"none";
}

[Link]("DOMContentLoaded", function () {
const component_visibility = [Link]('{{component_visibility|
safe}}'); // Parse JSON

let towerBtn = [Link]("tower-btn");


let spanBtn = [Link]("span-btn");

// Hide both initially


[Link] = "none";
[Link] = "none";

// Check if both tower and span are available


if (component_visibility.tower === true && component_visibility.span
=== true) {
[Link] = "inline-block";
[Link] = "inline-block";
[Link]("active");
}
});

//for toggle active


function toggleSelection(type) {
let towerBtn = [Link]("tower-btn");
let spanBtn = [Link]("span-btn");

// Remove active class from both buttons


[Link]("active");
[Link]("active");

// Toggle the clicked button


if (type === "tower") {
[Link]("active");
} else if (type === "span") {
[Link]("active");
}
updateDropdown(type);
subcomponent(type);
}
//for page continuation
[Link]("DOMContentLoaded", function () {
const checkbox = [Link]("pagecontinue");
const inputBox = [Link]("pagecont");

function toggleInputVisibility() {
if ([Link]) {
[Link] = "block"; // Show input box
} else {
[Link] = "none"; // Hide input box
}
}
toggleInputVisibility();
[Link]("change", toggleInputVisibility);
});

//for enabling generate button

[Link]("DOMContentLoaded", function () {
let wholeDiv = [Link]("wholediv");
let generateBut = [Link]("generatebut"); // The
"Generate" button

// Initially disable the Generate button


[Link] = true;
[Link] = "0.5"; // Visually indicate it's disabled

// Function to check if any changes have occurred


function checkChanges() {
let changed = false;

// Select all dropdowns (select elements) and checkboxes inside


#wholediv
let inputs = [Link]("input[type='checkbox'],
select");

[Link](input => {
if (([Link] === "checkbox" && [Link]) ||
([Link] === "SELECT" && [Link] !== "")) {
changed = true;
}
});

// Enable or disable the Generate button based on changes


[Link] = !changed;
[Link] = changed ? "1" : "0.5"; // Change
appearance when enabled
}

// Attach event listeners to all checkboxes and dropdowns inside


#wholediv
let inputs = [Link]("input[type='checkbox'],
select");
[Link](input => {
[Link]("change", checkChanges);
});
});

//to update the button text


[Link]("DOMContentLoaded", function () {
let towerBtn = [Link]("tower-btn");
let spanBtn = [Link]("span-btn");

let cumulativeBtn = [Link](".btn-container .button")[0];

let defectBtn = [Link](".btn-container .button")[1];


let goodBtn = [Link](".btn-container .button")[2];

function updateButtonText(selectedType) {
let typeText = selectedType === "tower" ? "Tower" : "Span";
[Link] = `<img src="{% static
'tline/images/reporticon/[Link]' %}" alt="${typeText} Report"> ${typeText}
Cumulative`;
[Link] = `<img src="{% static
'tline/images/reporticon/[Link]' %}" alt="${typeText} Report"> Defect $
{typeText}s`;
[Link] = `<img src="{% static
'tline/images/reporticon/[Link]' %}" alt="${typeText} Report"> Good ${typeText}s`;
}

[Link]("click", function () {
updateButtonText("tower");
});

[Link]("click", function () {
updateButtonText("span");
});

// Set initial state


updateButtonText("tower"); // Default to Tower initially
})

</script>
<br>
<div class="col-md-14" id="progresstable">
<h4 style="margin-left: 20px;">Progress - Table</h4>

</div>
<table id="report-table">

<thead>
<tr>
<th>Vertical</th>
<th>User Name</th>
<th>Created Date/Time</th>
<th>Status</th>
<th>Type of Report</th>
<th>Report Description</th>
<th>Progress</th>
<th>File Download</th>
<th>Cancel</th>

</tr>
</thead>
<tbody id="tbody">
{% for report_item in reports %}
<tr id="{{report_item.report.unique_id}}">
<td>{{ report_item.[Link] }}</td>
<td>{{ report_item.user}}</td>
<td>{{ report_item.report.created_time|date:"M d Y, H:i:s
A" }}</td>
<td>{{ report_item.[Link] }}</td>
<td>{{ report_item.report.task_type }}</td>
<td>
{% if report_item.[Link] == "Completed" %}
{{ report_item.report.task_detail }}
{% else %}
{{ report_item.report.task_type }}
{% endif %}

</td>
<td>{{ report_item.[Link] }}</td>
<td>
{% if report_item.report.file_download and
report_item.[Link] == "Completed" %}
<a href="{{ report_item.download}}" class="btn btn-
primary" id="downloadbtn">Download</a>
{% endif %}
</td>
<td>
{% if report_item.[Link] == 'In Progress' or
report_item.[Link] == 'Yet To Start' %}
<a href="{% url "tline:terminate_task"
task_id=report_item.report.unique_id %}"
onclick="cancel(event,
'{{ report_item.report.unique_id }}')"
class="btn btn-danger cancel-btn">
Cancel
</a>
{% endif %}
</td>

</tr>
{% endfor %}
</tbody>
</table>

</div>

</div>
<script src={% static 'common/js/csrftokenjs/[Link]' %}></script>
<script src={% static 'tline/client/[Link]' %}></script>
<script>
// Collect Celery Task uuid
const task_ID = [Link]("{{task_ID|escapejs}}");
</script>
<script>
function DownloadExcel(url,projectname,component) {

if (component=="_tower"){
[Link](projectname+'tower').[Link]('spinner-
border','spinner-border-sm')
[Link](projectname+"towerbtn").disabled = true;

[Link](projectname+'tower_status').innerHTML="Processing"
}
else{
[Link](projectname+'span').[Link]('spinner-
border','spinner-border-sm')
[Link](projectname+"spanbtn").disabled = true;
[Link](projectname+'span_status').innerHTML="Processing"
}
//
fetch(url, { cache: "no-store" })
.then(response => {
if (![Link]) {
if ([Link] === 404) {
alert("User Not Found");
throw new Error("User Not Found");
} else if ([Link] === 400) {
alert("Bad Request");
throw new Error("Bad Request");
} else {
throw new Error(`HTTP error! Status: ${[Link]}`);
}
}
return [Link]();

// [Link]().then(file => {
// // const url = [Link](file);
// // const a = [Link]('a');
// // [Link] = url;
// // [Link] = projectname+component+'.xlsx';
// // [Link](a);
// // [Link]();
// // [Link](url);
// [Link]("Good Response")
// if (component=="_tower"){
//
[Link](projectname).[Link]('spinner-border','spinner-
border-sm')
// [Link](projectname+"towerbtn").disabled =
false;
// }
// else{
//
[Link](projectname).[Link]('spinner-border','spinner-
border-sm')
// [Link](projectname+"spanbtn").disabled =
false;
// }
// });
})
.then(data=>{
[Link]("Good Response")
if (component=="_tower"){

[Link](projectname+'tower').[Link]('spinner-
border','spinner-border-sm')
[Link](projectname+"towerbtn").[Link]=0.7
}
else{

[Link](projectname+'span').[Link]('spinner-
border','spinner-border-sm')
[Link](projectname+"spanbtn").[Link]=0.7
}
})
.catch(error => {
[Link]("Error:", error);
});
}

</script>
<script>
const terminateTaskUrl = "{% url 'tline:terminate_task' 'TASK_ID_PLACEHOLDER'
%}";
// Script for pptx
function PPTX_Report(url,projectname,component) {

if (component=="towerall"){
[Link](projectname+'towerall').[Link]('spinner-
border','spinner-border-sm')
[Link](projectname+"towerallbtn").disabled = true;

[Link](projectname+'towerall_status').innerHTML="Processing"
}
else if (component=="spanall"){
[Link](projectname+'spanall').[Link]('spinner-
border','spinner-border-sm')
[Link](projectname+"spanallbtn").disabled = true;

[Link](projectname+'spanall_status').innerHTML="Processing"
}
else if (component=="towerdefect"){

[Link](projectname+'towerdefect').[Link]('spinner-
border','spinner-border-sm')
[Link](projectname+"towerdefectbtn").disabled = true;

[Link](projectname+'towerdefect_status').innerHTML="Processing"
}
else if (component=="spandefect"){
[Link]("Reatch")

[Link](projectname+'spandefect').[Link]('spinner-
border','spinner-border-sm')
[Link](projectname+"spandefectbtn").disabled = true;

[Link](projectname+'spandefect_status').innerHTML="Processing"
}
//
fetch(url, { cache: "no-store" })
.then(response => {
if (![Link]) {
if ([Link] === 404) {
alert("User Not Found");
throw new Error("User Not Found");
} else if ([Link] === 400) {
alert("Bad Request");
throw new Error("Bad Request");
} else {
throw new Error(`HTTP error! Status: ${[Link]}`);
}
}
return [Link]();
})
.then(data=>{
[Link]("Good Response")
if (component=="towerall"){

[Link](projectname+'towerall').[Link]('spinner-
border','spinner-border-sm')

[Link](projectname+"towerallbtn").[Link]=0.7
}
else if (component=="spanall"){

[Link](projectname+'spanall').[Link]('spinner-
border','spinner-border-sm')
[Link](projectname+"spanallbtn").[Link]=0.7
}
else if (component=="towerdefect"){

[Link](projectname+'towerdefect').[Link]('spinner-
border','spinner-border-sm')

[Link](projectname+"towerdefectbtn").[Link]=0.7;
}
else if (component=="spandefect"){

[Link](projectname+'spandefect').[Link]('spinner-
border','spinner-border-sm')

[Link](projectname+"spandfectbtn").[Link]=0.7;
}

const tbody = [Link]("tbody");


const newrow = [Link]("tr");
[Link]=data.task_id
[Link] = `
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${formatDateTime([Link])}</td>
<td>${[Link]}</td>
<td>${data.task_type}</td>
<td>${data.task_detail}</td>
<td>${[Link]}</td>
<td></td>
<td>
<a href="${[Link]('TASK_ID_PLACEHOLDER',
data.task_id)}"
onclick="cancel(event, '${data.task_id}')"
class="btn btn-danger cancel-btn">
Cancel
</a>
</td>
`;
[Link](newrow);
task_ID.push(data.task_id)

})
.catch(error => {
[Link]("Error:", error);
});
}

</script>

<script>
// <!-- --------(update time format) -------------->
function formatDateTime(dateStr) {
const date = new Date(dateStr);
const options = {
day: '2-digit',
month: 'short',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: true
};

const formatted = [Link]('en-US', options).replace(',',


'');
return [Link](/\b(am|pm)\b/, match => [Link]());
}

function taskID_Update(task_uuid){
const index = task_ID.indexOf(task_uuid);
if (index !== -1) {
task_ID.splice(index, 1);
}
}

// <!--------------(Websocket Connections) ----------------->


const socketprotocol =[Link] === "http:"?'ws':'wss'
const socket = new
WebSocket(`${socketprotocol}://${[Link]}/ws/tline/project_report/`);
[Link] = function(event) {
// [Link]('WebSocket connection opened');
}

setInterval(() => {
if (task_ID.length>0 && [Link] === [Link]){
const message = [Link]({ taskID:task_ID });
[Link](message);
}
}, 1000);

[Link] = function(event) {
const data = [Link]([Link]);
for (const [taskUUID, status] of [Link](data.report_status)) {
const targettr = [Link](taskUUID);
if (targettr){
[Link][3].innerHTML=[Link]
[Link][6].innerHTML=[Link]

// Update Task id
if ([Link] === 'Failed' || [Link] ==='Cancelled'){
taskID_Update(taskUUID)
}
if ([Link] && [Link] === 'Completed'){
[Link][7].innerHTML=`<a href="{{ [Link]}}"
class="btn btn-primary">Download</a>`
[Link][8].innerHTML=""
taskID_Update(taskUUID)
}
}
}
};
[Link] = function(event) {
// [Link]('WebSocket connection closed', event);
}
[Link] = function(event) {
// [Link]('WebSocket error:', event);
}

</script>

</body>
</html>

You might also like