add highlights

thewca · Dec 13, 2024 · ab51c84 · ab51c84
1 parent 956bed7
commit ab51c84
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 31 deletions.
diff --git a/app/models/competition.rb b/app/models/competition.rb
@@ -2212,6 +2212,10 @@ def serializable_hash(options = nil)
     )
   end
 
+  def competitor_count
+    competitors.count
+  end
+
   def to_ics
     cal = Icalendar::Calendar.new
     wcif_ids = rounds.to_h { |r| [r.wcif_id, r.to_string_map] }

diff --git a/app/views/competitions/show.html.erb b/app/views/competitions/show.html.erb
@@ -9,7 +9,7 @@
  media number_of_bookmarks date_range information on_the_spot_registration? on_the_spot_entry_fee_lowest_denomination
  guests_per_registration_limit_enabled? guests_per_registration_limit uses_qualification? allow_registration_without_qualification
  events_per_registration_limit_enabled? events_per_registration_limit guests_entry_fee_lowest_denomination all_guests_allowed?
- uses_cumulative? uses_cumulative_across_rounds? uses_cutoff? uses_qualification?]} %>
+ uses_cumulative? uses_cumulative_across_rounds? uses_cutoff? uses_qualification? results_posted? competitor_count]} %>
 <%= render layout: 'nav' do %>
   <%= react_component("CompetitionTabs", {
     tabs: @competition.tabs.as_json,
@@ -19,6 +19,8 @@
                                      only: %w[wca_id unconfirmed_wca_id],
                                      methods: [],
                                      include: [],
-                                   })
+                                   }),
+    winners: winners(@competition, @competition.main_event),
+    records: records(@competition),
   }) %>
 <% end %>
diff --git a/app/webpacker/components/CompetitionTabs/GeneralInfoTab.jsx b/app/webpacker/components/CompetitionTabs/GeneralInfoTab.jsx
@@ -18,9 +18,11 @@ const linkToGoogleMapsPlace = (latitude, longitude) => `https://www.google.com/m
 export default function GeneralInfoTab({
   competition,
   userInfo,
+  records,
+  winners,
 }) {
   const [showRegistrationRequirements, setShowRegistrationRequirements] = useState(!competition['is_probably_over?']);
-  const [showHighlights, setShowHighlights] = useState(false);
+  const [showHighlights, setShowHighlights] = useState(true);
 
   return (
     <Grid>
@@ -243,7 +245,7 @@ export default function GeneralInfoTab({
                 <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.Column width={12}>{competition.competitor_count}</Grid.Column>
               </Grid.Row>
             )}
             {(competition.media.accepted ?? []).map((mediaType) => (
@@ -360,32 +362,36 @@ export default function GeneralInfoTab({
                 </div>
               </Grid.Column>
             </Grid.Row>
+            {competition['results_posted?'] && (competition.main_event_id || records) && (
+              <Grid.Row>
+                <Grid.Column width={2} textAlign="right">
+                  <Header as="h5">{I18n.t('competitions.competition_info.highlights')}</Header>
+                </Grid.Column>
+                <Grid.Column width={14}>
+                  <div>
+                    {showHighlights ? (
+                      <>
+                        <Button onClick={() => setShowHighlights(false)}>
+                          {I18n.t('competitions.competition_info.hide_highlights')}
+                        </Button>
+                        <div>
+                          {competition.main_event_id && <Markdown md={winners} id="competition-info-winners" /> }
+                          <br />
+                          {records && <Markdown md={records} id="competition-info-records" />}
+                        </div>
+                      </>
+                    ) : (
+                      <Button onClick={() => setShowHighlights(true)}>
+                        {I18n.t('competitions.competition_info.click_to_display_highlights_html', {
+                          link_here: I18n.t('common.here'),
+                        })}
+                      </Button>
+                    )}
+                  </div>
+                </Grid.Column>
+              </Grid.Row>
+            )}
           </Grid>
-
-          {competition.userCanViewResults && (competition.main_event_id || records) && (
-          <dl className="dl-horizontal">
-            <dt>{I18n.t('competitions.competition_info.highlights')}</dt>
-            <dd>
-              <div>
-                {showHighlights ? (
-                  <>
-                    <Button onClick={() => setShowHighlights(false)}>
-                      {I18n.t('competitions.competition_info.hide_highlights')}
-                    </Button>
-                    <div>
-                      {competition.main_event_id && <p>{winners(competition, competition.mainEvent)}</p>}
-                      {records && <p>{records}</p>}
-                    </div>
-                  </>
-                ) : (
-                  <button onClick={() => setShowHighlights(true)}>
-                    {I18n.t('competitions.competition_info.click_to_display_highlights_html')}
-                  </button>
-                )}
-              </div>
-            </dd>
-          </dl>
-          )}
         </GridColumn>
       </GridRow>
     </Grid>

diff --git a/app/webpacker/components/CompetitionTabs/index.jsx b/app/webpacker/components/CompetitionTabs/index.jsx
@@ -28,10 +28,21 @@ const tabIndexFromSlug = (panes) => {
 };
 
 export default function Wrapper({
-  tabs, competition, wcifEvents, wcifSchedule, locale, userInfo,
+  tabs, competition, wcifEvents, wcifSchedule, locale, userInfo, records, winners,
 }) {
   const panes = useMemo(() => {
-    const p = [{ slug: 'general-info', menuItem: 'General Info', render: () => <GeneralInfoTab competition={competition} userInfo={userInfo} /> }];
+    const p = [{
+      slug: 'general-info',
+      menuItem: 'General Info',
+      render: () => (
+        <GeneralInfoTab
+          competition={competition}
+          userInfo={userInfo}
+          records={records}
+          winners={winners}
+        />
+      ),
+    }];
     if (competition['has_rounds?']) {
       p.push({
         slug: 'competition-events',