Skip to content

Commit

Permalink
Added saved filters and view tabs
Browse files Browse the repository at this point in the history
Deleted the race calendar, it was merged into the main event calendar
  • Loading branch information
Sp3EdeR committed Jul 7, 2024
1 parent 0b5f17a commit 5596ead
Show file tree
Hide file tree
Showing 6 changed files with 203 additions and 79 deletions.
112 changes: 112 additions & 0 deletions calendar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
/* Usage: Place the script into an empty div:
* <script src="calendar.js" id="calendar-script"></script>
* <script>
* calendars.init({ ... });
* </script>
* Where the init function takes:
* { 'calendar-name': {'url': 'url-fragment', 'clr': '#clrcode'}, ... }
*/

const pageStorage = new class {
constructor() {
this._namespace = location.pathname.replace(/^\/(.*?)\/?(?:index.html)?$/, '$1');
}
getItem(name) { return localStorage.getItem(this._namespace + name); }
setItem(name, value) { return localStorage.setItem(this._namespace + name, value); }
removeItem(name) { return localStorage.removeItem(this._namespace + name); }
};

class CalendarTabs {
constructor(container) {
this._container = container;
this._tabs = container.find('div');
this.each(tab => {
const id = tab.attr('id');
tab.click(() => this.select(id));
});

var selectedId = 'tab-controller-AGENDA';
if (pageStorage.getItem('tabId') && container.find('div#' + selectedId).length)
selectedId = pageStorage.getItem('tabId');
this.select(selectedId);
}
each(callback) {
this._tabs.each(function () { callback($(this)); });
return this;
}
select(id) {
if (this.selectedId == id)
return;
this.each(tab => {
if (tab.attr('id') == id)
tab.addClass('selected');
else
tab.removeClass('selected');
});
this.selectedId = id;
pageStorage.setItem('tabId', id);

if (this._onTabChanged)
this._onTabChanged(id.replace('tab-controller-', ''));
}
onTabChanged(onTabChanged) { this._onTabChanged = onTabChanged; }
get currentMode() { return this.selectedId.replace('tab-controller-', ''); }
}

const calendars = new class Calendars {
constructor() {
this._container = $('#calendar-script').parent();
this._container.append($(
'<iframe style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>' +
'<table cellpadding="0" cellspacing="0" class="controls-calendar-tabs"><tr>' +
'<td><div id="tab-controller-WEEK">Hét</div></td>' +
'<td><div id="tab-controller-MONTH">Hónap</div></td>' +
'<td><div id="tab-controller-AGENDA">Napló</div></td></tr></table>' +
'<p class="controls-calendar-switches"></p>'
));

this._calendarContainer = this._container.children('iframe').first();
this._switchesContainer = this._container.children('.controls-calendar-switches').first();
this._urlBase =
'https://calendar.google.com/calendar/u/0/embed?height=600&wkst=2&bgcolor=%23eef1f8' +
'&ctz=Europe%2FBudapest&showTz=0&showPrint=0&showDate=1&showTabs=0&showCalendars=0' +
'&showTitle=0';

this.tabs = new CalendarTabs(this._container.children('.controls-calendar-tabs').first());
this.tabs.onTabChanged(() => this.update());
}
init(data) {
this._switches = [];
for (const [name, props] of Object.entries(data)) {
const id = Calendars._normName(name);
var isEnabled = pageStorage.getItem(id) == null ?
props.on != false :
pageStorage.getItem(id) == 'true';

const ctrl = $('<div class="custom-control custom-switch mr-sm-2">' +
`<input type="checkbox" class="custom-control-input" id="${id}" value="${props.url}" ${isEnabled ? 'checked' : ''}>` +
`<label class="custom-control-label" for="${id}" style="color: ${props.clr}">${name}</label>` +
'</div>');
this._switches.push(ctrl.children('input').on('change', event => {
pageStorage.setItem(id, $(event.target).prop('checked'));
this.update();
}));
this._switchesContainer.append(ctrl);
}
if (this._switches.length <= 1)
this._switchesContainer.css('display', 'none');
this._switchesContainer.addClass(['form-check', 'form-check-inline']);
this.update();
}
update() {
var options = '&mode=' + this.tabs.currentMode;
options = this._switches.reduce(
(accumulator, ctrl) =>
ctrl.prop('checked') ? accumulator + ctrl.attr('value') : accumulator
, options);
this._calendarContainer.attr('src', this._urlBase + options);
}
static _normName(name) {
return name.toLowerCase().replaceAll(' ', '');
}
};
27 changes: 24 additions & 3 deletions celicaclub/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha256-+IZRbz1B6ee9mUx/ejmonK+ulIP5A5bLDd6v6NHqXnI=" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@2.1.1/dist/css/toggle-bootstrap.min.css" integrity="sha256-FrYhUW1FIy6GrbYaAdOOeWzysJaYHvXRTvC5JkpI2Io=" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@2.1.1/dist/css/toggle-bootstrap-dark.min.css" integrity="sha256-hWYw+cCWpNThkcILHcXs4XtjvGXBUCaPN0hG3q9S13o=" crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js" integrity="sha256-FaAOdYdEAZkWmbgMVjrb7kq4BJ46vaUUiDJ3t7O+oT8=" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

