X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftournament%2FDetail.js;h=66b425e83740e4c0b81cdf10efa6cc2368016c04;hb=f446d5bcf3b87bd9443a060e27e9c0601c96fbb9;hp=912d2a26d58df7a0aedcdfd87a3249353bc1b949;hpb=c30ac282dde3d746d6a7762ee18c70b4416500b5;p=alttp.git

diff --git a/resources/js/components/tournament/Detail.js b/resources/js/components/tournament/Detail.js
index 912d2a2..66b425e 100644
--- a/resources/js/components/tournament/Detail.js
+++ b/resources/js/components/tournament/Detail.js
@@ -1,46 +1,115 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Button, Container } from 'react-bootstrap';
+import { Button, Col, Container, Row } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
-import Participants from '../participants/List';
+import ApplyButton from './ApplyButton';
+import Scoreboard from './Scoreboard';
+import ScoreChartButton from './ScoreChartButton';
+import SettingsButton from './SettingsButton';
+import ApplicationsButton from '../applications/Button';
 import Protocol from '../protocol/Protocol';
 import Rounds from '../rounds/List';
+import Box from '../users/Box';
 import {
+	isRunner,
 	mayAddRounds,
+	mayUpdateTournament,
 	mayViewProtocol,
 } from '../../helpers/permissions';
+import {
+	getTournamentAdmins,
+	getTournamentMonitors,
+	hasRunners,
+	hasTournamentAdmins,
+	hasTournamentMonitors,
+} from '../../helpers/Tournament';
 import { withUser } from '../../helpers/UserContext';
 import i18n from '../../i18n';
 
+const getClassName = (tournament, user) => {
+	const classNames = ['tournament'];
+	if (tournament.locked) {
+		classNames.push('is-locked');
+	} else {
+		classNames.push('is-active');
+	}
+	if (isRunner(user, tournament)) {
+		classNames.push('is-runner');
+	}
+	return classNames.join(' ');
+};
+
 const Detail = ({
 	addRound,
 	tournament,
 	user,
-}) => <Container>
-	<div className="d-flex align-items-center justify-content-between">
-		<h1>{tournament.title}</h1>
-		{mayViewProtocol(user, tournament) ?
-			<Protocol id={tournament.id} />
-		: null}
-	</div>
-	<div className="d-flex align-items-center justify-content-between">
-		<h2>{i18n.t('participants.heading')}</h2>
-	</div>
-	{tournament.participants ?
-		<Participants participants={tournament.participants} tournament={tournament} />
-	: null}
-	<div className="d-flex align-items-center justify-content-between">
-		<h2>{i18n.t('rounds.heading')}</h2>
-		{addRound && mayAddRounds(user, tournament) ?
-			<Button onClick={addRound}>
-				{i18n.t('rounds.new')}
-			</Button>
-		: null}
-	</div>
-	{tournament.rounds ?
-		<Rounds rounds={tournament.rounds} tournament={tournament} />
-	: null}
+}) => <Container className={getClassName(tournament, user)} fluid>
+	<Row>
+		<Col lg={8} xl={9}>
+			<div className="d-flex align-items-center justify-content-between">
+				<h1>{tournament.title}</h1>
+				<div className="button-bar">
+					<ApplicationsButton tournament={tournament} />
+					<ApplyButton tournament={tournament} />
+					{mayUpdateTournament(user, tournament) ?
+						<SettingsButton tournament={tournament} />
+					: null}
+					{mayViewProtocol(user, tournament) ?
+						<Protocol id={tournament.id} />
+					: null}
+				</div>
+			</div>
+		</Col>
+	</Row>
+	<Row>
+		<Col lg={{ order: 2, span: 4 }} xl={{ order: 2, span: 3 }}>
+			<div className="tournament-sidebar">
+				<div className="d-flex align-items-center justify-content-between">
+					<h2>{i18n.t('tournaments.scoreboard')}</h2>
+					{hasRunners(tournament) && tournament.rounds.length > 2 ?
+						<ScoreChartButton tournament={tournament} />
+					: null}
+				</div>
+				{hasRunners(tournament) ?
+					<Scoreboard tournament={tournament} />
+				: null}
+				{hasTournamentAdmins(tournament) ?
+					<>
+						<div className="d-flex align-items-center justify-content-between">
+							<h2>{i18n.t('tournaments.admins')}</h2>
+						</div>
+						{getTournamentAdmins(tournament).map(p =>
+							<p key={p.id}><Box user={p.user} /></p>
+						)}
+					</>
+				: null}
+				{hasTournamentMonitors(tournament) ?
+					<>
+						<div className="d-flex align-items-center justify-content-between">
+							<h2>{i18n.t('tournaments.monitors')}</h2>
+						</div>
+						{getTournamentMonitors(tournament).map(p =>
+							<p key={p.id}><Box user={p.user} /></p>
+						)}
+					</>
+				: null}
+			</div>
+		</Col>
+		<Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
+			<div className="d-flex align-items-center justify-content-between">
+				<h2>{i18n.t('rounds.heading')}</h2>
+				{addRound && mayAddRounds(user, tournament) ?
+					<Button onClick={addRound}>
+						{i18n.t('rounds.new')}
+					</Button>
+				: null}
+			</div>
+			{tournament.rounds ?
+				<Rounds rounds={tournament.rounds} tournament={tournament} />
+			: null}
+		</Col>
+	</Row>
 </Container>;
 
 Detail.propTypes = {