You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
308 lines
16 KiB
HTML
308 lines
16 KiB
HTML
{% extends "customer_main.html" %}
|
|
{%load static%}
|
|
{% block content %}
|
|
|
|
|
|
<div class="w-full flex flex-col gap-5">
|
|
<!-- PROJECTS -->
|
|
{% if customer_projects %}
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
|
|
<h1 class="text-secondosiblue text-[25px]">Projects</h1>
|
|
|
|
<div class="w-full grid grid-cols-1 s:grid-cols-2 gap-5 mt-3">
|
|
{% for customer_project in customer_projects %}
|
|
<a href="{% url 'customerprojectdetails' customer_project.project_id %}">
|
|
<div
|
|
class="w-full rounded-md flex flex-col justify-between items-center gap-3 px-5 py-9 h-[250px] bg-gray-50 shadow-md relative hover:bg-gray-100 duration-300 projectContainer">
|
|
<div class="flex flex-col justify-center items-center gap-5">
|
|
<div class="w-[70px] h-[70px] rounded-full shadow-md">
|
|
{% if customer_project.logo %}
|
|
<img src="{{customer_project.logo.url}}" class="w-full h-full rounded-full object-cover">
|
|
{% else %}
|
|
<img src="{% static 'images/ositcom_logos/logobluebg-o.jpg' %}"
|
|
class="w-full h-full rounded-full object-cover">
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-secondosiblue font-poppinsBold text-center text-xl">{{customer_project.name}}</p>
|
|
<p class="text-sm uppercase font-light text-secondosiblue text-center">
|
|
{{customer_project.project_id}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="{% if customer_project.projectstatus_set.all.last.status == 'In Progress' %} bg-orange-500 {% elif project.projectstatus_set.all.last.status == 'Completed' %} bg-green-700 {% elif project.projectstatus_set.all.last.status == 'Cancelled' %} bg-red-500 {% endif %} px-3 py-2 rounded-r-md text-xs text-white font-light uppercase absolute top-5 left-0">
|
|
<p>{{customer_project.projectstatus_set.all.last.status}}</p>
|
|
</div>
|
|
|
|
|
|
<div class="w-full mt-5 flex flex-col gap-2">
|
|
<div class="w-full flex justify-between items-center gap-3 text-gray-500 font-light text-xs">
|
|
<p class="startDate">{{customer_project.start_date}}</p>
|
|
<p class="endDate">{{customer_project.end_date}}</p>
|
|
</div>
|
|
|
|
<p id="projectId" class="hidden">{{customer_project.id}}</p>
|
|
|
|
<div class="w-full rounded-md bg-white shadow-md h-[8px] mainBar">
|
|
<div class=" rounded-md h-full progressBar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
|
|
<!-- SUBSCRIPTION -->
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
|
|
<h1 class="text-secondosiblue text-[25px]">Subscriptions</h1>
|
|
<div class="w-full grid grid-cols-1 md:grid-cols-2 l:grid-cols-3 xxlg1:grid-cols-4 gap-x-5 gap-y-14 mt-3 mb-10">
|
|
|
|
{% for subscription in active_subscriptions %}
|
|
{% if subscription.item.item_type.name == 'OSIMENU' %}
|
|
<a href="{% url 'redirectosimenu' %}">
|
|
<div
|
|
class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300 relative">
|
|
<div
|
|
class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md relative h-[130px]">
|
|
{% if subscription.item.item_type.name == 'OSIMENU' %}
|
|
<img src="{% static 'images/ositcom_logos/osimenublue.png' %}" class="w-[80%] h-auto">
|
|
{% endif %}
|
|
|
|
</div>
|
|
<div class="w-full bg-white border border-gray-100 shadow-md flex justify-start items-center p-3">
|
|
<p class="text-secondosiblue text-[17px]">Expires:{% if subscription.end_at %} <span
|
|
class="font-semibold">{{subscription.end_at}} {% else %} <span class="font-semibold">No
|
|
Expiry {% endif %}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% elif subscription.item.item_type.name == 'OSICARD' %}
|
|
<a href="{% url 'redirectosicard' %}">
|
|
<div
|
|
class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300 relative">
|
|
<div
|
|
class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md relative h-[130px]">
|
|
{% if subscription.item.item_type.name == 'OSICARD' %}
|
|
<img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[80%] h-auto">
|
|
{% endif %}
|
|
|
|
</div>
|
|
<div class="w-full bg-white border border-gray-100 shadow-md flex justify-start items-center p-3">
|
|
<p class="text-secondosiblue text-[17px]">Expires:{% if subscription.end_at %} <span
|
|
class="font-semibold">{{subscription.end_at}} {% else %} <span class="font-semibold">No
|
|
Expiry {% endif %}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
|
|
<a href="{% url 'products' %}" class="w-full h-full">
|
|
<div
|
|
class="w-full h-full bg-gray-50 rounded-md flex justify-center items-center py-10 px-5 shadow-md border border-gray-100 cursor-pointer hover:bg-secondosiblue duration-300 group zoom">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-10 h-10 text-secondosiblue group-hover:text-white duration-300">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- TICKETS -->
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
|
|
<h1 class="text-secondosiblue text-[25px]">Tickets</h1>
|
|
<div class="overflow-x-auto border border-gray-300 rounded-md mt-3 tableContainer">
|
|
<table class="min-w-full divide-y">
|
|
<!-- TABLE HEADER -->
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
Subject
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
Ticket ID
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
Regarding
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
|
Last Updated
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<!-- TABLE BODY -->
|
|
<tbody class="bg-white divide-y divide-gray-200" id="tickets">
|
|
{% for ticket in customer_open_tickets %}
|
|
{% include 'details_templates/partials/customer-ticket-display.html' %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
|
|
<h1 class="text-secondosiblue text-[25px]">Ways to Get Help</h1>
|
|
|
|
<div class="w-full grid grid-cols-1 s:grid-cols-2 gap-5 mt-5">
|
|
<div
|
|
class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10 hover:bg-gray-100 duration-300">
|
|
<div
|
|
class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-8 h-8 text-secondosiblue">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<p class="font-poppinsBold text-secondosiblue text-center text-xl">Guides & Tutorials</p>
|
|
|
|
<p class="text-gray-500 font-light text-center">View Osina guides and tutorials for all experience
|
|
levels.</p>
|
|
</div>
|
|
|
|
<div
|
|
class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10 hover:bg-gray-100 duration-300">
|
|
<div
|
|
class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-8 h-8 text-secondosiblue">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<p class="font-poppinsBold text-secondosiblue text-center text-xl">Community Q&A</p>
|
|
|
|
<p class="text-gray-500 font-light text-center">Ask questions, find answers, and connect with other
|
|
members of the Ositcom community.</p>
|
|
</div>
|
|
|
|
|
|
<div
|
|
class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10 hover:bg-gray-100 duration-300">
|
|
<div
|
|
class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-8 h-8 text-secondosiblue">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<p class="font-poppinsBold text-secondosiblue text-center text-xl">Ositcom Status Page</p>
|
|
|
|
<p class="text-gray-500 font-light text-center">Get Updates on Ositcom incidents and maintenance.</p>
|
|
</div>
|
|
|
|
<a href="{% url 'contact' %}">
|
|
<div
|
|
class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10 hover:bg-gray-100 duration-300">
|
|
<div
|
|
class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-8 h-8 text-secondosiblue">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z" />
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
<p class="font-poppinsBold text-secondosiblue text-center text-xl">Customer Support</p>
|
|
|
|
<p class="text-gray-500 font-light text-center">View or open Ositcom Support tickets.</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var rows = document.querySelectorAll('table tbody tr');
|
|
rows.forEach(function (row) {
|
|
row.addEventListener('click', function () {
|
|
window.location.href = row.getAttribute('data-href');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
// WebSocket connection for new tickets
|
|
const newTicketsSocket = new WebSocket('ws://' + window.location.host + '/ws/new-tickets/');
|
|
|
|
newTicketsSocket.onopen = () => {
|
|
console.log('WebSocket connection to new tickets established');
|
|
};
|
|
|
|
newTicketsSocket.onmessage = function(e) {
|
|
const data = JSON.parse(e.data);
|
|
if (data.event_type === 'new_ticket') {
|
|
const html = data.html;
|
|
document.getElementById('tickets').insertAdjacentHTML('afterbegin', html);
|
|
}
|
|
};
|
|
|
|
newTicketsSocket.onclose = () => {
|
|
console.log('WebSocket connection to new tickets closed');
|
|
};
|
|
|
|
newTicketsSocket.onerror = (error) => {
|
|
console.log('WebSocket error:', error);
|
|
};
|
|
|
|
|
|
// WebSocket connection for new ticket updates
|
|
const newTicketUpdatesSocket = new WebSocket('ws://' + window.location.host + '/ws/new-ticket-updates/');
|
|
|
|
newTicketUpdatesSocket.onopen = () => {
|
|
console.log('WebSocket connection to new ticket updates established');
|
|
};
|
|
|
|
newTicketUpdatesSocket.onmessage = function(e) {
|
|
const data = JSON.parse(e.data);
|
|
if (data.event_type === 'new_ticket_update') {
|
|
const html = data.html;
|
|
const ticketId = data.ticket_id;
|
|
console.log(ticketId);
|
|
|
|
// Remove the existing ticket row if it exists
|
|
const existingTicketRows = document.querySelectorAll(`.ticket-${ticketId}`);
|
|
existingTicketRows.forEach(row => row.remove());
|
|
|
|
// Insert the updated ticket row at the top
|
|
document.getElementById('tickets').insertAdjacentHTML('afterbegin', html);
|
|
}
|
|
};
|
|
|
|
newTicketUpdatesSocket.onclose = () => {
|
|
console.log('WebSocket connection to new ticket updates closed');
|
|
};
|
|
|
|
newTicketUpdatesSocket.onerror = (error) => {
|
|
console.log('WebSocket error:', error);
|
|
};
|
|
</script>
|
|
|
|
<script type="module" src='{% static "js/projects/calculate-all-projects-time.js" %}'></script>
|
|
{% endblock %} |