From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 26 Nov 2025 11:02:52 +0000 (+0100)
Subject: extract result verification interface
X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;h=02f4453ef9ffa5897e3608003438ec3be5d23a2a;p=alttp.git

extract result verification interface
---

diff --git a/resources/js/components/common/Icon.jsx b/resources/js/components/common/Icon.jsx
index 5ffd927..c6e0cfa 100644
--- a/resources/js/components/common/Icon.jsx
+++ b/resources/js/components/common/Icon.jsx
@@ -107,9 +107,10 @@ Icon.TWITCH = makePreset('TwitchIcon', ['fab', 'twitch']);
 Icon.UNKNOWN = makePreset('UnknownIcon', 'square-question');
 Icon.UNLOCKED = makePreset('UnlockedIcon', 'lock-open');
 Icon.UPLOAD = makePreset('UploadIcon', 'upload');
+Icon.VERIFIED = makePreset('VerifiedIcon', 'circle-check');
 Icon.VIDEO = makePreset('VideoIcon', 'video');
-Icon.WARNING = makePreset('WarningIcon', 'triangle-exclamation');
 Icon.VOLUME = makePreset('VolumeIcon', 'volume-high');
+Icon.WARNING = makePreset('WarningIcon', 'triangle-exclamation');
 Icon.YOUTUBE = makePreset('YoutubeIcon', ['fab', 'youtube']);
 
 export default Icon;
