From 37dde014443f2c38f18f5c995059794e41eafdea Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Fri, 12 May 2023 15:29:38 +0200
Subject: [PATCH] New settings hide_header to hide the top banner with partners
 and countdown

---
 admin/static/views/settings.html              |  7 ++
 frontend/ui/src/lib/components/Clock.svelte   | 74 +++++++++++++++++++
 frontend/ui/src/lib/components/Header.svelte  | 10 ++-
 .../ui/src/lib/components/HeaderClock.svelte  | 68 ++---------------
 settings/settings.go                          |  2 +
 5 files changed, 97 insertions(+), 64 deletions(-)
 create mode 100644 frontend/ui/src/lib/components/Clock.svelte

diff --git a/admin/static/views/settings.html b/admin/static/views/settings.html
index 0a4fb787..c3b2e363 100644
--- a/admin/static/views/settings.html
+++ b/admin/static/views/settings.html
@@ -248,6 +248,13 @@
         </label>
       </div>
 
+      <div class="form-check">
+        <label class="custom-control custom-checkbox">
+	  <input class="custom-control-input" type="checkbox" ng-model="config.hide_header">
+	  <span class="custom-control-label" ng-class="{'text-primary font-weight-bold': !config.hide_header != !dist_config.hide_header}">Cacher l'en-tête du compte à rebours</span>
+        </label>
+      </div>
+
       <div class="form-check">
         <label class="custom-control custom-checkbox">
 	  <input class="custom-control-input" type="checkbox"ng-model="config.disabledsubmitbutton"  ng-change="submitButtonStateChange()">
