745 lines
39 KiB
HTML
745 lines
39 KiB
HTML
{% extends 'navbar/navbar.html' %}
|
|
{% load static %}
|
|
{% block profile %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="{% static 'profile/css/profile.css' %}">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
|
|
|
|
<title>x-sys</title>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="gridBoxSection">
|
|
<h5 class="userProfileTitle">User Profile</h5>
|
|
</div>
|
|
<div class="userProfileMainSection">
|
|
<div class="userProfile">
|
|
<div class="userImageProfile">
|
|
<img src="{% static 'assets/userProfile.png'%}">
|
|
<span class="editProfileIcon">
|
|
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 462 461.19">
|
|
<path d="M0,91.15c2.97-8.04,4.86-16.72,9.13-24,12.02-20.54,30.61-31.46,54.38-31.62,56.66-.4,113.32-.17,169.98-.1,13.17,.02,22.66,9.34,22.5,21.67-.16,12.1-9.62,21.02-22.61,21.03-55.49,.04-110.99,.02-166.48,.02-15.76,0-24.13,8.25-24.13,23.93-.02,97.83-.02,195.66,0,293.49,0,15.51,8.24,23.84,23.68,23.85,97.99,.03,195.97,.03,293.96,0,15.25,0,23.59-8.57,23.6-24.01,0-55.66-.03-111.33,.03-166.99,.02-15.61,13.97-25.94,28.22-21.12,8.97,3.04,14.43,11.05,14.48,21.71,.08,19.17,.03,38.33,.03,57.5,0,35.5,0,71,0,106.5,0,35.09-16.36,57.23-49.94,67.62-.3,.09-.54,.37-.81,.57H50c-1.18-.49-2.34-1.1-3.56-1.47-16.89-5.11-30.05-15.16-38.25-30.74C4.46,421.91,2.67,413.82,0,406.19c0-105.01,0-210.02,0-315.03Z"/>
|
|
<path d="M462,60.15c-2.75,17.07-12.96,29.46-25.2,40.72-6.73,6.18-12.95,12.91-18.94,18.93-25.14-25.14-50.05-50.05-75.39-75.4,.54-.56,1.84-1.98,3.2-3.34,8.12-8.14,16.19-16.32,24.39-24.37,15.32-15.02,33.56-20.38,54.09-14.09,20.48,6.28,32.8,20.69,37.01,41.84,.12,.6,.55,1.15,.84,1.72v14Z"/>
|
|
<path d="M318.36,68.57c25.17,25.18,50.11,50.13,75.23,75.25-.82,.87-1.91,2.09-3.06,3.24-54.08,54.1-108.13,108.23-162.37,162.17-3.09,3.08-7.62,5.56-11.87,6.48-23.26,5.03-46.63,9.49-69.98,14.11-9.64,1.91-15.93-4.08-14.06-13.58,4.81-24.33,9.69-48.64,14.75-72.91,.54-2.61,1.98-5.43,3.85-7.31,55.53-55.71,111.18-111.31,166.8-166.93,.23-.23,.53-.4,.7-.53Z"/>
|
|
</svg>
|
|
</span>
|
|
<p class="userName">User Name</p>
|
|
</div>
|
|
<div>
|
|
<a class="menuListProfile menuListActiveProfile" id="MenuProfileSetting">
|
|
<span class="menuListProfileIcon">
|
|
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.01 408.86">
|
|
<path d="M216.43,408.86h-23.96c-5.39-.64-10.8-1.19-16.18-1.95-40.31-5.69-75.96-21.79-106.47-48.73C33.89,326.45,11.41,286.97,3.14,239.62,1.8,231.94,1.03,224.16,0,216.43c0-7.99,0-15.97,0-23.96,.24-1.28,.61-2.54,.7-3.83,1.23-18.42,5.09-36.31,11.37-53.63C47.82,36.53,151.67-18.96,253.51,5.92c105.06,25.67,172.4,130.76,151.8,236.86-7.9,40.69-26.34,75.88-55.48,105.29-30.55,30.84-67.26,50.25-110.14,57.64-7.7,1.33-15.5,2.11-23.26,3.15Zm124.36-86.97c56.84-62.95,64.99-175.49-13.57-249.61C252.39,1.69,130.92,9.56,65.36,89.62-.53,170.08,21.35,272.2,68.2,321.59c13.24-46.74,42.68-78.92,87.72-97.19-47.36-34.03-46.27-94.99-15.52-128.61,31.9-34.87,85.66-38.44,120.3-7.62,18.76,16.69,29.13,37.57,29.62,62.66,.6,30.73-12.51,55.04-37.34,73.48,45.28,18.36,74.37,50.71,87.82,97.59Zm-133.05,63.03c4.31-.36,12.03-.73,19.67-1.68,30.72-3.81,58.55-15.03,83.46-33.35,10.09-7.42,9.95-7.61,6.94-20.1-14.51-60.29-71.97-98.33-133.05-88.08-49.56,8.32-88.96,49.02-95.55,98.86-.16,1.2,.71,3.03,1.7,3.82,33.11,26.63,70.99,39.96,116.83,40.52Zm-3.32-169.76c34.08,.04,61.89-27.6,62.16-61.79,.27-34-27.92-62.28-62.1-62.3-34.17-.02-62.36,28.21-62.16,62.25,.2,34.15,27.98,61.81,62.1,61.85Z"/>
|
|
</svg>
|
|
</span>
|
|
<span class="menuListProfileText">Profile Setting</span>
|
|
</a>
|
|
<a class="menuListProfile" id="MenuPassword">
|
|
<span class="menuListProfileIcon">
|
|
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270.72 360.76">
|
|
<path d="M33.9,146.16c0-1.42,0-2.89,0-4.35,.09-15.46-.38-30.96,.37-46.39C36.53,49.45,69.63,11.37,114.76,2.13c56.89-11.65,111.45,25.74,120.7,82.89,1.01,6.24,1.22,12.66,1.32,19,.2,12.72,.06,25.44,.06,38.17,0,1.34,0,2.68,0,3.75,4.44,1.03,8.55,1.56,12.35,2.94,13.51,4.9,21.42,17.05,21.49,32.73,.08,16.84,.02,33.68,.02,50.52,0,31.06,.03,62.12-.01,93.17-.02,14.43-5.72,25.79-19.13,32.02-4.49,2.08-9.82,3.27-14.78,3.28-67.6,.21-135.21,.21-202.81,.1-19.73-.03-33.75-14.48-33.89-34.65-.14-19.71-.03-39.41-.03-59.12,0-28.44-.05-56.88,.02-85.32,.05-16.81,9.21-29.45,24.32-33.69,2.85-.8,5.85-1.09,9.52-1.76Zm101.46,22.95c-32.93,0-65.86,0-98.78,0-10.39,0-13.97,3.53-13.97,13.89-.01,47.15-.01,94.29,0,141.44,0,10.07,3.74,13.77,13.79,13.77,65.98,0,131.96,0,197.94,0,10.05,0,13.79-3.71,13.79-13.77,.02-47.27,.02-94.54,0-141.81,0-9.87-3.72-13.51-13.61-13.51-33.05,0-66.1,0-99.16,0Zm78.75-22.71c0-16.52,.45-32.61-.08-48.67-1.62-48.68-47.8-84.08-95.37-73.43-37.16,8.32-61.75,38.96-62.12,77.56-.13,13.6-.03,27.19-.02,40.79,0,1.2,.14,2.4,.22,3.75H214.11Z"/>
|
|
<path d="M124.12,282.05c0-.62-.07-1.26,0-1.87,1-7.31-.52-12.17-8.12-16.37-13.38-7.4-17.8-24.93-12.07-39.85,5.44-14.16,20.61-23,35.65-20.78,16.09,2.38,27.21,13.36,29.32,28.96,2.05,15.14-5.64,28.55-20.07,35.4-1.06,.5-2.09,2.31-2.12,3.53-.2,7.1-.05,14.21-.11,21.32-.06,7.54-4.4,12.05-11.36,11.97-6.84-.08-11.01-4.51-11.12-11.84-.05-3.49,0-6.98-.01-10.47Zm11.03-34.16c6.82,.08,11.36-4.26,11.45-10.96,.09-6.71-4.36-11.36-11.02-11.49-6.66-.13-11.35,4.39-11.44,11.05-.1,6.78,4.28,11.32,11.01,11.4Z"/>
|
|
</svg>
|
|
</span>
|
|
<span class="menuListProfileText">Password</span>
|
|
</a>
|
|
<a class="menuListProfile" id="AddUserSection">
|
|
<span class="menuListProfileIcon">
|
|
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 311.48 359.9">
|
|
<path d="M103.39,177.35c-5.98-5.35-12.46-10.12-17.69-16-25.13-28.25-32.66-60.93-20.3-96.63C77.76,29.03,103.73,7.42,141.06,1.3c53.77-8.82,102.94,28.34,110.38,82.36,6.96,50.6-29.04,99.31-79.4,107.01-9.21,1.41-18.67,1.07-27.93,2.18-55.14,6.61-92.67,36.07-112.69,87.75-5.13,13.24-7.19,27.19-7.43,41.38-.15,9.11,4.59,13.94,13.64,13.94,38.55,.01,77.11,0,115.66,.01,1.49,0,3.02-.08,4.48,.17,5.87,1,10.15,6.35,9.93,12.26-.22,5.91-4.91,10.86-10.85,11.46-.62,.06-1.25,.05-1.87,.05-39.68,0-79.35,.1-119.03-.04C15.68,359.75,.08,343.81,0,323.53c-.25-63.52,40.85-122.87,100.31-144.9,1.14-.42,2.25-.93,3.08-1.28ZM155.51,24.49c-39.26-.1-71.44,32.11-71.64,71.71-.2,39.3,32.07,71.87,71.36,72.01,39.61,.14,72.19-31.81,72.39-70.97,.2-40.41-31.74-72.64-72.1-72.74Z"/>
|
|
<path d="M233.63,258.05c0-14.39-.08-28.22,.03-42.06,.05-6.3,4.79-11.26,10.84-11.8,5.91-.53,11.4,3.4,12.74,9.29,.35,1.55,.32,3.22,.33,4.83,.02,13.08,.01,26.16,.01,39.74,1.53,0,2.85,0,4.17,0,12.1,0,24.2-.01,36.29,0,7.95,.01,13.4,4.86,13.44,11.91,.03,7.07-5.41,12.02-13.32,12.03-13.34,.02-26.67,0-40.58,0,0,1.46,0,2.77,0,4.08,0,12.59,.06,25.19-.04,37.78-.05,6.33-4.66,11.33-10.68,11.98-5.85,.63-11.44-3.27-12.87-9.11-.35-1.43-.36-2.96-.36-4.45-.03-12.1-.02-24.19-.02-36.29,0-1.21,0-2.42,0-3.99-4.32,0-8.27,0-12.23,0-9.73,0-19.46,.05-29.19-.02-7.22-.05-12.56-5.31-12.48-12.11,.08-6.68,5.32-11.77,12.39-11.81,12.35-.07,24.7-.02,37.04-.02,1.35,0,2.69,0,4.48,0Z"/>
|
|
</svg>
|
|
</span>
|
|
<span class="menuListProfileText">Add User</span>
|
|
</a>
|
|
<a class="menuListProfile" id="helpdesk-section">
|
|
<span class="menuListProfileIcon">
|
|
<img src="/static/assets/icons8-customer-support-50.png" alt="Ticket Icon" style="width: 22px; height: 22px;">
|
|
</span>
|
|
<span class="menuListProfileText">Ticket system</span>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="userDetailsProfile">
|
|
<div class="profile-section">
|
|
<h5 class="userDetailsProfileTitle">Profile Setting</h5>
|
|
<form method="post">
|
|
<div class="user-details">
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. Email</span>
|
|
<span class="details">...</span>
|
|
</div>
|
|
<input type="email" name="email" maxlength="254" id="id_email" />
|
|
</div>
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. Phone Number</span>
|
|
<span class="details">...</span>
|
|
</div>
|
|
<input type="text" name="phone_number" maxlength="15" id="id_phone_number"/>
|
|
</div>
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. Li-phy card identifier</span>
|
|
<span class="details">...</span>
|
|
</div>
|
|
<input type="text" name="li_phy_card_identifier" maxlength="20" id="id_li_phy_card_identifier"/>
|
|
</div>
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. Company name</span>
|
|
<span class="details">...</span>
|
|
</div>
|
|
<input type="text" name="company_name" maxlength="20" id="id_company_name"/>
|
|
</div>
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. Country</span>
|
|
<span class="details">...</span>
|
|
</div>
|
|
<input type="text" name="country" maxlength="50" id="id_country"/>
|
|
</div>
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. State</span>
|
|
<span class="details">...</span>
|
|
</div>
|
|
<input type="text" name="state" maxlength="50" id="id_state"/>
|
|
</div>
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. Postal Code</span>
|
|
<span class="details">...</span>
|
|
</div>
|
|
<input type="text" name="postal_code" maxlength="10" id="id_postal_code"/>
|
|
</div>
|
|
<div class="input-box" style="width: 738px;">
|
|
<div>
|
|
<span class="details">>. Full Address</span>
|
|
<span class="details">...</span>
|
|
</div>
|
|
<input name="full_address" cols="40" rows="10" id="id_full_address"/>
|
|
</div>
|
|
</div>
|
|
<div class="button">
|
|
<input type="submit" id="registerButton" value="Update">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="password-section">
|
|
<h5 class="userDetailsProfileTitle">Change Password</h5>
|
|
<form method="post">
|
|
<div class="user-details">
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. Password</span>
|
|
<span class="details">...</span>
|
|
</div>
|
|
<input type="password" name="password" id="id_password" />
|
|
</div>
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. Confirm Password</span>
|
|
<span class="details">...</span>
|
|
</div>
|
|
<input type="password" name="password" id="id_password" />
|
|
</div>
|
|
</div>
|
|
<div class="button">
|
|
<input type="submit" id="registerButton" value="Change Password">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="add-user-section">
|
|
<h5 class="userDetailsProfileTitle">Add User</h5>
|
|
<form method="post">
|
|
<div class="user-details">
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. First Name</span>
|
|
<span class="details">...</span>
|
|
</div>
|
|
<input type="FirstName" name="FirstName" maxlength="254" id="id_FirstName" />
|
|
</div>
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. Last Name</span>
|
|
<span class="details">...</span>
|
|
</div>
|
|
<input type="text" name="last_name" maxlength="15" id="id_last_name"/>
|
|
</div>
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. Email</span>
|
|
<span class="details">...</span>
|
|
</div>
|
|
<input type="email" name="email" maxlength="254" id="id_email" />
|
|
</div>
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. Access Level</span>
|
|
<span class="details">...</span>
|
|
</div>
|
|
<select>
|
|
<option disabled selected></option>
|
|
<option>Admin</option>
|
|
<option>Regulator</option>
|
|
<option>Manager</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="button">
|
|
<input type="submit" id="TicketButton" value="Add User">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- <div class="submission-list" style="display: none;" >
|
|
<h6>My Submissions lists</h6>
|
|
<ul id="submission-list"></ul>
|
|
<p id="no-submissions" style="display: none;">No submissions found.</p>
|
|
</div> -->
|
|
|
|
<div class="helpdesk-section" style="display: none;"> <!-- Initially hidden -->
|
|
<h5 class="userDetailsProfileTitle">Ticket System</h5>
|
|
|
|
<!-- Tab Navigation -->
|
|
<div class="tab-navigation" style="display: flex; margin-bottom: 10px;">
|
|
<button class="tab-button"
|
|
style="height: 45px; margin-top: 1rem; padding: 0 25px;
|
|
background: transparent; border: 1px solid #3a81a5; color: #3a81a5;
|
|
font-size: 15px; font-weight: 300; letter-spacing: 1px;
|
|
cursor: pointer; transition: all 0.3s ease; border-radius: 5px;"
|
|
onmouseover="this.style.background='linear-gradient(-135deg, #0e2a39, #0a181e)'; this.style.color='white';"
|
|
onmouseout="this.style.background='transparent'; this.style.color='#3a81a5';"
|
|
onclick="showTab('show-tickets')">Show Tickets</button>
|
|
<!-- <button class="tab-button"
|
|
style="height: 45px; margin-top: 1rem; padding: 0 25px;
|
|
background: transparent; border: 1px solid #3a81a5; color: #3a81a5;
|
|
font-size: 15px; font-weight: 300; letter-spacing: 1px;
|
|
cursor: pointer; transition: all 0.3s ease; border-radius: 5px;"
|
|
onmouseover="this.style.background='linear-gradient(-135deg, #0e2a39, #0a181e)'; this.style.color='white';"
|
|
onmouseout="this.style.background='transparent'; this.style.color='#3a81a5';"
|
|
onclick="showTab('my-tickets')">My Tickets</button> -->
|
|
<button class="tab-button"
|
|
style="height: 45px; margin-top: 1rem; padding: 0 25px;
|
|
background: transparent; border: 1px solid #3a81a5; color: #3a81a5;
|
|
font-size: 15px; font-weight: 300; letter-spacing: 1px;
|
|
cursor: pointer; transition: all 0.3s ease; border-radius: 5px;"
|
|
onmouseover="this.style.background='linear-gradient(-135deg, #0e2a39, #0a181e)'; this.style.color='white';"
|
|
onmouseout="this.style.background='transparent'; this.style.color='#3a81a5';"
|
|
onclick="showTab('add-ticket')">Add Ticket</button>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Show Tickets Tab -->
|
|
<div id="show-tickets" class="tab-content" style="display: block; height: 100%; padding: 0 20px; color: #3a81a5; font-size: 15px; font-weight: 300; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; background: transparent; border: 1px solid #153549; border-radius: 0px 10px;">
|
|
<!-- <h6>All Tickets</h6> -->
|
|
<table id="submission-table" class="submission-table" style="width: 100%; border-collapse: collapse;">
|
|
<thead>
|
|
<tr>
|
|
<th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Title</th>
|
|
<th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Description</th>
|
|
<th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Image</th>
|
|
<th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="submission-list"></tbody>
|
|
</table>
|
|
<p id="no-submissions" style="display: none; text-align: center; font-size: 1.2em; padding: 20px;">No submissions found.</p>
|
|
</div>
|
|
|
|
<!-- My Tickets Tab -->
|
|
<!-- <div id="my-tickets" class="tab-content" style="display: none;">
|
|
<h6>My Tickets</h6>
|
|
<table id="my-submission-table" class="submission-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Description</th>
|
|
<th>Image</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="my-submission-list"></tbody>
|
|
</table>
|
|
<p id="no-my-submissions" style="display: none;">No submissions found.</p>
|
|
</div> -->
|
|
|
|
<!-- Add Ticket Tab -->
|
|
<div id="add-ticket" class="tab-content" style="display: none;">
|
|
<form id="helpdesk-form" method="post" enctype="multipart/form-data" action="{% url 'helpdesk_submission_create' %}">
|
|
{% csrf_token %}
|
|
<div class="user-details">
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. Title</span>
|
|
</div>
|
|
<input type="text" name="title" maxlength="100" id="title" required />
|
|
</div>
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. Description</span>
|
|
</div>
|
|
<textarea name="description" id="description" required style="color: white; background-color: transparent; border: none; width: 100%; height: 150px;"></textarea>
|
|
|
|
|
|
</div>
|
|
<div class="input-box">
|
|
<div>
|
|
<span class="details">>. Image</span>
|
|
</div>
|
|
<input type="file" name="image" id="image" accept="image/*" />
|
|
</div>
|
|
<div class="button">
|
|
<input type="submit" id="submitButton" value="Submit">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="{% static 'profile/js/profile.js' %}"></script>
|
|
|
|
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
// Click events for different sections
|
|
$("#MenuProfileSetting").click(function () {
|
|
console.log(" profile section clicked");
|
|
hideAllSections();
|
|
$(".profile-section").show();
|
|
$("#MenuProfileSetting").addClass('menuListActiveProfile');
|
|
});
|
|
|
|
$("#MenuPassword").click(function () {
|
|
hideAllSections();
|
|
console.log("Password section clicked");
|
|
$(".password-section").show();
|
|
$("#MenuPassword").addClass('menuListActiveProfile');
|
|
});
|
|
|
|
$("#AddUserSection").click(function () {
|
|
console.log("Adduser section clicked");
|
|
hideAllSections();
|
|
$(".add-user-section").show();
|
|
$("#AddUserSection").addClass('menuListActiveProfile');
|
|
});
|
|
|
|
// Add click event for helpdesk section
|
|
$("#helpdesk-section").click(function () {
|
|
console.log("Helpdesk section clicked");
|
|
hideAllSections();
|
|
$(".helpdesk-section").show(); // Show helpdesk section
|
|
$("#helpdesk-section").addClass('menuListActiveProfile'); // Add active class
|
|
});
|
|
});
|
|
|
|
function hideAllSections() {
|
|
$(".password-section").hide();
|
|
$("#MenuPassword").removeClass('menuListActiveProfile');
|
|
|
|
$(".profile-section").hide();
|
|
$("#MenuProfileSetting").removeClass('menuListActiveProfile');
|
|
|
|
$(".add-user-section").hide();
|
|
$("#AddUserSection").removeClass('menuListActiveProfile');
|
|
|
|
$(".helpdesk-section").hide(); // Hide helpdesk section
|
|
$("#helpdesk-section").removeClass('menuListActiveProfile'); // Remove active class
|
|
}
|
|
</script>
|
|
|
|
|
|
<script>
|
|
function showTab(tabName) {
|
|
// Hide all tab contents
|
|
const tabContents = document.querySelectorAll('.tab-content');
|
|
tabContents.forEach(tab => {
|
|
tab.style.display = 'none';
|
|
});
|
|
|
|
// Show the selected tab
|
|
document.getElementById(tabName).style.display = 'block';
|
|
}
|
|
</script>
|
|
|
|
<!-- <script>
|
|
// Form submission handler
|
|
document.getElementById('helpdesk-form').addEventListener('submit', function(event) {
|
|
event.preventDefault(); // Prevent default form submission behavior
|
|
|
|
const formData = new FormData(this);
|
|
|
|
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value; // CSRF token
|
|
console.log('CSRF Token:', csrfToken);
|
|
|
|
|
|
// Add status value to form data
|
|
formData.append('status', 1); // Set the status value as 1
|
|
// Make a POST request to the Django API
|
|
fetch('http://127.0.0.1:8000/helpdesk/submit/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': csrfToken // Attach CSRF token to headers
|
|
},
|
|
body: formData // Send form data
|
|
})
|
|
.then(response => response.json()) // Parse JSON response
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert('Submission created successfully!');
|
|
loadSubmissions(); // Reload submissions after successful creation
|
|
} else {
|
|
alert('Error creating submission. Please try again.');
|
|
console.error('Form errors:', data.errors); // Debug form errors
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error); // Handle network errors
|
|
});
|
|
});
|
|
|
|
// Function to load submissions
|
|
function loadSubmissions() {
|
|
console.log('Loading submissions...'); // Log when loading starts
|
|
fetch('http://127.0.0.1:8000/helpdesk/submissions/', {
|
|
method: 'GET',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
|
|
}
|
|
})
|
|
.then(response => {
|
|
console.log('Response status:', response.status); // Log response status
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok: ' + response.statusText);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('Fetched data:', data); // Log the fetched data
|
|
const submissionList = document.getElementById('submission-list');
|
|
const noSubmissionsMessage = document.getElementById('no-submissions');
|
|
|
|
|
|
if (data.submissions && data.submissions.length > 0) {
|
|
data.submissions.forEach(submission => {
|
|
console.log('Submission:', submission);
|
|
const listItem = document.createElement('tr');
|
|
|
|
// Title
|
|
const title = document.createElement('td');
|
|
title.textContent = submission.title;
|
|
listItem.appendChild(title);
|
|
|
|
// Description
|
|
const description = document.createElement('td');
|
|
description.textContent = submission.description;
|
|
listItem.appendChild(description);
|
|
|
|
|
|
|
|
|
|
// Image
|
|
if (submission.image) {
|
|
const img = document.createElement('img');
|
|
img.src = submission.image;
|
|
img.alt = 'Image';
|
|
img.style.width = '100px';
|
|
img.style.height = 'auto';
|
|
listItem.appendChild(img);
|
|
|
|
|
|
|
|
}
|
|
// status
|
|
const status = document.createElement('td');
|
|
status.textContent = submission.status;
|
|
listItem.appendChild(status);
|
|
|
|
submissionList.appendChild(listItem);
|
|
});
|
|
noSubmissionsMessage.style.display = 'none'; // Hide no submissions message
|
|
} else {
|
|
noSubmissionsMessage.style.display = 'block'; // Show no submissions message
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching submissions:', error);
|
|
});
|
|
}
|
|
// Load submissions on page load
|
|
document.addEventListener('DOMContentLoaded', loadSubmissions);
|
|
</script> -->
|
|
|
|
<script>
|
|
// Function to submit the form
|
|
document.getElementById('helpdesk-form').addEventListener('submit', function(event) {
|
|
event.preventDefault(); // Prevent default form submission behavior
|
|
|
|
const formData = new FormData(this);
|
|
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value; // CSRF token
|
|
formData.append('status', 1); // Set the status value as 1
|
|
|
|
// POST request to the helpdesk submit API
|
|
fetch('http://127.0.0.1:8000/helpdesk/submit/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': csrfToken // Attach CSRF token
|
|
},
|
|
body: formData // Send form data
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert('Submission created successfully!');
|
|
loadAllSubmissions(); // Reload all submissions
|
|
} else {
|
|
alert('Error creating submission. Please try again.');
|
|
console.error('Form errors:', data.errors);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
});
|
|
|
|
// Function to load all submissions (for "All Tickets")
|
|
function loadAllSubmissions() {
|
|
console.log('Loading all submissions...');
|
|
fetch('http://127.0.0.1:8000/helpdesk/submissions/', {
|
|
method: 'GET',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok: ' + response.statusText);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
const submissionList = document.getElementById('submission-list');
|
|
const noSubmissionsMessage = document.getElementById('no-submissions');
|
|
submissionList.innerHTML = ''; // Clear the previous list
|
|
|
|
if (data.submissions && data.submissions.length > 0) {
|
|
data.submissions.forEach(submission => {
|
|
const listItem = document.createElement('tr');
|
|
|
|
// Title
|
|
const title = document.createElement('td');
|
|
title.textContent = submission.title;
|
|
listItem.appendChild(title);
|
|
|
|
// Description
|
|
const description = document.createElement('td');
|
|
description.textContent = submission.description;
|
|
listItem.appendChild(description);
|
|
|
|
// Image
|
|
if (submission.image) {
|
|
const img = document.createElement('img');
|
|
img.src = submission.image;
|
|
img.alt = 'Image';
|
|
img.style.width = '100px';
|
|
img.style.height = 'auto';
|
|
listItem.appendChild(img);
|
|
}
|
|
|
|
// Status
|
|
const status = document.createElement('td');
|
|
status.textContent = submission.status === 1 ? 'Submit' : submission.status; // Show 'Submit' if status is 1
|
|
listItem.appendChild(status);
|
|
|
|
submissionList.appendChild(listItem);
|
|
});
|
|
noSubmissionsMessage.style.display = 'none';
|
|
} else {
|
|
noSubmissionsMessage.style.display = 'block';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching submissions:', error);
|
|
});
|
|
}
|
|
|
|
// Function to load "My Tickets" (for "My Tickets" tab)
|
|
function loadMySubmissions() {
|
|
console.log('Loading my submissions...');
|
|
fetch('http://127.0.0.1:8000/helpdesk/submissions/', {
|
|
method: 'GET',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok: ' + response.statusText);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
const mySubmissionList = document.getElementById('my-submission-list');
|
|
const noMySubmissionsMessage = document.getElementById('no-my-submissions');
|
|
mySubmissionList.innerHTML = ''; // Clear the previous list
|
|
|
|
if (data.submissions && data.submissions.length > 0) {
|
|
data.submissions.forEach(submission => {
|
|
const listItem = document.createElement('tr');
|
|
|
|
// Title
|
|
const title = document.createElement('td');
|
|
title.textContent = submission.title;
|
|
listItem.appendChild(title);
|
|
|
|
// Description
|
|
const description = document.createElement('td');
|
|
description.textContent = submission.description;
|
|
listItem.appendChild(description);
|
|
|
|
// Image
|
|
if (submission.image) {
|
|
const img = document.createElement('img');
|
|
img.src = submission.image;
|
|
img.alt = 'Image';
|
|
img.style.width = '100px';
|
|
img.style.height = 'auto';
|
|
listItem.appendChild(img);
|
|
}
|
|
|
|
// Status
|
|
const status = document.createElement('td');
|
|
status.textContent = submission.status;
|
|
listItem.appendChild(status);
|
|
|
|
mySubmissionList.appendChild(listItem);
|
|
});
|
|
noMySubmissionsMessage.style.display = 'none';
|
|
} else {
|
|
noMySubmissionsMessage.style.display = 'block';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching my submissions:', error);
|
|
});
|
|
}
|
|
|
|
// Load submissions when the page loads
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadAllSubmissions(); // Load "All Tickets"
|
|
});
|
|
|
|
// Switch between "All Tickets" and "My Tickets"
|
|
document.getElementById('all-tickets-tab').addEventListener('click', function() {
|
|
document.getElementById('show-tickets').style.display = 'block';
|
|
document.getElementById('my-tickets').style.display = 'none';
|
|
loadAllSubmissions(); // Load "All Tickets"
|
|
});
|
|
|
|
document.getElementById('my-tickets-tab').addEventListener('click', function() {
|
|
document.getElementById('show-tickets').style.display = 'none';
|
|
document.getElementById('my-tickets').style.display = 'block';
|
|
loadMySubmissions(); // Load "My Tickets"
|
|
});
|
|
</script>
|
|
<style>
|
|
.submission-table {
|
|
width: 100%;
|
|
border: 1px solid #3a81a5; /* Table border */
|
|
border-collapse: collapse; /* Ensure borders collapse */
|
|
}
|
|
|
|
.submission-table th, .submission-table td {
|
|
border: 1px solid#3a81a5; /* Cell border */
|
|
padding: 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
/* Media Query for screens wider than 768px */
|
|
@media (min-width: 768px) {
|
|
.submission-table th, .submission-table td {
|
|
padding: 15px;
|
|
padding-right: 378px;
|
|
}
|
|
|
|
.submission-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.submission-table {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Media Query for screens smaller than 768px */
|
|
@media (max-width: 767px) {
|
|
.submission-table, .submission-table thead, .submission-table tbody, .submission-table th, .submission-table td, .submission-table tr {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.submission-table th {
|
|
background-color: #f5f5f5;
|
|
text-align: left;
|
|
}
|
|
|
|
.submission-table td {
|
|
position: relative;
|
|
padding-left: 50%;
|
|
}
|
|
|
|
.submission-table td:before {
|
|
content: attr(data-label);
|
|
position: absolute;
|
|
left: 10px;
|
|
width: 45%;
|
|
padding-right: 10px;
|
|
white-space: nowrap;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.submission-table td[data-label="Image"] img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.tab-navigation {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.tab-button {
|
|
height: 45px;
|
|
margin-top: 1rem;
|
|
padding: 0 25px;
|
|
}
|
|
|
|
.tab-button:hover {
|
|
background: linear-gradient(-135deg, #0e2a39, #0a181e); /* Darker shade on hover */
|
|
}
|
|
}
|
|
</style>
|
|
|
|
</body>
|
|
{% endblock %}
|
|
</html> |