diff --git a/resources/js/components/protocol/Item.jsx b/resources/js/components/protocol/Item.jsx
index 12d247f..b7d6052 100644
--- a/resources/js/components/protocol/Item.jsx
+++ b/resources/js/components/protocol/Item.jsx
@@ -137,10 +137,15 @@ const getEntryIcon = entry => {
 	switch (entry.type) {
 		case 'result.report':
 			return <Icon.RESULT />;
+		case 'result.verify':
+			return <Icon.VERIFIED />;
 		case 'round.create':
 			return <Icon.ADD />;
 		case 'round.delete':
 			return <Icon.REMOVE />;
+		case 'round.edit':
+		case 'round.seed':
+			return <Icon.EDIT />;
 		case 'round.getseed':
 			return <Icon.DOWNLOAD />;
 		case 'round.lock':
diff --git a/resources/js/components/results/DetailDialog.jsx b/resources/js/components/results/DetailDialog.jsx
index f3b1c99..17141fb 100644
--- a/resources/js/components/results/DetailDialog.jsx
+++ b/resources/js/components/results/DetailDialog.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
-import Icon from '../common/Icon';
+import Verification from './Verification';
 import Box from '../users/Box';
 import { getTime } from '../../helpers/Result';
 import { formatNumberAlways } from '../../helpers/Round';
@@ -22,8 +22,6 @@ const DetailDialog = ({
 	tournament,
 	user,
 }) => {
-	const [verifying, setVerifying] = React.useState(false);
-
 	const { t } = useTranslation();
 	const { user: authUser } = useUser();
 
@@ -40,16 +38,6 @@ const DetailDialog = ({
 		[authUser, result, round, tournament],
 	);
 
-	const handleVerifyClick = React.useCallback(async () => {
-		setVerifying(true);
-		try {
-			await actions.verifyResult(result);
-		} catch (e) {
-			console.error(e);
-		}
-		setVerifying(false);
-	}, [actions, result]);
-
 	return <Modal className="result-dialog" onHide={onHide} show={show}>
 		<Modal.Header closeButton>
 			<Modal.Title>
@@ -94,19 +82,6 @@ const DetailDialog = ({
 						</div>
 					</Form.Group>
 				: null}
-				{mayVerify && actions?.verifyResult ? (
-					<Form.Group as={Col} sm={12}>
-						<Form.Label>{t('results.verification')}</Form.Label>
-						<div>
-							<Button disabled={verifying} onClick={handleVerifyClick}>
-								{verifying ?
-									<Icon.LOADING className="me-2" />
-								: null}
-								{t('results.verifyButton')}
-							</Button>
-						</div>
-					</Form.Group>
-				) : null}
 				{maySee && result && result.comment ?
 					<Form.Group as={Col} sm={12}>
 						<Form.Label>{t('results.comment')}</Form.Label>
@@ -115,6 +90,11 @@ const DetailDialog = ({
 				: null}
 			</Row>
 		</Modal.Body>
+		{result?.verified_at || (mayVerify && actions?.verifyResult) ? (
+			<Modal.Body className="verification">
+				<Verification actions={actions} result={result} round={round} tournament={tournament} />
+			</Modal.Body>
+		) : null}
 		<Modal.Footer>
 			<Button onClick={onHide} variant="secondary">
 				{t('button.close')}
diff --git a/resources/js/components/results/Verification.jsx b/resources/js/components/results/Verification.jsx
new file mode 100644
index 0000000..281c979
--- /dev/null
+++ b/resources/js/components/results/Verification.jsx
@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { Trans, useTranslation } from 'react-i18next';
+
+import Icon from '../common/Icon';
+import Box from '../users/Box';
+import { mayVerifyResult } from '../../helpers/permissions';
+import { useUser } from '../../hooks/user';
+
+const Verification = ({ actions, result, round, tournament }) => {
+	const [verifying, setVerifying] = React.useState(false);
+
+	const { t } = useTranslation();
+	const { user } = useUser();
+
+	const mayVerify = React.useMemo(
+		() => mayVerifyResult(user, tournament, round, result),
+		[user, result, round, tournament],
+	);
+
+	const handleVerifyClick = React.useCallback(async () => {
+		setVerifying(true);
+		try {
+			await actions.verifyResult(result);
+		} catch (e) {
+			console.error(e);
+		}
+		setVerifying(false);
+	}, [actions, result]);
+
+	const date = result?.verified_at ? new Date(result.verified_at) : null;
+
+	if (result?.verified_at) {
+		return <div>
+			{result.verified_by ?
+				<Trans i18nKey="results.verifiedAtBy">
+					{{date}}
+					<Box user={result.verified_by} />
+				</Trans>
+			:
+				t('results.verifiedAt', { date })
+			}
+		</div>;
+	}
+
+	if (!mayVerify) {
+		return <div>
+			{t('results.verificationPending')}
+		</div>;
+	}
+
+	return <div>
+		<Button disabled={verifying} onClick={handleVerifyClick}>
+			{verifying ?
+				<Icon.LOADING className="me-2" />
+			: null}
+			{t('results.verifyButton')}
+		</Button>
+	</div>;
+};
+
+Verification.propTypes = {
+	actions: PropTypes.shape({
+		verifyResult: PropTypes.func,
+	}),
+	result: PropTypes.shape({
+		verified_at: PropTypes.string,
+		verified_by: PropTypes.shape({
+		}),
+	}),
+	round: PropTypes.shape({
+	}),
+	tournament: PropTypes.shape({
+	}),
+};
+
+export default Verification;
diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index 7ccc32e..4ee602b 100644
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -416,8 +416,11 @@ export default {
 			TwitchIcon: 'Twitch',
 			UnknownIcon: 'Unbekannt',
 			UnlockedIcon: 'Offen',
-			YoutubeIcon: 'YouTube',
+			VerifiedIcon: 'Verifiziert',
 			VideoIcon: 'Video',
+			VolumeIcon: 'Lautstärke',
+			WarningIcon: 'Achtung',
+			YoutubeIcon: 'YouTube',
 			zelda: {
 				aga: 'Agahnim',
 				armos: 'Armos Knights',
@@ -625,6 +628,9 @@ export default {
 			score: 'Punkte',
 			time: 'Zeit: {{ time }}',
 			verification: 'Verifikation',
+			verificationPending: 'Noch nicht verifiziert',
+			verifiedAt: 'Verifiziert am {{ date, L }}',
+			verifiedAtBy: 'Verifiziert am {{ date, L }} durch <1 />',
 			verifyButton: 'Ergebnis verifizieren',
 			verifyError: 'Fehler beim Verifizieren',
 			verifySuccess: 'Ergebnis verifiziert',
diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index 8349e24..945b2a1 100644
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -416,8 +416,11 @@ export default {
 			TwitchIcon: 'Twitch',
 			UnknownIcon: 'Unknown',
 			UnlockedIcon: 'Unlocked',
-			YoutubeIcon: 'YouTube',
+			VerifiedIcon: 'Verified',
 			VideoIcon: 'Video',
+			VolumeIcon: 'Volume',
+			WarningIcon: 'Warning',
+			YoutubeIcon: 'YouTube',
 			zelda: {
 				aga: 'Agahnim',
 				armos: 'Armos Knights',
@@ -625,6 +628,9 @@ export default {
 			score: 'Score',
 			time: 'Time: {{ time }}',
 			verification: 'Verification',
+			verificationPending: 'Pending verification',
+			verifiedAt: 'Verified on {{ date, L }}',
+			verifiedAtBy: 'Verified on {{ date, L }} by <1 />',
 			verifyButton: 'Verify result',
 			verifyError: 'Error verifying result',
 			verifySuccess: 'Result verified',
diff --git a/resources/sass/results.scss b/resources/sass/results.scss
index 5af982d..99fa5cf 100644
--- a/resources/sass/results.scss
+++ b/resources/sass/results.scss
@@ -1,3 +1,9 @@
+.result-dialog {
+	.verification {
+		border-top: thin solid $light;
+	}
+}
+
 .result-badge {
 	position: relative;
 	display: inline-flex;