diff --git a/frontend/ui/src/lib/components/Clock.svelte b/frontend/ui/src/lib/components/Clock.svelte
new file mode 100644
index 00000000..62a3d725
--- /dev/null
+++ b/frontend/ui/src/lib/components/Clock.svelte
@@ -0,0 +1,74 @@
+<script>
+ import {
+     ButtonGroup,
+     Icon,
+ } from 'sveltestrap';
+
+ import { time } from '$lib/stores/settings.js';
+
+ export { className as class };
+ let className = '';
+</script>
+
+<div
+    class="clock ${className}"
+    class:expired={$time.expired}
+    class:end={$time.end}
+    class:wait={$time.startIn}
+>
+    {#if $time.seconds}
+        <span id="hours">
+            {$time.hours}
+        </span>
+        <span class="point">
+            :
+        </span>
+        <span id="minutes">
+            {$time.minutes}
+        </span>
+        <span class="point">
+            :
+        </span>
+        <span id="seconds">
+            {$time.seconds}
+        </span>
+    {:else}
+        Chargement
+    {/if}
+</div>
+
+<style>
+ .clock:not(.expired):not(.wait) .point, .clock.expired {
+     transition: color text-shadow 1s;
+     position: relative;
+     animation: clockanim 1s ease infinite;
+     -moz-animation: clockanim 1s ease infinite;
+     -webkit-animation: clockanim 1s ease infinite;
+ }
+ .clock.wait .point {
+     transition: color text-shadow 1s;
+     position: relative;
+     animation: clockwait 1s ease infinite;
+     -moz-animation: clockwait 1s ease infinite;
+     -webkit-animation: clockwait 1s ease infinite;
+ }
+ .end {
+     color: #e64143;
+ }
+ .point {
+     text-shadow: 0 0 20px #4eaee6;
+ }
+ .end .point {
+     text-shadow: 0 0 20px #e64143;
+ }
+ @keyframes clockanim {
+     0% { opacity: 1.0; }
+     50% { opacity: 0; }
+     100% { opacity: 1.0; }
+ }
+ @keyframes clockwait {
+     0% { text-shadow: 0 0 20px #A6D6F2; }
+     50% { text-shadow: 0 0 2px #A6D6F2; }
+     100% { text-shadow: 0 0 20px #A6D6F2; }
+ }
+</style>
diff --git a/frontend/ui/src/lib/components/Header.svelte b/frontend/ui/src/lib/components/Header.svelte
index 14163b2f..fbd8b876 100644
--- a/frontend/ui/src/lib/components/Header.svelte
+++ b/frontend/ui/src/lib/components/Header.svelte
@@ -24,6 +24,7 @@
  import { teams } from '$lib/stores/teams.js';
  import { settings, time } from '$lib/stores/settings.js';
 
+ import Clock from './Clock.svelte';
  import HeaderClock from './HeaderClock.svelte';
  import HeaderIssues from './HeaderIssues.svelte';
  import HeaderPartners from './HeaderPartners.svelte';
@@ -37,6 +38,7 @@
  }
 </script>
 
+{#if !$settings.hide_header}
 <div class="container-fluid bg-dark" style="max-height: 15vh;">
     <div style="height: 100%; max-height: inherit; width: 98%; position: absolute">
         <Container class="d-flex justify-content-center align-items-center text-light" style="height: 100%; max-height: inherit">
@@ -54,6 +56,7 @@
         <HeaderPartners />
     </Container>
 </div>
+{/if}
 <div class="sticky-top">
 <Navbar color="dark" dark expand="md">
     <NavbarToggler on:click={() => (isOpen = !isOpen)} />
@@ -67,7 +70,7 @@
             </NavItem>
             <NavThemes />
             <NavTags />
-            {#if $settings && $settings.end - $settings.start >= 0 && $teams && Object.keys($teams).length}
+            {#if $settings && $settings.start >= $settings.recvTime && $teams && Object.keys($teams).length}
             <NavItem>
                 <NavLink href="rank">
                     <Icon name="sort-down" />
@@ -83,6 +86,11 @@
                 </NavLink>
             </NavItem>
         </Nav>
+        {#if $settings.hide_header && $settings.end - $settings.start > 0}
+            <Nav class="ms-auto text-light display-6" navbar>
+                <Clock />
+            </Nav>
+        {/if}
         <Nav class="ms-auto text-light" navbar>
             {#if $my && $my.team_id}
                 <NavItem>
diff --git a/frontend/ui/src/lib/components/HeaderClock.svelte b/frontend/ui/src/lib/components/HeaderClock.svelte
index 81cf6268..b59bb1e7 100644
--- a/frontend/ui/src/lib/components/HeaderClock.svelte
+++ b/frontend/ui/src/lib/components/HeaderClock.svelte
@@ -4,38 +4,16 @@
      Icon,
  } from 'sveltestrap';
 
+ import Clock from './Clock.svelte';
  import { challengeInfo } from '$lib/stores/challengeinfo.js';
- import { settings, time } from '$lib/stores/settings.js';
+ import { settings } from '$lib/stores/settings.js';
 </script>
 
 {#if $settings && $settings.end}
     {#if $settings.end - $settings.start > 0}
-        <div
-            class="clock display-2 text-end text-md-center"
-            class:expired={$time.expired}
-            class:end={$time.end}
-            class:wait={$time.startIn}
-        >
-            {#if $time.seconds}
-                <span id="hours">
-                    {$time.hours}
-                </span>
-                <span class="point">
-                    :
-                </span>
-                <span id="minutes">
-                    {$time.minutes}
-                </span>
-                <span class="point">
-                    :
-                </span>
-                <span id="seconds">
-                    {$time.seconds}
-                </span>
-            {:else}
-                Chargement
-            {/if}
-        </div>
+        <Clock
+            class="display-2 text-end text-md-center"
+        />
     {:else}
         <div class="d-flex h-100 justify-content-center align-items-center">
             <ButtonGroup size="lg">
@@ -73,39 +51,3 @@
         </h1>
     </div>
 {/if}
-
-<style>
- .clock:not(.expired):not(.wait) .point, .clock.expired {
-     transition: color text-shadow 1s;
-     position: relative;
-     animation: clockanim 1s ease infinite;
-     -moz-animation: clockanim 1s ease infinite;
-     -webkit-animation: clockanim 1s ease infinite;
- }
- .clock.wait .point {
-     transition: color text-shadow 1s;
-     position: relative;
-     animation: clockwait 1s ease infinite;
-     -moz-animation: clockwait 1s ease infinite;
-     -webkit-animation: clockwait 1s ease infinite;
- }
- .end {
-     color: #e64143;
- }
- .point {
-     text-shadow: 0 0 20px #4eaee6;
- }
- .end .point {
-     text-shadow: 0 0 20px #e64143;
- }
- @keyframes clockanim {
-     0% { opacity: 1.0; }
-     50% { opacity: 0; }
-     100% { opacity: 1.0; }
- }
- @keyframes clockwait {
-     0% { text-shadow: 0 0 20px #A6D6F2; }
-     50% { text-shadow: 0 0 2px #A6D6F2; }
-     100% { text-shadow: 0 0 20px #A6D6F2; }
- }
-</style>
diff --git a/settings/settings.go b/settings/settings.go
index 393b6a0a..4d83654e 100644
--- a/settings/settings.go
+++ b/settings/settings.go
@@ -87,6 +87,8 @@ type Settings struct {
 	GlobalTopMessage string `json:"globaltopmessage,omitempty"`
 	// GlobalTopMessageVariant control the variant/color of the previous message.
 	GlobalTopMessageVariant string `json:"globaltopmessagevariant,omitempty"`
+	// HideHeader will hide the countdown and partners block on front pages.
+	HideHeader bool `json:"hide_header,omitempty"`
 }
 
 // ExistsSettings checks if the settings file can by found at the given path.