Skip to content

Commit

Permalink
move the rest to grid
Browse files Browse the repository at this point in the history
  • Loading branch information
FinnIckler committed Dec 12, 2024
1 parent 39d63be commit 3c2f74e
Show file tree
Hide file tree
Showing 2 changed files with 228 additions and 119 deletions.
255 changes: 136 additions & 119 deletions app/webpacker/components/CompetitionTabs/GeneralInfoTab.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -204,143 +204,160 @@ export default function GeneralInfoTab({
</GridColumn>

<GridColumn width={8}>
<dl className="dl-horizontal">
<dt>{I18n.t('competitions.competition_info.information')}</dt>
<dd>
<Markdown md={competition.information} id="competition-info-information" />
</dd>
</dl>
<Grid>
<Grid.Row verticalAlign="top">
<Grid.Column width={4} textAlign="right">
<Header as="h5">{I18n.t('competitions.competition_info.information')}</Header>
</Grid.Column>
<Grid.Column width={12} verticalAlign="top">
<Markdown md={competition.information} id="competition-info-information" />
</Grid.Column>
</Grid.Row>

<dl className="dl-horizontal">
<dt>{I18n.t('competitions.competition_info.events')}</dt>
<dd className="competition-events-list">
{competition.events.map((event) => (
<React.Fragment key={event.id}>
<EventIcon id={event.id} />
</React.Fragment>
))}
</dd>
<Grid.Row verticalAlign="middle">
<Grid.Column width={4} textAlign="right">
<Header as="h5">{I18n.t('competitions.competition_info.events')}</Header>
</Grid.Column>
<Grid.Column width={12} className="competition-events-list">
{competition.events.map((event) => (
<React.Fragment key={event.id}>
<EventIcon id={event.id} size="1.5em" />
</React.Fragment>
))}
</Grid.Column>
</Grid.Row>

{competition.main_event_id && (
<>
<dt>{I18n.t('competitions.competition_info.main_event')}</dt>
<dd className="competition-events-list">
<EventIcon id={competition.main_event_id} />
</dd>
</>
<Grid.Row verticalAlign="middle">
<Grid.Column width={4} textAlign="right">
<Header as="h5">{I18n.t('competitions.competition_info.main_event')}</Header>
</Grid.Column>
<Grid.Column width={12} className="competition-events-list">
<EventIcon id={competition.main_event_id} />
</Grid.Column>
</Grid.Row>
)}

{competition['results_posted?'] && (
<>
<dt>{I18n.t('competitions.nav.menu.competitors')}</dt>
<dd>{competition.competitors.length}</dd>
</>
<Grid.Row verticalAlign="middle">
<Grid.Column width={4} textAlign="right">
<Header as="h5">{I18n.t('competitions.nav.menu.competitors')}</Header>
</Grid.Column>
<Grid.Column width={12}>{competition.competitors.length}</Grid.Column>
</Grid.Row>
)}
</dl>

{(competition.media.accepted ?? []).map((mediaType) => (
<div className="panel panel-default" key={mediaType.type}>
<div className="panel-heading">
<h4 className="panel-title">
<a
data-toggle="collapse"
href={`#collapse-${mediaType.type}`}
className="collapsed"
>
{`${mediaType.type}s (${mediaType.items.length})`}
</a>
</h4>
</div>
<div id={`collapse-${mediaType.type}`} className="panel-collapse collapse">
<ul className="list-group">
{mediaType.items.map((item) => (
{(competition.media.accepted ?? []).map((mediaType) => (
<div className="panel panel-default" key={mediaType.type}>
<div className="panel-heading">
<h4 className="panel-title">
<a
href={item.uri}
className="list-group-item"
target="_blank"
rel="noopener noreferrer"
key={item.text}
data-toggle="collapse"
href={`#collapse-${mediaType.type}`}
className="collapsed"
>
{item.text}
{`${mediaType.type}s (${mediaType.items.length})`}
</a>
))}
</ul>
</h4>
</div>
<div id={`collapse-${mediaType.type}`} className="panel-collapse collapse">
<ul className="list-group">
{mediaType.items.map((item) => (
<a
href={item.uri}
className="list-group-item"
target="_blank"
rel="noopener noreferrer"
key={item.text}
>
{item.text}
</a>
))}
</ul>
</div>
</div>
</div>
))}
))}

{!competition['results_posted?'] && competition.competitor_limit_enabled && (
<dl className="dl-horizontal">
<dt>{I18n.t('competitions.competition_info.competitor_limit')}</dt>
<dd>{competition.competitor_limit}</dd>
</dl>
)}
{!competition['results_posted?'] && competition.competitor_limit_enabled && (
<Grid.Row verticalAlign="middle">
<Grid.Column width={4} textAlign="right">
<Header as="h5">{I18n.t('competitions.competition_info.competitor_limit')}</Header>
</Grid.Column>
<Grid.Column width={12}>
{competition.competitor_limit}
</Grid.Column>
</Grid.Row>
)}

{!competition['results_posted?'] && (
<Grid.Row verticalAlign="middle">
<Grid.Column width={4} textAlign="right">
<Header as="h5">{I18n.t('competitions.competition_info.number_of_bookmarks')}</Header>
</Grid.Column>
<Grid.Column width={12}>
{competition.number_of_bookmarks}
</Grid.Column>
</Grid.Row>
)}
</Grid>

{!competition['results_posted?'] && (
<dl className="dl-horizontal">
<dt>{I18n.t('competitions.competition_info.number_of_bookmarks')}</dt>
<dd>{competition.number_of_bookmarks}</dd>
</dl>
)}
</GridColumn>

<GridColumn width={16}>
{competition.registration_open && competition.registration_close && (
<dl className="dl-horizontal">
<dt>{I18n.t('competitions.competition_info.registration_period.label')}</dt>
<dd>
<p>
{/* eslint-disable-next-line no-nested-ternary */}
{competition['registration_not_yet_opened?']
? I18n.t('competitions.competition_info.registration_period.range_future_html', {
start_date_and_time:
getFullDateTimeString(DateTime.fromISO(competition.registration_open)),
end_date_and_time:
getFullDateTimeString(DateTime.fromISO(competition.registration_close)),
})
: competition['registration_past?']
? I18n.t('competitions.competition_info.registration_period.range_past_html', {
start_date_and_time:
getFullDateTimeString(DateTime.fromISO(competition.registration_open)),
end_date_and_time:
getFullDateTimeString(DateTime.fromISO(competition.registration_close)),
})
: I18n.t('competitions.competition_info.registration_period.range_ongoing_html', {
start_date_and_time:
getFullDateTimeString(DateTime.fromISO(competition.registration_open)),
end_date_and_time:
getFullDateTimeString(DateTime.fromISO(competition.registration_close)),
})}
</p>
</dd>
</dl>
)}
<Grid>
{competition.registration_open && competition.registration_close && (
<Grid.Row>
<Grid.Column width={2} textAlign="right">
<Header as="h5">{I18n.t('competitions.competition_info.registration_period.label')}</Header>
</Grid.Column>
<Grid.Column width={14}>
<p>
{competition['registration_not_yet_opened?']
? I18n.t('competitions.competition_info.registration_period.range_future_html', {
start_date_and_time: getFullDateTimeString(DateTime.fromISO(competition.registration_open)),
end_date_and_time: getFullDateTimeString(DateTime.fromISO(competition.registration_close)),
})
: competition['registration_past?']
? I18n.t('competitions.competition_info.registration_period.range_past_html', {
start_date_and_time: getFullDateTimeString(DateTime.fromISO(competition.registration_open)),
end_date_and_time: getFullDateTimeString(DateTime.fromISO(competition.registration_close)),
})
: I18n.t('competitions.competition_info.registration_period.range_ongoing_html', {
start_date_and_time: getFullDateTimeString(DateTime.fromISO(competition.registration_open)),
end_date_and_time: getFullDateTimeString(DateTime.fromISO(competition.registration_close)),
})}
</p>
</Grid.Column>
</Grid.Row>
)}

<dl className="dl-horizontal">
<dt>{I18n.t('competitions.competition_info.registration_requirements')}</dt>
<dd>
<div>
{showRegistrationRequirements ? (
<>
<div>
<RegistrationRequirements
competition={competition}
userInfo={userInfo}
showLinksToRegisterPage
/>
</div>
<Button onClick={() => setShowRegistrationRequirements(false)}>
{I18n.t('competitions.competition_info.hide_requirements')}
<Grid.Row>
<Grid.Column width={2} textAlign="right">
<Header as="h5">{I18n.t('competitions.competition_info.registration_requirements')}</Header>
</Grid.Column>
<Grid.Column width={14}>
<div>
{showRegistrationRequirements ? (
<>
<div>
<RegistrationRequirements
competition={competition}
userInfo={userInfo}
showLinksToRegisterPage
/>
</div>
<Button onClick={() => setShowRegistrationRequirements(false)}>
{I18n.t('competitions.competition_info.hide_requirements')}
</Button>
</>
) : (
<Button onClick={() => setShowRegistrationRequirements(true)}>
{I18n.t('competitions.competition_info.click_to_display_requirements_html')}
</Button>
</>
) : (
<Button onClick={() => setShowRegistrationRequirements(true)}>
{I18n.t('competitions.competition_info.click_to_display_requirements_html')}
</Button>
)}
</div>
</dd>
</dl>
)}
</div>
</Grid.Column>
</Grid.Row>
</Grid>

{competition.userCanViewResults && (competition.main_event_id || records) && (
<dl className="dl-horizontal">
Expand Down
92 changes: 92 additions & 0 deletions app/webpacker/components/CompetitionTabs/TimeLimitCutoffInfo.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import React from 'react';

import I18n from '../../lib/i18n';
import I18nHTMLTranslate from '../I18nHTMLTranslate';

export default function TimeLimitCutoffInfo({ competition }) {
// const showCumulativeOneRound = competition['uses_cumulative?'];
// const showCumulativeAcrossRounds = competition['uses_cumulative_across_rounds?'];
// const showCutoff = competition['uses_cutoff?'];
// const showQualifications = competition['uses_qualification?'];
//
// return (
// <div class="time-limit-information">
// <h4 id="time-limit">
// { I18n.t("competitions.events.time_limit") }
// </h4>
// <p>
// <I18nHTMLTranslate i18nKey={"competitions.events.time_limit_information.time_limit_html"} options={{
// regulation_link: `<a href=${regulationsUrl("#A1a4")} target="_blank">${I18n.t("competitions.events.time_limit_information.regulation_link_text", { number: "A1a4" })}')}</a>`}
// }
// { showCumulativeOneRound && }
// <% if show_cumulative_one_round %>
// <br/>
// <% cumulative_one_round = content_tag :strong,
// t("competitions.events.time_limit_information.cumulative_time_limit"), id: "cumulative-time-limit" %>
// <%= t("competitions.events.time_limit_information.cumulative_one_round_html",
// cumulative_time_limit: cumulative_one_round,
// regulation_link: link_to(t("competitions.events.time_limit_information.regulation_link_text", number: "A1a2"),
// regulations_path + "#A1a2", target: "_blank")) %>
// <% end %>
// <% if show_cumulative_across_rounds %>
// <br/>
// <
// % cumulative_across_rounds = content_tag :strong,
// t("competitions.events.time_limit_information.cumulative_time_limit"), id: "cumulative-across-rounds-time-limit"
// %>
// <%= t("competitions.events.time_limit_information.cumulative_across_rounds_html",
// cumulative_time_limit: cumulative_across_rounds,
// guideline_link: link_to(t("competitions.events.time_limit_information.guideline_link_text", number: "A1a2++"),
// regulations_path + "/guidelines.html#A1a2++", target: "_blank")) %>
// <% end %>
// </p>
//
// <
// % if show_cutoff %>
// <h4 id="cutoff">
// <
// %= t("competitions.events.cutoff") %></h4>
// <p>
// <
// %= t("competitions.events.time_limit_information.cutoff_html",
// regulation_link: link_to(t("competitions.events.time_limit_information.regulation_link_text", number: "9g"),
// regulations_path + "#9g", target: "_blank")) %>
// </p>
// <
// % end %>
// <h4 id="format">
// <
// %= t("competitions.events.format") %></h4>
// <p>
// <
// %= t("competitions.events.time_limit_information.format_html",
// link_to_9b: link_to(t("competitions.events.time_limit_information.regulation_link_text", number: "9b"),
// regulations_path + "#9b", target: "_blank"),
// link_to_9f: link_to(t("competitions.events.time_limit_information.regulation_link_text", number: "9f"),
// regulations_path + "#9f", target: "_blank")) %>
// </p>
//
// <
// % if show_qualifications %>
// <h4 id="qualification">
// <
// %= t("competitions.events.qualification") %></h4>
// <p>
// <
// %= t("competitions.events.time_limit_information.qualification_html") %>
// <% date_to_events = competition.qualification_date_to_events %>
// <% if (date_to_events.length() > 1) %>
// <% date_to_events.each do |date, events| %>
// <%= t("competitions.events.time_limit_information.qualification_some_events_html",
// date: wca_date_range(date, date), events: events.map{|e| e.event.name}.join(", ")) %>
// <% end %>
// <% else %>
// <%= t("competitions.events.time_limit_information.qualification_all_events_html",
// date: wca_date_range(date_to_events.keys.first, date_to_events.keys.first)) %>
// <% end %>
// </p>
// <
// % end %>
// </div>
// )
}

0 comments on commit 3c2f74e

Please sign in to comment.