Ignore:
Timestamp:
02/17/25 01:39:28 (4 months ago)
Author:
ste08 <sjovanoska@…>
Branches:
master
Children:
de83113
Parents:
a70b5a4
git-author:
ste08 <sjovanoska@…> (02/17/25 01:39:02)
git-committer:
ste08 <sjovanoska@…> (02/17/25 01:39:28)
Message:

Frontend + some backend changes

File:
1 edited

Legend:

Unmodified
Added
Removed

  • src/main/resources/static/index.html

    ra70b5a4 r9868304  
    44    <meta charset="UTF-8">
    55    <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>
     6    <title>SkyChase-mk</title>
     7    <style>
     8        body {
     9            background: url('images/homepage.jpg') no-repeat center center fixed;
     10            background-size: cover;
     11            display: flex;
     12            flex-direction: column;
     13            align-items: center;
     14            justify-content: center;
     15            height: 100vh;
     16            margin: 0;
     17            font-family: Arial, sans-serif;
     18        }
     19
     20        .header {
     21            position: absolute;
     22            top: 0;
     23            left: 0;
     24            display: flex;
     25            align-items: center;
     26            background-color:rebeccapurple;
     27            padding: 10px;
     28            width: 100%;
     29        }
     30
     31        .header img {
     32            width: 40px;
     33            height: 40px;
     34            margin-right: 10px;
     35        }
     36
     37        .header h1 {
     38            color: white;
     39            margin: 0;
     40            font-size: 15px;
     41            padding-right: 50px;
     42        }
     43
     44        .buttons {
     45            text-align: center;
     46        }
     47
     48        .buttons button {
     49            padding: 15px 30px;
     50            margin: 10px;
     51            font-size: 18px;
     52            border: none;
     53            border-radius: 5px;
     54            cursor: pointer;
     55            transition: 0.3s;
     56        }
     57
     58        .signup {
     59            background-color: rebeccapurple;
     60            color: white;
     61        }
     62
     63        .signup:hover {
     64            background-color: mediumpurple;
     65        }
     66
     67        .login {
     68            background-color: #007bff;
     69            color: white;
     70        }
     71
     72        .login:hover {
     73            background-color: #0056b3;
     74        }
     75        .adminlogin {
     76            top:0;
     77            right: 0;
     78            background-color: rebeccapurple;
     79            border:0;
     80            color:white;
     81            padding: 0 1200px;
     82        }
     83    </style>
    984</head>
    1085<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>
     86<div class="header">
     87    <img src="/images/home.png" alt="Home Icon">
     88    <h1>SkyChase</h1>
     89    <button class="adminlogin" onclick="location.href='/admin'">Admin?</button>
    4190</div>
    4291
    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 
     92<div class="buttons">
     93    <button class="signup" onclick="location.href='/signup'">Sign Up</button>
     94    <button class="login" onclick="location.href='/login'">Login</button>
     95</div>
    6596</body>
    6697</html>
Note: See TracChangeset for help on using the changeset viewer.