287 lines
22 KiB
HTML
287 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="../../globalcss.css">
|
|
<link rel="stylesheet" href="../panel.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="shortcut icon" href="../../img/logo.png" type="image/x-icon">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha1/0.6.0/sha1.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/geolib/3.3.1/geolib.min.js"></script>
|
|
<title>M-Panel | Live Map</title>
|
|
</head>
|
|
<body>
|
|
<div id="loading-container" class="panel">
|
|
<div id="loading-item"></div>
|
|
</div>
|
|
|
|
<div id="app">
|
|
<m-navbar
|
|
loginhref="/Login/"
|
|
homehref="/"
|
|
rightbutton="Sign Out"
|
|
colorofbutton="yellow-white-linear"
|
|
></m-navbar>
|
|
<div id="background-front"></div>
|
|
<div id="background"></div>
|
|
<div id="page-content-container">
|
|
<div id="panel-content">
|
|
<Transition name="fade">
|
|
<div id="create-new-blip-popup" v-if="newBlipPopup">
|
|
<div id="create-new-blip-box">
|
|
<span style="margin-left: 1.8519vh; margin-top: 1.8519vh; font-size: 1.3889vh; font-weight: 600;">
|
|
Create New Blip
|
|
</span>
|
|
<input type="text" placeholder="Blip Name" v-model="newBlipPopup.name" style="margin-left: 1.8519vh; margin-top: 1.8519vh;">
|
|
<div id="blip-box-small-inputs">
|
|
<input type="text" placeholder="Blip Icon ID" v-model="newBlipPopup.sprite">
|
|
<input type="text" placeholder="Blip Coordinates" v-model="newBlipPopup.coords">
|
|
</div>
|
|
<div id="blip-box-small-inputs">
|
|
<input type="text" placeholder="Blip Color" v-model="newBlipPopup.color">
|
|
<input type="text" placeholder="Blip Scale" v-model="newBlipPopup.scale" style="background-image: url(img/CreateNewBlipPopupSmallOtherInputBg.png);">
|
|
</div>
|
|
<div id="blip-box-buttons">
|
|
<div id="blip-box-button" @click="newBlipPopup = undefined">Cancel</div>
|
|
<div id="blip-box-button" class="create" @click="createNewBlip()">Create</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
|
|
<Transition name="fade">
|
|
<div id="delete-blip-popup" v-if="deleteBlipPopup">
|
|
<div id="delete-blip-popup-box">
|
|
<img src="img/HudBlipIcon.png" alt="hudBlip">
|
|
<span class="blipName">{{ deleteBlipPopup.name }}</span>
|
|
<span class="areYouSure">Are you sure to delete this blip from map ?</span>
|
|
<span class="lowOpacity">This action cannot be undone!</span>
|
|
<div id="delete-blip-popup-buttons">
|
|
<div id="delete-blip-popup-button" @click="deleteBlipPopup = undefined">Cancel</div>
|
|
<div id="delete-blip-popup-button" class="delete" @click="deleteHudBlip(deleteBlipPopup.id)">Delete</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
|
|
<left-navbar
|
|
activepage="Live Map"
|
|
></left-navbar>
|
|
<div id="right-page-container">
|
|
<div id="header-content">
|
|
<p style="margin-left: 3.4259vh; font-size: 1.6667vw; font-weight: 600;">Live Map</p>
|
|
<span style="position: absolute; top: 6.4815vh; left: 25.9259vh; opacity: .5; font-size: 1.1111vh;">You can right click to create blip on clicked location.</span>
|
|
|
|
<div id="search-players-container">
|
|
<input type="text" placeholder="Search player, vehicle or any place" v-model="searchValue">
|
|
</div>
|
|
|
|
<notify-menu :notifymenu="notifyMenu" @closenotifymenu="notifyMenu = false"></notify-menu>
|
|
<new-notify :newnotify="newNotify" @closenewnotify="newNotify = false"></new-notify>
|
|
|
|
<div id="notify-container" v-if="!notifyMenu && !newNotify" @click="notifyMenu = true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width=".9375vw" height="1.0417vw" viewBox="0 0 19 21" fill="none">
|
|
<g clip-path="url(#clip0_103_3053)">
|
|
<path d="M1.47461 16.709H16.9531C17.4154 16.709 17.7767 16.6016 18.0371 16.3867C18.2975 16.1719 18.4277 15.8854 18.4277 15.5273C18.4277 15.2018 18.3333 14.8861 18.1445 14.5801C17.9557 14.2741 17.7197 13.9746 17.4365 13.6816C17.1533 13.3887 16.8717 13.0957 16.5918 12.8027C16.3769 12.5814 16.2093 12.2917 16.0889 11.9336C15.9684 11.5755 15.8789 11.1947 15.8203 10.791C15.7617 10.3873 15.7194 9.99671 15.6934 9.61914C15.6869 9.30013 15.6755 8.98925 15.6592 8.68652C15.6429 8.38379 15.6185 8.08919 15.5859 7.80273C15.3385 7.90039 15.0846 7.97526 14.8242 8.02734C14.5638 8.07943 14.2936 8.10547 14.0137 8.10547C13.1478 8.10547 12.3584 7.89225 11.6455 7.46582C10.9326 7.03939 10.363 6.4681 9.93652 5.75195C9.51009 5.0358 9.29688 4.24804 9.29688 3.38867C9.29688 2.80924 9.39779 2.25911 9.59961 1.73828C9.80143 1.21745 10.0749 0.751953 10.4199 0.341797C10.0553 0.159505 9.65169 0.0683594 9.20898 0.0683594C8.49284 0.0683594 7.89063 0.289714 7.40234 0.732422C6.91406 1.17513 6.57877 1.71549 6.39648 2.35352C5.5306 2.66602 4.83236 3.1543 4.30176 3.81836C3.77116 4.48242 3.38216 5.30273 3.13477 6.2793C2.88737 7.25586 2.75391 8.36914 2.73438 9.61914C2.70833 9.99671 2.66601 10.3873 2.60742 10.791C2.54883 11.1947 2.45931 11.5755 2.33887 11.9336C2.21842 12.2917 2.05078 12.5814 1.83594 12.8027C1.55599 13.0957 1.27442 13.3887 0.991211 13.6816C0.708008 13.9746 0.472005 14.2741 0.283203 14.5801C0.094401 14.8861 0 15.2018 0 15.5273C0 15.8854 0.130208 16.1719 0.390625 16.3867C0.651042 16.6016 1.01237 16.709 1.47461 16.709ZM9.20898 20.625C9.76239 20.625 10.2572 20.5046 10.6934 20.2637C11.1296 20.0228 11.4795 19.707 11.7432 19.3164C12.0069 18.9258 12.1615 18.5026 12.207 18.0469H6.2207C6.25977 18.5026 6.41276 18.9258 6.67969 19.3164C6.94662 19.707 7.29818 20.0228 7.73438 20.2637C8.17057 20.5046 8.66211 20.625 9.20898 20.625Z" fill="white"/>
|
|
<path d="M14.0234 6.77734C14.6354 6.77734 15.1985 6.62435 15.7129 6.31836C16.2272 6.01237 16.6374 5.60222 16.9434 5.08789C17.2493 4.57357 17.4023 4.00716 17.4023 3.38867C17.4023 2.77018 17.2493 2.20378 16.9434 1.68945C16.6374 1.17513 16.2272 0.764974 15.7129 0.458984C15.1985 0.152995 14.6354 0 14.0234 0C13.3984 0 12.8303 0.152995 12.3193 0.458984C11.8082 0.764974 11.3997 1.17513 11.0938 1.68945C10.7878 2.20378 10.6348 2.77018 10.6348 3.38867C10.6348 4.00716 10.7878 4.57357 11.0938 5.08789C11.3997 5.60222 11.8082 6.01237 12.3193 6.31836C12.8303 6.62435 13.3984 6.77734 14.0234 6.77734Z" fill="#FF3B30"/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_103_3053">
|
|
<rect width="18.4277" height="20.6934" fill="white"/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="user-details-container" v-if="!notifyMenu && !newNotify">
|
|
<div id="text-details">
|
|
<p style="font-size: 1.4815vh; font-weight: 700; font-family: 'SF Pro Display';">{{ userUsername }}</p>
|
|
<p class="rank" :style="{ 'color': userRank.color }">{{ userRank.title }}</p>
|
|
</div>
|
|
<div id="user-icon" :style="{ 'border-color': userRank.color, 'background-image': 'url('+userIcon+')', 'background-size': 'cover', 'background-position': 'center' }">
|
|
<div id="circle-user-icon"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="map"></div> <!-- Leaflet Map -->
|
|
|
|
<Transition name="slide-fade">
|
|
<div id="mapItemDetailsPlayers" class="map-item-details" v-if="selectedPlayer.id !== 0" @click="inspectSelectedUser()">
|
|
<div id="map-item-details-header">
|
|
<div id="details-player-icon">
|
|
<img :src="selectedPlayer.icon" alt="defaultIcon">
|
|
</div>
|
|
<div id="details-player-credits">
|
|
<span>{{ selectedPlayer.name }}</span>
|
|
<span style="opacity: .4;">{{ selectedPlayer.job }}</span>
|
|
</div>
|
|
</div>
|
|
<div id="map-item-details-credits">
|
|
<div id="details-credits-item">
|
|
<img src="img/PlayerIdIcon.png" alt="playerId" style="width: 1.5741vh; height: 1.2963vh; margin-left: 3.3333vh;">
|
|
<span>{{ selectedPlayer.id }}</span>
|
|
</div>
|
|
<div id="details-credits-item">
|
|
<img src="img/LocationIcon.png" alt="locationIcon" style="width: 1.4259vh; height: 1.6667vh; margin-left: 3.3333vh;">
|
|
<span style="margin-left: 2.5528vh;">{{ selectedPlayer.coords }}</span>
|
|
</div>
|
|
<div id="details-credits-item">
|
|
<img src="img/PlayerStatusIcon.png" alt="statusIcon" style="width: 1.4815vh; height: 1.4815vh; margin-left: 3.3333vh;">
|
|
<span style="margin-left: 2.5528vh;">{{ selectedPlayer.status }}</span>
|
|
</div>
|
|
</div>
|
|
<div id="map-item-line"></div>
|
|
<span style="font-size: 1.1111vh; font-weight: 600; width: 100%; display: flex; justify-content: center; margin-top: 1.3889vh;">
|
|
Inspect
|
|
</span>
|
|
</div>
|
|
</Transition>
|
|
|
|
<Transition name="slide-fade">
|
|
<div id="mapItemDetailsVehicles" @click="inspectSelectedVehicle()" class="map-item-details" v-if="selectedVehicle.vehicleId !== 0" style="background-image: url(img/MapItemDetailsBgVehicle.png);">
|
|
<div id="map-item-details-header">
|
|
<div id="details-player-credits" style="margin-left: 7.4074vh;">
|
|
<span>{{ selectedVehicle.label }}</span>
|
|
<span style="opacity: 0.4;">{{ selectedVehicle.owner }}</span>
|
|
</div>
|
|
</div>
|
|
<div id="map-item-details-credits">
|
|
<div id="details-credits-item">
|
|
<img src="img/VehiclePlateIcon.png" alt="plateIcon" style="width: 1.6667vh; height: 1.2963vh; margin-left: 3.3333vh;">
|
|
<span style="margin-left: 2.4074vh;">{{ selectedVehicle.plate }}</span>
|
|
</div>
|
|
<div id="details-credits-item">
|
|
<img src="img/LocationIcon.png" alt="plateIcon" style="width: 1.4259vh; height: 1.6667vh; margin-left: 3.3333vh;">
|
|
<span style="margin-left: 2.5528vh;">{{ selectedVehicle.coords.map(coord => coord = parseInt(coord)).join(", ") }}</span>
|
|
</div>
|
|
<div id="details-credits-item">
|
|
<img src="img/VehicleFuelIcon.png" alt="plateIcon" style="width: 1.2963vh; height: 1.4815vh; margin-left: 3.3333vh;">
|
|
<span style="margin-left: 2.5926vh;">{{ '%'+selectedVehicle.fuel }}</span>
|
|
</div>
|
|
</div>
|
|
<div id="map-item-line"></div>
|
|
<span style="font-size: 1.1111vh; font-weight: 600; width: 100%; display: flex; justify-content: center; margin-top: 1.3889vh;">
|
|
Inspect
|
|
</span>
|
|
</div>
|
|
</Transition>
|
|
|
|
<Transition name="slide-fade">
|
|
<div id="mapItemDetailsHudBlips" @click="editCreatedBlip(selectedHudBlipEditing)" class="map-item-details" v-if="selectedHudBlip.id !== 0" style="background-image: url(img/MapItemDetailsBgHudBlip.png);">
|
|
<div id="map-item-details-header">
|
|
<div id="details-player-credits" style="margin-left: 7.4074vh;">
|
|
<span v-if="!selectedHudBlipEditing">{{ selectedHudBlip.name }}</span>
|
|
<input @click="$event.stopPropagation()" v-if="selectedHudBlipEditing" v-model="selectedHudBlipEditing.name" type="text" :placeholder="selectedHudBlip.name">
|
|
</div>
|
|
</div>
|
|
<div id="map-item-details-credits">
|
|
<div id="details-credits-item">
|
|
<img src="img/PlayerIdIcon.png" alt="idIcon" style="width: 1.5741vh; height: 1.2963vh; margin-left: 3.3333vh;">
|
|
<span style="margin-left: 2.4074vh;">{{ 'Blip ID: '+selectedHudBlip.id }}</span>
|
|
</div>
|
|
<div id="details-credits-item" style="align-items: center;">
|
|
<img v-if="!selectedHudBlipEditing" src="img/SpriteIcon.png" alt="spriteIcon" style="width: 1.4167vh; height: 2.1296vh; margin-left: 3.3333vh;">
|
|
<input @click="$event.stopPropagation()" v-if="selectedHudBlipEditing" v-model="selectedHudBlipEditing.sprite" :placeholder="selectedHudBlip.sprite" type="text" class="editInput" style="background-image: url(img/ChangeSpriteInputBg.png);">
|
|
<span v-if="!selectedHudBlipEditing" style="margin-left: 2.5528vh;">{{ 'Blip Sprite: '+selectedHudBlip.sprite }}</span>
|
|
</div>
|
|
<div id="details-credits-item">
|
|
<img v-if="!selectedHudBlipEditing" src="img/MapIcon.png" alt="mapIcon" style="width: 1.5741vh; height: 1.4815vh; margin-left: 3.3333vh;">
|
|
<input @click="$event.stopPropagation()" v-if="selectedHudBlipEditing" v-model="selectedHudBlipEditing.coords" :placeholder="selectedHudBlip.coords.map(coord => coord = parseInt(coord)).join(' ')" type="text" class="editInput" style="background-image: url(img/ChangeCoordsInputBg.png);">
|
|
<span v-if="!selectedHudBlipEditing" style="margin-left: 2.5926vh;">{{ selectedHudBlip.coords.map(coord => coord = parseInt(coord)).join(", ") }}</span>
|
|
</div>
|
|
</div>
|
|
<div id="map-item-line"></div>
|
|
<span style="font-size: 1.1111vh; font-weight: 600; width: 100%; display: flex; justify-content: center; margin-top: 1.3889vh;">
|
|
{{ selectedHudBlipEditing ? 'Save' : 'Edit' }}
|
|
</span>
|
|
</div>
|
|
</Transition>
|
|
<Transition name="deleteblip">
|
|
<div @click="deleteBlipPopup = { name: selectedHudBlip.name, id: selectedHudBlip.id }" id="map-item-details-delete-button" v-if="selectedHudBlipEditing && selectedHudBlip.id !== 0">
|
|
Delete Blip
|
|
</div>
|
|
</Transition>
|
|
|
|
<div id="map-controls">
|
|
<div id="map-zoom-controls">
|
|
<div id="map-zoom-controls-button" @click="zoomInOrOut('out')" style="border-right: 0.1852vh solid #ffffff1b;" ><img src="img/MinusIcon.png" alt="minus"></div>
|
|
<div id="map-zoom-controls-button" @click="zoomInOrOut('in')"><img src="img/PlusIcon.png" alt="plus"></div>
|
|
</div>
|
|
<div id="map-styles-container">
|
|
<div id="map-styles-item" v-for="data in mapStylesButtons">
|
|
<div id="map-item-checkbox" :class="{ checked: data.checked }" @click="changeMapStyle(data.name)">
|
|
<img src="img/PlayerTikIcon.png" alt="tikIcon" v-if="data.checked">
|
|
</div>
|
|
<span class="mapStyle" :style="{ opacity: data.checked ? '1' : '' }">{{ data.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="map-categories-control">
|
|
<div id="map-categories-container">
|
|
<div id="map-categories-categories" v-if="!rightPanelMinimized">
|
|
<div :class="{ active: rightPanelCategory === 'players' }" @click="changeToPlayerBlips()">
|
|
<span>Players</span>
|
|
<div id="active-line"></div>
|
|
</div>
|
|
<div :class="{ active: rightPanelCategory === 'vehicles' }" @click="changeToVehicleBlips()">
|
|
<span>Vehicles</span>
|
|
<div id="active-line"></div>
|
|
</div>
|
|
<div :class="{ active: rightPanelCategory === 'hudblips' }" @click="changeToHudBlips()">
|
|
<span>Created Blips</span>
|
|
<div id="active-line"></div>
|
|
</div>
|
|
</div>
|
|
<div id="map-categories-list" v-if="!rightPanelMinimized">
|
|
|
|
<div id="map-categories-list-item" @click="selectPlayerFromRightPanel(data.id)" v-if="rightPanelCategory === 'players'" v-for="data in mapPlayerBlips">
|
|
<div id="list-item-icon" :style="{ borderColor: data.playerColor }"> <img :src="data.icon" alt="userIcon"> </div>
|
|
<div style="display: flex; flex-direction: column; justify-content: space-evenly; height: 100%; margin-left: 0.9259vh; font-size: 1.1111vh; font-weight: 600;">
|
|
<span>{{ data.name }}</span>
|
|
<span style="opacity: 0.4;">{{ data.job }}</span>
|
|
</div>
|
|
<img :src="data.playerBlip" class="blipIcon" alt="blipIcon">
|
|
</div>
|
|
|
|
<div id="map-categories-list-item" @click="selectVehicleFromRightPanel(data.vehicleId)" v-if="rightPanelCategory === 'vehicles'" v-for="data in mapVehicleBlips">
|
|
<div id="list-item-icon" style="border: 0;"> <img src="img/CarImg.png" alt="userIcon" style="border-radius: 0;"> </div>
|
|
<div style="display: flex; flex-direction: column; justify-content: space-evenly; height: 100%; margin-left: 0.9259vh; font-size: 1.1111vh; font-weight: 600;">
|
|
<span>{{ data.label }}</span>
|
|
<span style="opacity: 0.4;">{{ data.owner }}</span>
|
|
</div>
|
|
<img src="img/PlayerBlipIcon.png" class="blipIcon" alt="blipIcon">
|
|
</div>
|
|
|
|
<div id="map-categories-list-item" @click="selectHudBlipFromRightPanel(data.id)" v-if="rightPanelCategory === 'hudblips'" v-for="data in mapHudBlips">
|
|
<div id="list-item-icon" style="border: 0;"> <img src="img/HudBlipIcon.png" alt="userIcon" style="border-radius: 0; width: 1.5741vh; height: 2.4074vh;"> </div>
|
|
<div style="display: flex; flex-direction: column; justify-content: space-evenly; height: 100%; margin-left: 0.9259vh; font-size: 1.1111vh; font-weight: 600;">
|
|
<span style="width: 12.037vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
|
|
{{ data.name }}
|
|
</span>
|
|
</div>
|
|
<img src="img/PlayerBlipIcon.png" class="blipIcon" alt="blipIcon">
|
|
</div>
|
|
|
|
</div>
|
|
<span @click="minimizeRightPanel()" style="font-size: 0.9259vh; font-weight: 500; height: 3.6111vh; display: flex; align-items: center; justify-content: center;">
|
|
{{ rightPanelMinimized ? "Maximize Panel" : "Minimize Panel" }}
|
|
</span>
|
|
</div>
|
|
<div id="map-categories-button" @click="newBlipPopup = { name: '', sprite: null, coords: '0 0 0' }">Create New Blip</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../components.js"></script>
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html> |