From 0a2bb2069cee683d525596dfe0141cac60f0f977 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 9 Aug 2023 12:14:02 +0200
Subject: [PATCH] event details
---
app/Http/Controllers/EventController.php | 1 +
app/Models/Event.php | 4 +
.../2023_08_06_135347_event_description.php | 33 ++++
resources/js/components/app/Routes.js | 84 ++++++++++
resources/js/components/app/index.js | 72 +--------
resources/js/components/episodes/Item.js | 6 +-
resources/js/components/events/Detail.js | 46 ++++++
resources/js/components/pages/Event.js | 148 ++++++++++++++++++
resources/js/i18n/de.js | 3 +
resources/js/i18n/en.js | 3 +
resources/sass/_variables.scss | 2 +
resources/sass/episodes.scss | 8 +
12 files changed, 340 insertions(+), 70 deletions(-)
create mode 100644 database/migrations/2023_08_06_135347_event_description.php
create mode 100644 resources/js/components/app/Routes.js
create mode 100644 resources/js/components/events/Detail.js
create mode 100644 resources/js/components/pages/Event.js
diff --git a/app/Http/Controllers/EventController.php b/app/Http/Controllers/EventController.php
index bfe9efd..a0dce45 100644
--- a/app/Http/Controllers/EventController.php
+++ b/app/Http/Controllers/EventController.php
@@ -32,6 +32,7 @@ class EventController extends Controller
public function single(Request $request, Event $event) {
$this->authorize('view', $event);
+ $event->load('description');
return $event->toJson();
}
diff --git a/app/Models/Event.php b/app/Models/Event.php
index b566dbb..331a384 100644
--- a/app/Models/Event.php
+++ b/app/Models/Event.php
@@ -10,6 +10,10 @@ class Event extends Model
use HasFactory;
+ public function description() {
+ return $this->belongsTo(Technique::class);
+ }
+
public function episodes() {
return $this->hasMany(Episode::class);
}
diff --git a/database/migrations/2023_08_06_135347_event_description.php b/database/migrations/2023_08_06_135347_event_description.php
new file mode 100644
index 0000000..27e30ce
--- /dev/null
+++ b/database/migrations/2023_08_06_135347_event_description.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+ /**
+ * Run the migrations.
+ *
+ * @return void
+ */
+ public function up()
+ {
+ Schema::table('events', function(Blueprint $table) {
+ $table->foreignId('description_id')->nullable()->default(null)->references('id')->on('techniques')->constrained();
+ });
+ }
+
+ /**
+ * Reverse the migrations.
+ *
+ * @return void
+ */
+ public function down()
+ {
+ Schema::table('events', function(Blueprint $table) {
+ $table->dropForeign(['description_id']);
+ $table->dropColumn('description_id');
+ });
+ }
+};
diff --git a/resources/js/components/app/Routes.js b/resources/js/components/app/Routes.js
new file mode 100644
index 0000000..396b2a7
--- /dev/null
+++ b/resources/js/components/app/Routes.js
@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+
+import FullLayout from './FullLayout';
+import AlttpSeed from '../pages/AlttpSeed';
+import DoorsTracker from '../pages/DoorsTracker';
+import Event from '../pages/Event';
+import Front from '../pages/Front';
+import Map from '../pages/Map';
+import Schedule from '../pages/Schedule';
+import Technique from '../pages/Technique';
+import Techniques from '../pages/Techniques';
+import Tournament from '../pages/Tournament';
+import User from '../pages/User';
+
+const AppRoutes = ({ doLogout }) => <Routes>
+ <Route element={<FullLayout doLogout={doLogout} />}>
+ <Route
+ path="dungeons"
+ element={<Techniques namespace="dungeons" type="dungeon" />}
+ />
+ <Route
+ path="dungeons/:name"
+ element={<Technique namespace="dungeons" type="dungeon" />}
+ />
+ <Route
+ path="events/:name"
+ element={<Event />}
+ />
+ <Route path="h/:hash" element={<AlttpSeed />} />
+ <Route
+ path="locations"
+ element={<Techniques namespace="locations" type="location" />}
+ />
+ <Route
+ path="locations/:name"
+ element={<Technique namespace="locations" type="location" />}
+ />
+ <Route path="map">
+ <Route index element={<Navigate replace to="lw" />} />
+ <Route path=":activeMap" element={<Map />} />
+ </Route>
+ <Route
+ path="modes"
+ element={<Techniques namespace="modes" type="mode" />}
+ />
+ <Route
+ path="modes/:name"
+ element={<Technique namespace="modes" type="mode" />}
+ />
+ <Route
+ path="rulesets"
+ element={<Techniques namespace="rulesets" type="ruleset" />}
+ />
+ <Route
+ path="rulesets/:name"
+ element={<Technique namespace="rulesets" type="ruleset" />}
+ />
+ <Route path="schedule" element={<Schedule />} />
+ <Route
+ path="tech"
+ element={<Techniques namespace="techniques" type="tech" />}
+ />
+ <Route
+ path="tech/:name"
+ element={<Technique namespace="techniques" type="tech" />}
+ />
+ <Route path="tournaments/:id" element={<Tournament />} />
+ <Route path="users/:id" element={<User />} />
+ <Route path="/" element={<Front />} />
+ <Route path="*" element={<Navigate to="/" />} />
+ </Route>
+ <Route
+ path="doors-tracker"
+ element={<DoorsTracker />}
+ />
+</Routes>;
+
+AppRoutes.propTypes = {
+ doLogout: PropTypes.func,
+};
+
+export default AppRoutes;
diff --git a/resources/js/components/app/index.js b/resources/js/components/app/index.js
index e7298d7..4f37e9d 100644
--- a/resources/js/components/app/index.js
+++ b/resources/js/components/app/index.js
@@ -2,18 +2,9 @@ import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
-import FullLayout from './FullLayout';
-import AlttpSeed from '../pages/AlttpSeed';
-import DoorsTracker from '../pages/DoorsTracker';
-import Front from '../pages/Front';
-import Map from '../pages/Map';
-import Schedule from '../pages/Schedule';
-import Technique from '../pages/Technique';
-import Techniques from '../pages/Techniques';
-import Tournament from '../pages/Tournament';
-import User from '../pages/User';
+import Routes from './Routes';
import AlttpBaseRomProvider from '../../helpers/AlttpBaseRomContext';
import UserContext from '../../helpers/UserContext';
import i18n from '../../i18n';
@@ -68,64 +59,7 @@ const App = () => {
<title>{t('general.appName')}</title>
<meta name="description" content={t('general.appDescription')} />
</Helmet>
- <Routes>
- <Route element={<FullLayout doLogout={doLogout} />}>
- <Route
- path="dungeons"
- element={<Techniques namespace="dungeons" type="dungeon" />}
- />
- <Route
- path="dungeons/:name"
- element={<Technique namespace="dungeons" type="dungeon" />}
- />
- <Route path="h/:hash" element={<AlttpSeed />} />
- <Route
- path="locations"
- element={<Techniques namespace="locations" type="location" />}
- />
- <Route
- path="locations/:name"
- element={<Technique namespace="locations" type="location" />}
- />
- <Route path="map">
- <Route index element={<Navigate replace to="lw" />} />
- <Route path=":activeMap" element={<Map />} />
- </Route>
- <Route
- path="modes"
- element={<Techniques namespace="modes" type="mode" />}
- />
- <Route
- path="modes/:name"
- element={<Technique namespace="modes" type="mode" />}
- />
- <Route
- path="rulesets"
- element={<Techniques namespace="rulesets" type="ruleset" />}
- />
- <Route
- path="rulesets/:name"
- element={<Technique namespace="rulesets" type="ruleset" />}
- />
- <Route path="schedule" element={<Schedule />} />
- <Route
- path="tech"
- element={<Techniques namespace="techniques" type="tech" />}
- />
- <Route
- path="tech/:name"
- element={<Technique namespace="techniques" type="tech" />}
- />
- <Route path="tournaments/:id" element={<Tournament />} />
- <Route path="users/:id" element={<User />} />
- <Route path="/" element={<Front />} />
- <Route path="*" element={<Navigate to="/" />} />
- </Route>
- <Route
- path="doors-tracker"
- element={<DoorsTracker />}
- />
- </Routes>
+ <Routes doLogout={doLogout} />
</UserContext.Provider>
</AlttpBaseRomProvider>
</BrowserRouter>;
diff --git a/resources/js/components/episodes/Item.js b/resources/js/components/episodes/Item.js
index 9acb95d..d7c4bab 100644
--- a/resources/js/components/episodes/Item.js
+++ b/resources/js/components/episodes/Item.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import { Button } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
import Channels from './Channels';
import Crew from './Crew';
@@ -102,7 +103,9 @@ const Item = ({ episode, onAddRestream, onApply, onEditRestream, user }) => {
: null}
{episode.event ?
<div className="episode-event mt-auto">
- {episode.event.title}
+ <Link className="event-link" to={`/events/${episode.event.name}`}>
+ {episode.event.title}
+ </Link>
</div>
: null}
</div>
@@ -118,6 +121,7 @@ Item.propTypes = {
})),
event: PropTypes.shape({
corner: PropTypes.string,
+ name: PropTypes.string,
title: PropTypes.string,
}),
players: PropTypes.arrayOf(PropTypes.shape({
diff --git a/resources/js/components/events/Detail.js b/resources/js/components/events/Detail.js
new file mode 100644
index 0000000..3626fbd
--- /dev/null
+++ b/resources/js/components/events/Detail.js
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import Icon from '../common/Icon';
+import RawHTML from '../common/RawHTML';
+import { getTranslation } from '../../helpers/Technique';
+import i18n from '../../i18n';
+
+const Detail = ({ actions, event }) => {
+ const { t } = useTranslation();
+
+ return <>
+ <div className="d-flex align-items-center justify-content-between">
+ <h1>{event.title}</h1>
+ {event.description && actions.editContent ?
+ <Button
+ className="ms-3"
+ onClick={() => actions.editContent(event.description)}
+ size="sm"
+ title={t('button.edit')}
+ variant="outline-secondary"
+ >
+ <Icon.EDIT title="" />
+ </Button>
+ : null}
+ </div>
+ {event.description ?
+ <RawHTML html={getTranslation(event.description, 'description', i18n.language)} />
+ : null}
+ </>;
+};
+
+Detail.propTypes = {
+ actions: PropTypes.shape({
+ editContent: PropTypes.func,
+ }),
+ event: PropTypes.shape({
+ description: PropTypes.shape({
+ }),
+ title: PropTypes.string,
+ }),
+};
+
+export default Detail;
diff --git a/resources/js/components/pages/Event.js b/resources/js/components/pages/Event.js
new file mode 100644
index 0000000..6c41c70
--- /dev/null
+++ b/resources/js/components/pages/Event.js
@@ -0,0 +1,148 @@
+import axios from 'axios';
+import moment from 'moment';
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import { Helmet } from 'react-helmet';
+import { withTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import toastr from 'toastr';
+
+import NotFound from './NotFound';
+import CanonicalLinks from '../common/CanonicalLinks';
+import ErrorBoundary from '../common/ErrorBoundary';
+import ErrorMessage from '../common/ErrorMessage';
+import Loading from '../common/Loading';
+import EpisodeList from '../episodes/List';
+import Detail from '../events/Detail';
+import Dialog from '../techniques/Dialog';
+import {
+ mayEditContent,
+} from '../../helpers/permissions';
+import { useUser } from '../../helpers/UserContext';
+import i18n from '../../i18n';
+
+const Event = () => {
+ const params = useParams();
+ const { name } = params;
+ const user = useUser();
+
+ const [error, setError] = React.useState(null);
+ const [loading, setLoading] = React.useState(true);
+ const [event, setEvent] = React.useState(null);
+
+ const [editContent, setEditContent] = React.useState(null);
+ const [episodes, setEpisodes] = React.useState([]);
+ const [showContentDialog, setShowContentDialog] = React.useState(false);
+
+ const actions = React.useMemo(() => ({
+ editContent: mayEditContent(user) ? content => {
+ setEditContent(content);
+ setShowContentDialog(true);
+ } : null,
+ }), [user]);
+
+ const fetchEpisodes = React.useCallback((controller, event) => {
+ if (!event) {
+ setEpisodes([]);
+ return;
+ }
+ axios.get(`/api/episodes`, {
+ signal: controller.signal,
+ params: {
+ after: moment().subtract(3, 'hours').toISOString(),
+ before: moment().add(14, 'days').toISOString(),
+ event: [event.id],
+ },
+ }).then(response => {
+ setEpisodes(response.data || []);
+ }).catch(e => {
+ if (!axios.isCancel(e)) {
+ console.error(e);
+ }
+ });
+ }, []);
+
+ const saveContent = React.useCallback(async values => {
+ try {
+ const response = await axios.put(`/api/content/${values.id}`, {
+ parent_id: event.description_id,
+ ...values,
+ });
+ toastr.success(i18n.t('content.saveSuccess'));
+ setEvent(event => ({
+ ...event,
+ description: response.data,
+ }));
+ setShowContentDialog(false);
+ } catch (e) {
+ toastr.error(i18n.t('content.saveError'));
+ }
+ }, [event && event.description_id]);
+
+ React.useEffect(() => {
+ const ctrl = new AbortController();
+ setLoading(true);
+ axios
+ .get(`/api/events/${name}`, { signal: ctrl.signal })
+ .then(response => {
+ setError(null);
+ setLoading(false);
+ setEvent(response.data);
+ })
+ .catch(error => {
+ setError(error);
+ setLoading(false);
+ setEvent(null);
+ });
+ return () => {
+ ctrl.abort();
+ };
+ }, [name]);
+
+ React.useEffect(() => {
+ const controller = new AbortController();
+ fetchEpisodes(controller, event);
+ const timer = setInterval(() => {
+ fetchEpisodes(controller, event);
+ }, 1.5 * 60 * 1000);
+ return () => {
+ controller.abort();
+ clearInterval(timer);
+ };
+ }, [event, fetchEpisodes]);
+
+ if (loading) {
+ return <Loading />;
+ }
+
+ if (error) {
+ return <ErrorMessage error={error} />;
+ }
+
+ if (!event) {
+ return <NotFound />;
+ }
+
+ return <ErrorBoundary>
+ <Helmet>
+ <title>{event.title}</title>
+ </Helmet>
+ <CanonicalLinks base={`/event/${event.name}`} />
+ <Container>
+ <Detail actions={actions} event={event} />
+ {episodes.length ? <>
+ <h2>{i18n.t('events.upcomingEpisodes')}</h2>
+ <EpisodeList episodes={episodes} />
+ </> : null}
+ </Container>
+ <Dialog
+ content={editContent}
+ language={i18n.language}
+ onHide={() => { setShowContentDialog(false); }}
+ onSubmit={saveContent}
+ show={showContentDialog}
+ />
+ </ErrorBoundary>;
+};
+
+export default withTranslation()(Event);
diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index fd8bfed..28848e6 100644
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -140,6 +140,9 @@ export default {
heading: 'Serverfehler',
},
},
+ events: {
+ upcomingEpisodes: 'Anstehende Rennen',
+ },
footer: {
alttpde: 'Deutscher ALttP Discord',
alttpwiki: 'ALttP Speedrunning Wiki',
diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index 179d684..4f4038a 100644
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -140,6 +140,9 @@ export default {
heading: 'Server error',
},
},
+ events: {
+ upcomingEpisodes: 'Upcoming races',
+ },
footer: {
alttpde: 'German ALttP Discord',
alttpwiki: 'ALttP Speedrunning Wiki',
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index f546d4f..3c0d0e7 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -7,6 +7,7 @@ $line-height-base: 1.6;
// Colors
$bronze: #ad8a56;
+$challonge: #ff7324;
$discord: #5865f2;
$gold: #c9b037;
$silver: #b4b4b4;
@@ -15,6 +16,7 @@ $youtube: #ff0000;
// Custom variant
$custom-colors: (
+ "challonge": $challonge,
"discord": $discord,
"twitch": $twitch,
"youtube": $youtube
diff --git a/resources/sass/episodes.scss b/resources/sass/episodes.scss
index d4248cb..45582a0 100644
--- a/resources/sass/episodes.scss
+++ b/resources/sass/episodes.scss
@@ -36,6 +36,14 @@
grid-template-columns: 1fr 1fr;
}
+ .event-link {
+ color: inherit;
+ text-decoration: none;
+ &:hover {
+ color: $link-color;
+ text-decoration: underline;
+ }
+ }
.player-link {
border: none;
--
2.39.5