ed
This commit is contained in:
Nordi98
parent
187178b704
commit
57069485d5
14 changed files with 1126 additions and 0 deletions
144
resources/[Developer]/[Max]/ticketpanel_qb/web/css/style.css
Normal file
144
resources/[Developer]/[Max]/ticketpanel_qb/web/css/style.css
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
body {
|
||||
background: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header, .content-header {
|
||||
background-color: #2c2c2c;
|
||||
padding: 15px 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.header .btn, .content-header .btn {
|
||||
margin: 5px;
|
||||
padding: 8px 12px;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.header .btn:hover, .content-header .btn:hover {
|
||||
background-color: #414141;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-header .column {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-header .column img {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.price-up {
|
||||
color: #4caf50; /* Modernes Grün */
|
||||
}
|
||||
|
||||
.price-equal {
|
||||
color: #d3d3d3;
|
||||
}
|
||||
|
||||
.price-down {
|
||||
color: #ff5252; /* Lebendigeres Rot */
|
||||
}
|
||||
|
||||
.bor {
|
||||
border-bottom: 2px solid #555555;
|
||||
}
|
||||
|
||||
.up, .down {
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.up:hover, .down:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
filter: invert(1) brightness(2);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
|
||||
.input-shorter {
|
||||
width: 200px;
|
||||
margin: 6px;
|
||||
padding: 8px;
|
||||
border: 1px solid #444;
|
||||
background-color: #3a3a3a;
|
||||
color: #e0e0e0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.input-shorter:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
|
||||
}
|
||||
|
||||
.background-container {
|
||||
background-color: #2e2e2e;
|
||||
padding: 20px;
|
||||
margin: 50px auto;
|
||||
border-radius: 10px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.max-bounds {
|
||||
max-width: 1400px; /* 1200px */
|
||||
max-height: 768px;
|
||||
padding: 27.5px;
|
||||
overflow-y: auto;
|
||||
background: #1e1e1e;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/* Modern Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #2c2c2c;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(180, 180, 180, 0.4);
|
||||
border-radius: 10px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(180, 180, 180, 0.7);
|
||||
}
|
||||
|
||||
.header .btn, .content-header .btn {
|
||||
margin: 8px;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="m16.707,8.707l-3.293,3.293,3.293,3.293-1.414,1.414-3.293-3.293-3.293,3.293-1.414-1.414,3.293-3.293-3.293-3.293,1.414-1.414,3.293,3.293,3.293-3.293,1.414,1.414Zm7.293,3.293c0,6.617-5.383,12-12,12S0,18.617,0,12,5.383,0,12,0s12,5.383,12,12Zm-2,0c0-5.514-4.486-10-10-10S2,6.486,2,12s4.486,10,10,10,10-4.486,10-10Z"/></svg>
|
||||
|
After Width: | Height: | Size: 485 B |
|
|
@ -0,0 +1,2 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" fill="#FFFFFF" viewBox="0 0 24 24" width="512" height="512"><path d="M21,21H3c-1.657,0-3-1.343-3-3v-4l1.096,.003c1.1-.029,1.986-.855,1.986-1.962s-.884-2.009-1.982-2.04l-1.1,.003V6c0-1.657,1.343-3,3-3H21c1.657,0,3,1.343,3,3v4h-.888c-.997,0-1.922,.679-2.084,1.662-.206,1.252,.758,2.338,1.972,2.338h1v4c0,1.657-1.343,3-3,3Z"/></svg>
|
||||
|
After Width: | Height: | Size: 442 B |
31
resources/[Developer]/[Max]/ticketpanel_qb/web/index.html
Normal file
31
resources/[Developer]/[Max]/ticketpanel_qb/web/index.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<meta charset='UTF-8'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||
<title>Ticket Panel</title>
|
||||
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' rel='stylesheet'>
|
||||
<link href='css/style.css' rel='stylesheet'>
|
||||
</head>
|
||||
|
||||
<body class='d-none'>
|
||||
<div class='container mt-5 max-bounds'>
|
||||
<div class='header row align-items-center'>
|
||||
<div class='col-md-3'>
|
||||
<h2>Ticket Panel</h2>
|
||||
</div>
|
||||
<div class='col-md-9 d-flex justify-content-end align-items-center'>
|
||||
<button class='btn btn-secondary d-flex align-items-center justify-content-center' onClick='closeUi()' style='height: 39px;'>
|
||||
<img src='image/circle-xmark.svg' alt='Close' class='icon'>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id='content'></div>
|
||||
</div>
|
||||
|
||||
<script src='https://code.jquery.com/jquery-3.5.1.slim.min.js'></script>
|
||||
<script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js'></script>
|
||||
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
|
||||
<script src='js/main.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
121
resources/[Developer]/[Max]/ticketpanel_qb/web/js/main.js
Normal file
121
resources/[Developer]/[Max]/ticketpanel_qb/web/js/main.js
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
$(function() {
|
||||
window.addEventListener('message', (event) => {
|
||||
const { data } = event;
|
||||
if (!data || !data.type) return;
|
||||
|
||||
const actions = {
|
||||
'open': () => $('body').removeClass('d-none'),
|
||||
'close': () => $('body').addClass('d-none'),
|
||||
'removeTicket': () => removeTicket(data.uniqueId),
|
||||
'createTicket': () => createTicket(data.ticketContent),
|
||||
'syncState': () => changeState(data.ticketContent),
|
||||
};
|
||||
|
||||
const action = actions[data.type];
|
||||
if (action) action();
|
||||
});
|
||||
});
|
||||
|
||||
function createTicket(ticketContent) {
|
||||
const { uniqueId, claimedBy, playerName, playerId, reason, time, playerCoords } = ticketContent;
|
||||
|
||||
const createElement = (tag, { className = '', textContent = '', attributes = {} } = {}) => {
|
||||
const element = document.createElement(tag);
|
||||
if (className) element.className = className;
|
||||
if (textContent) element.textContent = textContent;
|
||||
Object.entries(attributes).forEach(([key, value]) => element.setAttribute(key, value));
|
||||
return element;
|
||||
};
|
||||
|
||||
const createButton = (text, className, onClick) => {
|
||||
const button = createElement('button', { className, textContent: text });
|
||||
button.style.height = '38px';
|
||||
button.addEventListener('click', onClick);
|
||||
return button;
|
||||
};
|
||||
|
||||
const contentHeader = createElement('div', {
|
||||
className: 'content-header row mt-1 text-center bor',
|
||||
attributes: { 'data-unique-id': uniqueId },
|
||||
});
|
||||
|
||||
const col1 = createElement('div', { className: 'col-md-2 column' });
|
||||
const img = createElement('img', { attributes: { src: 'image/ticket.svg', alt: 'Icon' } });
|
||||
const playerInfo = createElement('div', { textContent: `${playerName} [${playerId}]` });
|
||||
col1.append(img, playerInfo);
|
||||
|
||||
const col2 = createElement('div', { className: 'col-md-3 column', textContent: reason });
|
||||
|
||||
const col5 = createElement('div', { className: 'col-sm column align-items-center justify-content-center', textContent: `${time} Uhr` });
|
||||
|
||||
const col3 = createElement('div', { className: 'col-md-2 column' });
|
||||
const buttonOpen = createButton(claimedBy, 'btn btn-success me-2 d-flex align-items-center justify-content-center');
|
||||
col3.appendChild(buttonOpen);
|
||||
|
||||
const col4 = createElement('div', { className: 'column' });
|
||||
const buttonClaim = createButton('Claim', 'btn btn-info me-2 d-flex align-items-center justify-content-center', () => {
|
||||
fetch(`https://${GetParentResourceName()}/syncState`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(ticketContent),
|
||||
headers: {'Content-Type': 'application/json; charset=UTF-8'},
|
||||
}).catch(err => console.error(err));
|
||||
});
|
||||
|
||||
const buttonTP = createButton('TP', 'btn btn-secondary me-2 d-flex align-items-center justify-content-center', () => teleport(playerId));
|
||||
const buttonWP = createButton('WP', 'btn btn-secondary me-2 d-flex align-items-center justify-content-center', () => waypoint(playerCoords));
|
||||
const buttonDEL = createButton('DEL', 'btn btn-danger me-2 d-flex align-items-center justify-content-center', () => {
|
||||
fetch(`https://${GetParentResourceName()}/syncDelete`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(uniqueId),
|
||||
headers: {'Content-Type': 'application/json; charset=UTF-8'},
|
||||
}).catch(err => console.error(err));
|
||||
});
|
||||
|
||||
col4.append(buttonClaim, buttonTP, buttonWP, buttonDEL);
|
||||
contentHeader.append(col1, col2, col5, col3, col4);
|
||||
|
||||
document.getElementById('content').appendChild(contentHeader);
|
||||
console.log('I created a ticket with id: ' + uniqueId)
|
||||
}
|
||||
|
||||
function changeState(ticketContent) {
|
||||
const element = document.querySelector(`.content-header[data-unique-id="${ticketContent.uniqueId}"]`);
|
||||
if (element) {
|
||||
const button = element.querySelector('button.btn-success');
|
||||
if (button) {
|
||||
console.log(ticketContent.claimedBy);
|
||||
button.textContent = ticketContent.claimedBy;
|
||||
button.className = 'btn btn-warning me-2 d-flex align-items-center justify-content-center';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function teleport(playerId) {
|
||||
fetch(`https://${GetParentResourceName()}/teleport`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(playerId),
|
||||
headers: {'Content-Type': 'application/json; charset=UTF-8'},
|
||||
}).catch(err => console.error(err));
|
||||
}
|
||||
|
||||
function waypoint(playerCoords) {
|
||||
fetch(`https://${GetParentResourceName()}/waypoint`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(playerCoords),
|
||||
headers: {'Content-Type': 'application/json; charset=UTF-8'},
|
||||
}).catch(err => console.error(err));
|
||||
}
|
||||
|
||||
function removeTicket(uniqueId) {
|
||||
const element = document.querySelector(`.content-header[data-unique-id="${uniqueId}"]`);
|
||||
if (element) {
|
||||
element.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function closeUi() {
|
||||
fetch(`https://${GetParentResourceName()}/close`, {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json; charset=UTF-8'}
|
||||
}).catch(error => console.error('Error:', error));
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue