| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html lang="en">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta charset="UTF-8">
|
|---|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|---|
| 6 | <title>Support Tickets</title>
|
|---|
| 7 | <link rel="stylesheet" href="/css/main.css">
|
|---|
| 8 | <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
|---|
| 9 | </head>
|
|---|
| 10 | <body>
|
|---|
| 11 |
|
|---|
| 12 | <div id="app" class="support-ticket-container">
|
|---|
| 13 | <h1>Support Tickets</h1>
|
|---|
| 14 | <div class="ticket-layout">
|
|---|
| 15 | <!-- Left side: Ticket list -->
|
|---|
| 16 | <div class="ticket-list">
|
|---|
| 17 | <div class="ticket-item"
|
|---|
| 18 | v-for="ticket in tickets"
|
|---|
| 19 | :key="ticket.id"
|
|---|
| 20 | @click="selectTicket(ticket)"
|
|---|
| 21 | :class="{'active': selectedTicket && selectedTicket.id === ticket.id}">
|
|---|
| 22 | <div class="ticket-info">
|
|---|
| 23 | <p><strong>Subject:</strong> {{ ticket.subject }}</p>
|
|---|
| 24 | <p><strong>Date:</strong> {{ ticket.date }}</p>
|
|---|
| 25 | </div>
|
|---|
| 26 | <div class="ticket-actions">
|
|---|
| 27 | <button @click.stop="resolveTicket(ticket.id)">Resolve</button>
|
|---|
| 28 | </div>
|
|---|
| 29 | </div>
|
|---|
| 30 | </div>
|
|---|
| 31 |
|
|---|
| 32 | <!-- Right side: Ticket details -->
|
|---|
| 33 | <div class="ticket-details" v-if="selectedTicket">
|
|---|
| 34 | <h2>Ticket Details</h2>
|
|---|
| 35 | <p><strong>Subject:</strong> {{ selectedTicket.subject }}</p>
|
|---|
| 36 | <p><strong>Description:</strong> {{ selectedTicket.description }}</p>
|
|---|
| 37 | <p><strong>Date:</strong> {{ selectedTicket.date }}</p>
|
|---|
| 38 | <button @click="resolveTicket(selectedTicket.id)">Resolve</button>
|
|---|
| 39 | </div>
|
|---|
| 40 | </div>
|
|---|
| 41 | </div>
|
|---|
| 42 |
|
|---|
| 43 | <script>
|
|---|
| 44 | new Vue({
|
|---|
| 45 | el: '#app',
|
|---|
| 46 | data: {
|
|---|
| 47 | tickets: [
|
|---|
| 48 | { id: 1, subject: 'Flight booking issue', description: 'Customer could not book a flight.', date: '2025-02-01' },
|
|---|
| 49 | { id: 2, subject: 'Payment failure', description: 'Payment was not processed during checkout.', date: '2025-02-02' }
|
|---|
| 50 | ],
|
|---|
| 51 | selectedTicket: null
|
|---|
| 52 | },
|
|---|
| 53 | methods: {
|
|---|
| 54 | resolveTicket(id) {
|
|---|
| 55 | alert(`Ticket ${id} resolved.`);
|
|---|
| 56 | // Optionally, you can update the ticket's status or remove it
|
|---|
| 57 | },
|
|---|
| 58 | selectTicket(ticket) {
|
|---|
| 59 | this.selectedTicket = ticket;
|
|---|
| 60 | }
|
|---|
| 61 | }
|
|---|
| 62 | });
|
|---|
| 63 | </script>
|
|---|
| 64 |
|
|---|
| 65 | </body>
|
|---|
| 66 | </html>
|
|---|