Expand All @@ -57,9 +58,29 @@ <h3 class="masthead-brand">Celica Club Eseménynaptár</h3>
</header>

<main role="main" class="inner cover">
<iframe src="https://calendar.google.com/calendar/u/0/embed?height=600&wkst=2&bgcolor=%23eef1f8&mode=AGENDA&ctz=Europe/Budapest&showTz=0&showPrint=0&showDate=1&showTabs=1&showTitle=0&src=dG95b3RhZXNlbWVueWVrQGdtYWlsLmNvbQ&src=bGdqc3FyNjByM2Zuc2p1YzZtdjRvZ2QyaHNAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=6ed4253a01425b241902ebb68e9fdada28e89336654eed1bd54ccd8139ce1276%40group.calendar.google.com&color=%23039BE5&color=%23D50000&color=%23616161" style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
<p>Nem kell mindig idelátogatnod, vedd fel a Google Naptáradba, hogy mindig naprakész lehess! (Ha problémát észlelsz, akkor azért érdemes lehet frissíteni.)</p>
<p>Minden esemény leírásában megtalálható a Facebook eseménye.</p>
<div class="calendar-container">
<script src="../calendar.js" id="calendar-script"></script>
<script>
calendars.init({
'Celica Club Események': {
'url': '&src=lgjsqr60r3fnsjuc6mv4ogd2hs@group.calendar.google.com&color=%23D50000',
'clr': '#711616'
},
'Általános Események': {
'url': '&src=6ed4253a01425b241902ebb68e9fdada28e89336654eed1bd54ccd8139ce1276%40group.calendar.google.com&color=%23616161',
'clr': '#616161',
'on': false
},
'Versenynaptárak': {
'url': '&src=e2c1f0f733fdf9809b81894ca9bda56e09fea2fee9385d715b7fdeb60fc029ae@group.calendar.google.com&src=29b1b2c34ddb5b701b336076af1feed962c8fd42c21cc6403e347d40829bfb0b@group.calendar.google.com&color=%23B39DDB&color=%237986CB',
'clr': '#5229A3',
'on': false
}
});
</script>
</div>
<p>Nem kell mindig idelátogatnod, vedd fel a Google Naptáradba, hogy mindig naprakész lehess!</p>
<p>A Facebook esemény linket megtalálod az események leírásában.</p>
</main>

<footer class="mastfoot mt-auto">
Expand Down
17 changes: 16 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha256-+IZRbz1B6ee9mUx/ejmonK+ulIP5A5bLDd6v6NHqXnI=" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@2.1.1/dist/css/toggle-bootstrap.min.css" integrity="sha256-FrYhUW1FIy6GrbYaAdOOeWzysJaYHvXRTvC5JkpI2Io=" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@2.1.1/dist/css/toggle-bootstrap-dark.min.css" integrity="sha256-hWYw+cCWpNThkcILHcXs4XtjvGXBUCaPN0hG3q9S13o=" crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js" integrity="sha256-FaAOdYdEAZkWmbgMVjrb7kq4BJ46vaUUiDJ3t7O+oT8=" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

Expand All @@ -57,7 +58,21 @@ <h3 class="masthead-brand">Autós Események Naptára</h3>
</header>

<main role="main" class="inner cover">
<iframe src="https://calendar.google.com/calendar/u/0/embed?height=600&wkst=2&bgcolor=%23eef1f8&mode=AGENDA&ctz=Europe/Budapest&showTz=0&showPrint=0&showDate=1&showTabs=1&showCalendars=0&showTitle=0&src=6ed4253a01425b241902ebb68e9fdada28e89336654eed1bd54ccd8139ce1276%40group.calendar.google.com&color=%23616161" style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
<div class="calendar-container">
<script src="calendar.js" id="calendar-script"></script>
<script>
calendars.init({
'Általános Események': {
'url': '&src=6ed4253a01425b241902ebb68e9fdada28e89336654eed1bd54ccd8139ce1276%40group.calendar.google.com&color=%23616161',
'clr': '#616161'
},
'Versenynaptárak': {
'url': '&src=e2c1f0f733fdf9809b81894ca9bda56e09fea2fee9385d715b7fdeb60fc029ae@group.calendar.google.com&src=29b1b2c34ddb5b701b336076af1feed962c8fd42c21cc6403e347d40829bfb0b@group.calendar.google.com&color=%23B39DDB&color=%237986CB',
'clr': '#5229A3'
}
});
</script>
</div>
<p>Nem kell mindig idelátogatnod, vedd fel a Google Naptáradba, hogy mindig naprakész lehess!</p>
<p>A Facebook esemény linket megtalálod az események leírásában.</p>
</main>
Expand Down
43 changes: 42 additions & 1 deletion style.css
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ iframe {
border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
.nav-masthead .nav-link+.nav-link {
margin-left: 1rem;
}

Expand All @@ -70,6 +70,7 @@ iframe {
.masthead-brand {
float: left;
}

.nav-masthead {
float: right;
}
Expand All @@ -85,6 +86,7 @@ iframe {
.cover {
padding: 0 1.5rem;
}

.cover .btn-lg {
padding: .75rem 1.25rem;
font-weight: 700;
Expand All @@ -95,3 +97,42 @@ iframe {
color: rgba(255, 255, 255, .5);
font-size: small;
}


/* Google calendar tab style for generated tabs */
.calendar-container {
position: relative;
}

.controls-calendar-tabs {
padding: 0;
position: absolute;
right: 2px;
top: -8px;
font-family: Arial, sans-serif;
font-size: small;
line-height: 1.0;
text-shadow: none;
white-space: nowrap;
}

.controls-calendar-tabs td {
padding-left: 4px;
}

.controls-calendar-tabs td div {
background-color: #e8eef7;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #20c;
cursor: pointer;
padding: 7px 5px 6px;
white-space: nowrap;
}

.controls-calendar-tabs td div.selected {
background-color: #e3e9ff;
color: #000;
cursor: default;
font-weight: bold;
}
Binary file removed versenynaptar/background.jpg
Binary file not shown.
83 changes: 9 additions & 74 deletions versenynaptar/index.html
Original file line number Diff line number Diff line change
@@ -1,79 +1,14 @@
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Autós Versenynaptár" />
<meta name="author" content="HU" />
<meta name="keywords" content="Magyarország, Magyar, autó, motor, sportautó, sportmotor, motorsport" />
<!-- Disable resizing the viewport for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<!-- Shared link preview card resources -->
<meta property="og:title" content="Autós Versenynaptár" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://sp3eder.github.io/autosesemenyek/versenynaptar" />
<meta property="og:description" content="Profi és amatőr autóversenyek gyűjteménye" />
<meta property="og:image" content="https://sp3eder.github.io/autosesemenyek/banner.jpg" />
<meta property="og:image:secure_url" content="https://sp3eder.github.io/autosesemenyek/banner.jpg" />
<meta property="og:image:alt" content="autós események" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<title>Autós Versenynaptár</title>

<link rel="icon" href="../favicon.ico" />
<link rel="icon" href="../favicon.png" sizes="32x32" type="image/png" />
<link rel="icon" href="../favicon-sm.png" sizes="16x16" type="image/png" />

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X1PD6MH5YC"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-X1PD6MH5YC');
</script>

<link href="../style.css" rel="stylesheet">
<style>
body {
background-image: url('background.jpg');
}
</style>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha256-+IZRbz1B6ee9mUx/ejmonK+ulIP5A5bLDd6v6NHqXnI=" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@2.1.1/dist/css/toggle-bootstrap.min.css" integrity="sha256-FrYhUW1FIy6GrbYaAdOOeWzysJaYHvXRTvC5JkpI2Io=" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@2.1.1/dist/css/toggle-bootstrap-dark.min.css" integrity="sha256-hWYw+cCWpNThkcILHcXs4XtjvGXBUCaPN0hG3q9S13o=" crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js" integrity="sha256-FaAOdYdEAZkWmbgMVjrb7kq4BJ46vaUUiDJ3t7O+oT8=" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="utf-8">
<title>Átirányítás: https://sp3eder.github.io/autosesemenyek</title>
<meta http-equiv="refresh" content="0; url=../">
<link rel="canonical" href="../">
</head>

<body class="text-center">
<div class="cover-container d-flex p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">Magyarországi Versenynaptár</h3>
Profi és amatőr autóversenyek
</div>
<hr>
</header>

<main role="main" class="inner cover">
<iframe src="https://calendar.google.com/calendar/u/0/embed?height=600&wkst=2&bgcolor=%23eef1f8&mode=AGENDA&ctz=Europe/Budapest&showTz=0&showPrint=0&showDate=1&showTabs=1&showTitle=0&src=29b1b2c34ddb5b701b336076af1feed962c8fd42c21cc6403e347d40829bfb0b@group.calendar.google.com&src=e2c1f0f733fdf9809b81894ca9bda56e09fea2fee9385d715b7fdeb60fc029ae@group.calendar.google.com&color=%23D500A3&color=%23B39DDB" style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
<p>Nem kell mindig idelátogatnod, vedd fel a Google Naptáradba, hogy mindig naprakész lehess! (Ha problémát észlelsz, akkor azért érdemes lehet frissíteni.)</p>
<p>Minden esemény leírásában megtalálható a Facebook eseménye.</p>
</main>

<footer class="mastfoot mt-auto">
<hr>
<div class="inner">
<p><a href="https://m.me/321270884411295">Írj hiányzó eseményről, lépj kapcsolatba</a></p>
<p>Ajánlott: <a href="https://sp3eder.github.io/huroutes/" target="_blank">huroutes - Magyar utak vezetésre</a></p>
</div>
</footer>
</div>
<body>
<h1>Ez az oldal már nem itt van.</h1>
<p>Automatikusan átirányítunk az oldal új helyére. Ha semmi sem történik, kérlek kövesd <a href="https://sp3eder.github.io/autosesemenyek/">ezt a linket</a>.</p>
<script>location.replace("../");</script>
</body>
</html>
</html>

0 comments on commit 5596ead

Please sign in to comment.