Bootstrap 5 time

This commit is contained in:
Alex Thomassen 2022-08-25 15:45:09 +02:00
parent a79745883d
commit c679463a46
3 changed files with 39 additions and 40 deletions

5
README.md Normal file
View File

@ -0,0 +1,5 @@
# TV-Center
The code powering [tv.cocks.no](https://tv.cocks.no/)
Most of it relies on parsing the Sonarr iCalendar feed.

View File

@ -175,6 +175,7 @@ async function loadSonarrCalendar(shouldScroll = false)
customButtons: { customButtons: {
toggleButton, toggleButton,
}, },
themeSystem: 'bootstrap5',
initialView: 'listWeek', initialView: 'listWeek',
initialDate: new Date(), initialDate: new Date(),
headerToolbar: { headerToolbar: {

View File

@ -7,16 +7,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.decicus.com/fontawesome/v5.15.4/css/all.min.css" <link rel="stylesheet" href="https://cdn.decicus.com/fontawesome/v5.15.4/css/all.min.css"
integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous"> integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.decicus.com/water.css/v2.1.1/dark.min.css" <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.2.0/superhero/bootstrap.min.css" integrity="sha512-pCTSMcZZ+tTaq3FXSWGhMmO/OZ+52FqEdhlExLz8PTBQKMyqxAdav13kofJWiyI5zeieBo8tZ++SMZ2ZgueRBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
integrity="sha384-cJBdsSYaB37lARFjqUmJVoGdRQaQndlSkVAOB0QSVMzFhBAQ6Aymcu3PIkS8CkWl" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" integrity="sha256-5veQuRbWaECuYxwap/IOE/DAwNxgm4ikX7nrgsqYp88=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" integrity="sha256-16PDMvytZTH9heHu9KBPjzrFTaoner60bnABykjNiM0=" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.11.3/main.min.css" integrity="sha256-dPWx9VoFn91TsfLKiK60fNYizBuynczRmMVDO/Yzluo=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.10.1/main.min.css" integrity="sha256-dPWx9VoFn91TsfLKiK60fNYizBuynczRmMVDO/Yzluo=" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/list@5.11.3/main.min.css" integrity="sha256-b1BoveasAh93I+XvngCpnzp5pVCQlXxGPdijHWDjDXc=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/list@5.10.1/main.min.css" integrity="sha256-b1BoveasAh93I+XvngCpnzp5pVCQlXxGPdijHWDjDXc=" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" integrity="sha256-8M+b2Hj+vy/2J5tZ9pYDHeuPD59KsaEZn1XXj3xVhjg=" crossorigin="anonymous">
<style type="text/css"> <style type="text/css">
body {
max-width: 85%;
}
:root { :root {
--fc-list-event-hover-bg-color: #458680; --fc-list-event-hover-bg-color: #458680;
} }
@ -32,48 +28,45 @@
.hidden { .hidden {
display: none; display: none;
} }
#sonarr-calendar {
margin-top: 1.5em;
}
</style> </style>
<title>Cactflix [Main] &mdash; Plex &mdash; TV Center</title> <title>Cactflix [Main] &mdash; Plex &mdash; TV Center</title>
</head> </head>
<body> <body>
<h1>Cactflix [Main] &mdash; Plex &mdash; TV Center</h1> <div class="container">
<h1 class="mt-4">Cactflix [Main] &mdash; Plex &mdash; TV Center</h1>
<h2>Upcoming TV show episodes &mdash; English, Norwegian &amp; Anime:</h2> <h2 class="mt-4">Upcoming TV show episodes &mdash; English, Norwegian &amp; Anime:</h2>
<table> <table class="table table-striped table-hover mt-4">
<tr> <tr>
<th>Icon</th> <th>Icon</th>
<th>Meaning</th> <th>Meaning</th>
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
<td>Already downloaded & imported. Plex will pick it up within a few minutes if it hasn't already.</td> <td>Already downloaded & imported. Plex will pick it up within a few minutes if it hasn't already.</td>
</tr> </tr>
<tr> <tr>
<td>🟠</td> <td>🟠</td>
<td>Episode has aired, waiting for available download.</td> <td>Episode has aired, waiting for available download.</td>
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
<td>Episode has <strong>NOT</strong> aired.</td> <td>Episode has <strong>NOT</strong> aired.</td>
</tr> </tr>
</table> </table>
<p>Calendar will refresh every minute.</p> <p class="mt-2">Calendar will refresh every minute.</p>
<div id="sonarr-calendar"> <div id="sonarr-calendar" class="mt-2">
<p id="status-message">Loading... Please wait 🙂</p> <p id="status-message">Loading... Please wait 🙂</p>
</div>
</div> </div>
</body> </body>
<script src="ical.min.js"></script> <script src="ical.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.js" integrity="sha256-nCXGH8kkPFozCBx4meHWhA5OCqXhhBzoBVpHfM/HmwM=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js" integrity="sha256-7PzqE1MyWa/IV5vZumk1CVO6OQbaJE4ns7vmxuUP/7g=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.10.1/main.global.min.js" integrity="sha256-WbQSQ0zYo3bZNQiA5R5YdIL/CGRzzM3wQVcyVtdZtFQ=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.11.3/main.global.min.js" integrity="sha256-7EaUCRgXBIPSX5/hjOkYT6ewAi1kh/HTlpOQP68grG8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/list@5.10.1/main.global.min.js" integrity="sha256-hv4JZxfujHAembALj9LHpTqw+bX2MDxtqksAOvRy9/c=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/list@5.11.3/main.global.min.js" integrity="sha256-6SiQAdsMt+ZQmUbJdQgEbV7zdYoejLaMdCoPY4+ZDMI=" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/icalendar@5.10.1/main.global.min.js" integrity="sha256-Cw5va3Z2DC0Os2wMB5sXOPHNDiJ7YzP9WpYy5/WV1aA=" crossorigin="anonymous"></script> -->
<script src="calendar.js"></script> <script src="calendar.js"></script>
</html> </html>