Untitled
unknown
php_laravel_blade
a month ago
9.4 kB
0
Indexable
Never
<!DOCTYPE html>
<html lang="en" style="background-color:#172554;">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TransDev AlpineJS</title>
<script>
var appSettings = {
apiBaseUrl: '{{$device->getApiBaseUrl()}}',
deviceID: 'bf629d6e-c34d-413f-82ff-a603234752b6',
refreshRate: {{$device->layout->refresh_rate ?? 30}}, // time in s between each departure API call
// Type B = Both (departures & adverts)
// TYPE A = Adverts
// Type D = Departures
displayType: 'B',
backgroundColor: '{{$device->layout->background_color}}',
primaryColor: '{{$device->layout->primary_color}}',
secondaryColor: '{{$device->layout->secondary_color}}',
lines: {{$device->layout->lines ?? 10}},
displayMessageOnError: '{{$device->layout->display_error_message}}', // display error message when API is not reachable
departuresInterval: 2, // time in s the departure screen is displayed
adInterval: {{$device->layout->ad_interval ?? 10}} // default time in s the add screen is displayed - can be overwritten by each advert
}
</script>
<script>
if (typeof window.queueMicrotask !== "function") {
window.queueMicrotask = function (callback) {
Promise.resolve()
.then(callback)
.catch(e => setTimeout(() => {
throw e;
}));
};
}
</script>
@vite('resources/js/src/main.ts')
</head>
<body class="overflow-hidden h-screen w-screen max-h-screen max-w-screen bg-white">
<div x-data="transdevApp" class="overflow-hidden fixed z-[9999] h-screen w-screen max-h-screen max-w-screen">
<!-- introLayer -->
<template x-if="!firstDataGet" x-cloak>
<div id="introLayer" class="flex flex-col h-full w-full z-50 justify-center items-center bg-slate-800">
<span class="text-3xl text-gray-200">Welcome layer</span>
</div>
</template>
<!-- adsLayer -->
<div id="adsLayer" x-cloak x-show="adsLayerVisible" class="fixed h-full w-full z-40 flex justify-center items-center bg-blue-950">
<template x-for="(singleAd, id) in ads" :key="id">
<img class="object-contain" x-cloak x-show="currentAd == singleAd.id" :src="appSettings.adsPath + singleAd.media"/>
</template>
</div>
<!-- infoLayer -->
<div class="h-full w-full">
<table id="infoLayer" class="w-full table-fixed border-collapse">
<thead>
<tr class="bg-white text-black">
<th class="font-diatype lg:text-xl text-sm py-2 px-1 sm:px-4 md:px-6 md:py-8 lg:px-8 lg:py-10 border-b-2 border-lime-600">Abfahrt</th>
<th class="font-diatype lg:text-xl text-sm py-2 px-1 sm:px-4 md:px-6 md:py-8 lg:px-8 lg:py-10 border-b-2 border-lime-600">Gleis</th>
<th class="font-diatype lg:text-xl text-sm py-2 px-1 sm:py-8 lg:px-8 lg:py-10 border-b-2 border-lime-600">Linie</th>
<th class="font-diatype lg:text-xl text-sm py-2 px-1 sm:py-8 lg:px-8 lg:py-10 border-b-2 border-lime-600">Richtung</th>
<th class="font-diatype lg:text-xl text-sm py-2 px-2 sm:px-4 md:px-6 md:py-8 lg:px-8 lg:py-10 border-b-2 border-lime-600">Hinweis</th>
<th class="font-diatype lg:text-xl text-sm py-2 px-1 sm:px-4 md:px-6 md:py-8 lg:py-10 relative">
<div class="absolute inset-0 right-0 flex lg:top-[109px] md:top-[80px] top-10 items-center justify-end sm:justify-between">
<div class="hidden lg:block w-96 border-t-2 border-lime-600"></div>
<img src="/img/vrrLogo.svg" alt="VRR Logo" class="h-8 w-8 sm:h-12 sm:w-12 md:h-32 md:w-24 lg:h-44 lg:w-32">
<div class="w-full border-t-2 border-lime-600 lg:hidden"></div>
<div class="hidden lg:block w-20 border-t-2 border-lime-600"></div>
</div>
</th>
</tr>
</thead>
<tbody>
<template x-for="(scheduleEntity, id) in scheduleData" :key="id">
<tr class="even:bg-white bg-gray-400 bg-opacity-10">
<td class="text-center font-diatype lg:text-xl text-sm py-4 px-2 sm:py-6 sm:px-4 md:py-8 md:px-6 lg:py-10 lg:px-8">
<template x-if="scheduleEntity.delay > 0">
<div>
<div x-text="scheduleEntity.estimatedString" class="font-bold text-red-600"></div>
<div class="text-red-600">
<span x-text="scheduleEntity.delay + ' Min. später'"></span>
</div>
</div>
</template>
<template x-if="scheduleEntity.delay === 0">
<div x-text="scheduleEntity.departureString"></div>
</template>
</td>
<td class="text-center font-diatype lg:text-xl text-sm py-4 px-2 sm:py-6 sm:px-4 md:py-8 md:px-6 lg:py-10 lg:px-8" x-text="scheduleEntity.platform"></td>
<td class="text-center font-diatype lg:text-xl text-sm py-4 px-2 sm:py-6 sm:px-4 md:py-8 md:px-6 lg:py-10 lg:px-8">
<div class="flex items-center justify-center">
<template x-if="scheduleEntity.transportIcon">
<img class="tramLogo mr-2" x-bind:src="'/img/' + scheduleEntity.transportIcon" style="height: 3vh;width: 3vh;">
</template>
<div class="text-blue-800 text-center font-diatype lg:text-xl text-sm" x-text="scheduleEntity.transportTitle"></div>
</div>
</td>
<td class="text-center font-diatype lg:text-xl text-sm py-4 px-2 sm:py-6 sm:px-4 md:py-8 md:px-6 lg:py-10 lg:px-8" x-text="scheduleEntity.destination"></td>
<td class="py-4 px-2 sm:py-6 sm:px-4 md:py-8 md:px-6 lg:py-10 lg:px-8">
<div class="flex items-center text-center justify-center gap-2">
<div class="font-bold font-diatype lg:text-xl text-sm" x-text="scheduleEntity.departureString"></div>
<template x-if="scheduleEntity.delay > 0">
<div class="text-red-600 font-diatype lg:text-xl text-sm">
<div x-text="scheduleEntity.delay + ' Min. später - Neue Abfahrt: ' + scheduleEntity.estimatedString"></div>
</div>
</template>
</div>
</td>
<td class="py-4 px-2 sm:py-6 sm:px-4 md:py-8 md:px-6 lg:py-10 lg:px-8"></td>
</tr>
</template>
<tr id="hasNoData" class="hidden">
<td colspan="5" class="text-center font-diatype ">
<div class="flex justify-between items-center border-t border-gray-300 py-4">
<span class="lg:text-xl sm:text-2xl md:text-3xl">17:45 Uhr</span>
<img src="/img/vrrLogo.svg" alt="VRR Logo" class="h-8 w-8 sm:h-12 sm:w-12 md:h-32 md:w-32 lg:h-44 lg:w-44">
</div>
<div class="text-center font-diatype text-lg sm:lg:text-xl md:text-2xl lg:text-3xl mt-4">
Sehr geehrte Fahrgäste, bitte beachten Sie den Aushangfahrplan sowie die Durchsage und Hinweise
am Bahnsteig.
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="statusBar"
class="h-12 bg-blue-100 text-xs font-thin fixed bottom-0 left-0 w-full z-[10000] flex flex-wrap justify-between items-center p-2">
<span class="text-center p-2">AlpineJS</span>
<span class="text-center p-2">
<button class="bg-slate-500 text-white p-1 border-1 rounded-sm" @click="loadAdsList()">Ads reboot</button>
</span>
<span class="text-center p-2">
Schedule Tick: <span x-text="scheduleTickNr"></span><br>
Ads Tick: <span x-text="adsTickNr"></span>
</span>
<span class="text-center p-2">
Loads In Progress: <br><span x-text="loadsInProgress"></span>
</span>
<span class="text-center p-2">
Ads (current ID / available nr / all):<br>
(<span x-text="currentAd"></span> / <span x-text="availableAds.length"></span> / <span
x-text="ads.length"></span>)
</span>
<span class="text-center p-2">
Ads Layer Visible: <br><span x-text="adsLayerVisible"></span>
</span>
<span class="text-center p-2">
Had fetch errors: <br><span x-text="hasErrors"></span>
</span>
<span class="text-center p-2">
<span x-text="heapSize"></span>
</span>
<span class="text-center p-2">
Last departures update:<br><span x-text="lastSuccessfulAPIFetch"></span>
</span>
</div>
</div>
</body>
</html>
Leave a Comment