55 lines
2.7 KiB
HTML
55 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Odjezdová tabule</title>
|
|
<link href="/static/style.css" rel="stylesheet">
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
</head>
|
|
<body>
|
|
<div class="container" id="app">
|
|
<div class="nav" :class="{'top': top == 0}">
|
|
<div class="inner" v-if="stop_id && stops[stop_id]">
|
|
<div>
|
|
<h3>
|
|
<span>{{ stops[stop_id].name }}</span>
|
|
<svg class="icon icon-dropdown" viewBox="0 0 24 24">
|
|
<path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
|
|
</svg>
|
|
</h3>
|
|
<select v-model="stop_id" @change="set">
|
|
<option v-for="stop, id in stops" :value="id">{{ stop.name }}</option>
|
|
</select>
|
|
</div>
|
|
<div :title="filter ? 'Zobrazit všechny' : 'Zobrazit pouze nejbližší'" class="clickable" @click="filter = !filter">
|
|
<svg class="icon" v-if="filter" viewBox="0 0 24 24">
|
|
<path d="M15,19.88C15.04,20.18 14.94,20.5 14.71,20.71C14.32,21.1 13.69,21.1 13.3,20.71L9.29,16.7C9.06,16.47 8.96,16.16 9,15.87V10.75L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L15,10.75V19.88M7.04,5L11,10.06V15.58L13,17.58V10.05L16.96,5H7.04Z" />
|
|
</svg>
|
|
<svg class="icon" v-else viewBox="0 0 24 24">
|
|
<path d="M2.39 1.73L1.11 3L9 10.89V15.87C8.96 16.16 9.06 16.47 9.29 16.7L13.3 20.71C13.69 21.1 14.32 21.1 14.71 20.71C14.94 20.5 15.04 20.18 15 19.88V16.89L20.84 22.73L22.11 21.46L15 14.35V14.34L13 12.35L11 10.34L4.15 3.5L2.39 1.73M6.21 3L8.2 5H16.96L13.11 9.91L15 11.8V10.75L19.79 4.62C20.13 4.19 20.05 3.56 19.62 3.22C19.43 3.08 19.22 3 19 3H6.21M11 12.89L13 14.89V17.58L11 15.58V12.89Z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="departure-grid">
|
|
<div class="header">spoj</div>
|
|
<div class="header">poslední zastávka</div>
|
|
<div class="header">zpoždění</div>
|
|
<div class="header">odjezd</div>
|
|
<template v-if="!filter" v-for="d in departures">
|
|
<div class="line" :class="'type'+d.type">{{ d.line }}</div>
|
|
<div class="last-stop">{{ d.last_stop }}</div>
|
|
<div class="delay">{{ d.delay == 0 ? '' : '+'+d.delay }}</div>
|
|
<div class="departure">{{ d.departure < 1 ? '<1' : Math.floor(d.departure) }}</div>
|
|
</template>
|
|
<template v-else v-for="d in filtered_departures">
|
|
<div class="line" :class="'type'+d.type">{{ d.line }}</div>
|
|
<div class="last-stop">{{ d.last_stop }}</div>
|
|
<div class="delay">{{ d.delay == 0 ? '' : '+'+d.delay }}</div>
|
|
<div class="departure">{{ d.departure < 1 ? '<1' : Math.floor(d.departure) }}</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<script src="/static/departure-list.js"></script>
|
|
</body>
|
|
</html> |