done?

asteriskiry · Dec 30, 2024 · 5a7eff4 · 5a7eff4
1 parent b9603e5
commit 5a7eff4
Show file tree

Hide file tree

Showing 19 changed files with 202 additions and 70 deletions.
diff --git a/src/lib/assets/Asteriski_logo2.svg b/src/lib/assets/Asteriski_logo2.svg
diff --git a/src/lib/assets/taikametsa.jpg b/src/lib/assets/taikametsa.jpg
diff --git a/src/lib/components/banner2.svelte b/src/lib/components/banner2.svelte
@@ -178,6 +178,7 @@
         position: absolute;
         text-decoration: none;
         transform: translate(-50%, -50%);
+        z-index: 10;
         &:hover {
             transform: translate(-50%, -50%) scale(1.1);
         }

diff --git a/src/lib/components/footer.svelte b/src/lib/components/footer.svelte
@@ -1,8 +1,9 @@
 <script>
     export let lang = 'fi';
+    import { page } from '$app/stores';
 </script>
 <div class="scroller">
-    <a href="{lang === 'fi' ? '/tesmi' : '/tesmi/en'}">></a>
+    <a href="{$page.url.pathname}">></a>
 </div>
 <div class="footer wrap">
     <div class="flex">

diff --git a/src/lib/components/ilmo.svelte b/src/lib/components/ilmo.svelte
@@ -4,6 +4,7 @@
     export let form;
     export let invited = false
     export let lang = 'fi';
+    export let data;
 </script>
 
-<Ilmoformi {invited} {id} {form} fi={lang === 'fi'} />
+<Ilmoformi {invited} {id} {form} fi={lang === 'fi'} {data}/>
diff --git a/src/lib/components/ilmoformi.svelte b/src/lib/components/ilmoformi.svelte
@@ -4,35 +4,37 @@
     export let id = 'ilmo';
     export let form;
     export let fi = true;
+    export let data;
+    const participants = data.participants;
+
     let is_greeting = 'yes';
 
 </script>
 <section id="{id}">
 <div class="wrap">
     <div class="flex-items bordered flower-bg">
-        <h2>Ilmoittautuminen</h2>
+        <h2>{fi ? 'Ilmoittautuminen' : 'Sign up'}</h2>
         {#if form?.success !== true}
-        <form method="POST" use:enhance>
+        <form method="POST" class="{form?.fields === true ? 'error' : ''}" use:enhance>
             <div class="flex-item twelve row">
                 <a href=".">{fi ? 'Etusivulle' : 'To frontpage'}</a>
-                <a href="{fi ? '/tesmi/participants' : '/tesmi/en/participants'}">{fi ? 'Ilmoittautuneet' : 'Registered'}</a>
             </div>
             <div class="flex-item six">
                 <label>
                     <span>{fi ? 'Etunimi' : 'First name'}*</span>
-                    <input type="text" name="first_name" required>
+                    <input class="required" type="text" name="first_name" required>
                 </label>
             </div>
             <div class="flex-item six">
                 <label>
                     <span>{fi ? 'Sukunimi' : 'Last name'}*</span>
-                    <input type="text" name="last_name" required>
+                    <input class="required" type="text" name="last_name" required>
                 </label>
             </div>
             <div class="flex-item six">
                 <label>
                     <span>{fi ? 'Sähköposti' : 'Email'}*</span>
-                    <input type="email" name="email" required>
+                    <input class="required" type="email" name="email" required>
                 </label>
             </div>
             <div class="flex-item six">
@@ -105,7 +107,7 @@
             </div>
             <div class="flex-item six">
                 <label>
-                    <span>{fi ? 'Avecin nimi (HUOM! Avecing on ilmoittauduttava erikseen)' : 'Avecs name (NOTE! Avecs need to register separately)'}</span>
+                    <span>{fi ? 'Avecin nimi (HUOM! Avecin on ilmoittauduttava erikseen)' : 'Avecs name (NOTE! Avecs need to register separately)'}</span>
                     <input type="text" name="avecs_name">
                 </label>
             </div>
@@ -146,13 +148,13 @@
             <div class="flex-item six">
                 <label>
                     <span>{fi ? 'Tervehdyksessä edustamasi taho(t)' : 'The entity you represent when greeting'}*</span>
-                    <input type="text" name="party_representing" required>
+                    <input class="required" type="text" name="party_representing" required>
                 </label>
             </div>
         {/if}
     {/if}
         <div class="flex-item six">
-            <label class="flex-row">
+            <label class="flex-row required">
                 <input type="checkbox" name="is_consenting" required>
                 <span>{fi 
                     ? 'Hyväksyn, että tietojani käytetään vuosijuhlien järjestämiseen. Tiedot poistetaan vuosijuhlien jälkeen.'
@@ -163,17 +165,17 @@
         <div class="flex-item six row">
         {#if form?.success === false}
             {#if form?.ilmo === false}
-            <p class="bold">{fi
+            <p class="bold red">{fi
                 ?'Ilmoittautuminen ei ole auki!'
                 : 'Registration is not open!'}
             </p>
             {:else if form?.fields === true}
-            <p class="bold">{fi
+            <p class="bold red">{fi
                 ?'Täytä pakolliset kentät (*)'
                 : 'Fill mandatory fields (*)'}
             </p>
             {:else}
-            <p class="bold">{fi
+            <p class="bold red">{fi
                 ?'Jotain meni pieleen. Yritä hetken kuluttua uudelleen.'
                 : 'Something went wrong. Please try again later.'}
             </p>
@@ -189,12 +191,32 @@
                 : 'Thanks you for registration'}
             </h3>
             <a href="{invited ? (fi ? '/tesmi/kutsuvieras-ilmo' : '/tesmi/en/kutsuvieras-ilmo') : (fi ? '/tesmi/ilmo' : '/tesmi/en/ilmo')}">{fi ? 'Tee toinen ilmoittautuminen' : 'Register again'}</a>
-            <a href="{fi ? '/tesmi/participants' : '/tesmi/en/participants'}">{fi ? 'Katso ilmoittautuneet' : 'See registered'}</a>
             <a href=".">{fi ? 'Etusivulle' : 'To frontpage'}</a>
         </div>
 
         {/if}
     </div>
+    <table>
+        <tr>
+            <th>#</th>
+            <th>{fi ? 'Ilmoittautuneet' : 'Registered'}</th>
+        </tr>
+    {#if form?.participants?.fitting_participants} 
+        {#each form.participants.fitting_participants as p}
+            <tr>
+                <td>{p.id}</td>
+                <td>{p.first_name} {p.last_name}</td>
+            </tr>    
+        {/each}
+    {:else}
+        {#each participants.fitting_participants as p}
+        <tr>
+            <td>{p.id}</td>
+            <td>{p.first_name} {p.last_name}</td>
+        </tr>    
+        {/each}
+    {/if}
+    </table>
 </div>
 </section>
 <style lang="scss">
@@ -204,6 +226,10 @@
         form {
             width: 50%;
             margin: 0 auto;
+            &.error .required {
+                border: 2px solid red;
+                border-radius: 5px;
+            }
             @include v.lg {
                 width: 80%;
             }
@@ -298,4 +324,37 @@
             margin: 5px 0;
         }
     }
+
+    .red {
+        color: red;
+    }
+
+    a {
+        color: v.$riski-green-light
+    }
+
+    table {
+        margin: 50px 0;
+        width:100%;
+        border-spacing: 0;
+    }
+
+    th {
+        background:v.$font-gold;
+        padding: 10px 0;
+        margin-right:auto;
+	    
+    }
+    tr {
+        &:nth-of-type(even) {
+            background: #f1dfdf;
+        }
+    }
+    td {
+        padding:15px 0;
+        margin-right:auto;
+        margin-left:auto;
+        text-align: center;
+        
+    }
 </style>
diff --git a/src/lib/components/sillis.svelte b/src/lib/components/sillis.svelte
@@ -0,0 +1,59 @@
+<script>
+    export let id = 'sillis';
+    export let lang = 'fi';
+</script>
+<section id={id} class="forest-bg">
+    <div class="wrap">
+        <div class="flex column">
+            <div class="flex-item six">
+                <h2>{lang === 'fi' ? 'Sillis' : 'Herring breakfast'}</h2>
+                <p>
+                {#if lang === 'fi'}
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                {:else}
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                    TÄSSÄ TIETOA SILLIKSESTÄ
+                {/if}
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
+<style lang="scss">
+    @use '../../style/variables' as v;
+    section {
+        min-height: 500px;
+        display: flex;
+        align-items: center;
+        .flex-item {
+            background-color: rgba(255, 255, 255, 0.5);
+            padding: 10px;
+            border-radius: 5px;
+            margin: auto;
+            width: 100%;
+            max-width: 800px;
+        }
+    }
+    @include v.sm {
+        h2 {
+            line-height: 50px;
+        }
+    }
+</style>
diff --git a/src/routes/tesmi/+page.svelte b/src/routes/tesmi/+page.svelte
@@ -5,6 +5,7 @@
     import Footer from "$lib/components/footer.svelte";
     import Posts from "$lib/components/posts.svelte";
     import Menu from "$lib/components/menu.svelte";
+    import Sillis from "$lib/components/sillis.svelte";
     import Logofarm from "$lib/components/logofarm.svelte";
     import infoImg from "$lib/assets/vuju.jpg"
     export let data;
@@ -56,5 +57,6 @@
 <Posts posts={data.posts}/>
 <Menu/>
 <Program title={etiquetteTitle} texts={etiquette} id={'etiquette'}/>
+<Sillis />
 <Logofarm />
 <Footer/>
diff --git a/src/routes/tesmi/en/+page.svelte b/src/routes/tesmi/en/+page.svelte
@@ -5,6 +5,7 @@
     import Footer from "$lib/components/footer.svelte";
     import Posts from "$lib/components/posts.svelte";
     import Menu from "$lib/components/menu.svelte";
+    import Sillis from "$lib/components/sillis.svelte";
     import Logofarm from "$lib/components/logofarm.svelte";
     import infoImg from "$lib/assets/vuju.jpg"
     export let data;
@@ -26,14 +27,14 @@
             fi: {
                 left: [
                     'Pukukoodi', 
-                    "Pukukoodina vuosijuhlissa toimii juhlapuku sekä akateemiset kunniamerkit. \n\nJuhlapuku tarkoittaa frakkia. Frakin voi myös korvata hillityllä tummalla puvulla. Tällöin tumman puvun kanssa tulee käyttää valkoista paitaa sekä vaaleaa tai helmiäistä yksiväristä solmiota. \n\nTäyspitkää ilta- tai juhlapukua käytettäessä vain kengän kärjet saavat näkyä. Laukkuna tulee toimia olkaimeton ja siro laukku. Pääjuhlassa lippujen läsnäollessa hartioiden tulisi myös olla peitettynä esimerkiksi hartiahuivilla. Hansikkaita voi halutessaan käyttää muuten kuin ruokaillessa. \n\nVuosijuhlilla käytetään akateemisiksi kunniamerkeiksi määriteltyjä nauhoja ja merkkejä, jotka kuuluvat perinteisesti vuosijuhla-asuun. Kunnianauhaa kannetaan oikealta olkapäältä rinnan yli viistoon vasemmalle. Kunnianauhaa voi kantaa myös ruusukkeena vasemmassa rintapielessä. Nauha ei saa koskettaa paljasta ihoa. Juhlapuvun kanssa nauhaa kannetaan liivin alla. Nauhoista arvokkainta tai suurinta organisaatiota edustavaa kannetaan ylimpänä (esimerkiksi TYYn kuntanauha ylimpänä). Asteriskin jäsennauhaa tulee kantaa keltainen väri ylempänä. Kunniamerkkejä kannetaan ne myöntäneen tahon ohjeiden mukaan esimerkiksi nauhassa tai puvun vasemmassa rintapielessä. Asteriskin jäsennauhaa ei tule käyttää samaa aikaa Asteriskin kunnianauhan, ansionauhan ja ansiomerkin kanssa. Kunniamerkkien kanssa ei käytetä frakin taskuliinaa. \n\nEeppiselle silliaamiaiselle päälle pantavaksi kannattaa varata sirkusteeman mukaista huomattavasti rennompaa vaatetusta. Mitä rennompi ja typerämpi, sen parempi! Haalarit toimivat myös aina."
+                    "Pukukoodina vuosijuhlissa toimii juhlapuku sekä akateemiset kunniamerkit. \n\nJuhlapuku tarkoittaa frakkia. Frakin voi myös korvata hillityllä tummalla puvulla. Tällöin tumman puvun kanssa tulee käyttää valkoista paitaa sekä vaaleaa tai helmiäistä yksiväristä solmiota. \n\nTäyspitkää ilta- tai juhlapukua käytettäessä vain kengän kärjet saavat näkyä. Laukkuna tulee toimia olkaimeton ja siro laukku. Pääjuhlassa lippujen läsnäollessa hartioiden tulisi myös olla peitettynä esimerkiksi hartiahuivilla. Hansikkaita voi halutessaan käyttää muuten kuin ruokaillessa. \n\nVuosijuhlilla käytetään akateemisiksi kunniamerkeiksi määriteltyjä nauhoja ja merkkejä, jotka kuuluvat perinteisesti vuosijuhla-asuun. Kunnianauhaa kannetaan oikealta olkapäältä rinnan yli viistoon vasemmalle. Kunnianauhaa voi kantaa myös ruusukkeena vasemmassa rintapielessä. Nauha ei saa koskettaa paljasta ihoa. Juhlapuvun kanssa nauhaa kannetaan liivin alla. Nauhoista arvokkainta tai suurinta organisaatiota edustavaa kannetaan ylimpänä (esimerkiksi TYYn kuntanauha ylimpänä). Asteriskin jäsennauhaa tulee kantaa keltainen väri ylempänä. Kunniamerkkejä kannetaan ne myöntäneen tahon ohjeiden mukaan esimerkiksi nauhassa tai puvun vasemmassa rintapielessä. Asteriskin jäsennauhaa ei tule käyttää samaa aikaa Asteriskin kunnianauhan, ansionauhan ja ansiomerkin kanssa. Kunniamerkkien kanssa ei käytetä frakin taskuliinaa. \n\nEeppiselle silliaamiaiselle päälle pantavaksi kannattaa varata taikametsäteeman mukaista huomattavasti rennompaa vaatetusta. Mitä rennompi ja typerämpi, sen parempi! Haalarit toimivat myös aina."
                 ],
                 right: ''
             },
             en: {
                 left: [
                     'Dresscode', 
-                    'The dress code at the annual ball is a white tie or an evening gown with academic medals or ribbons. \n\nEvening gown should be full length, the hemline going under the ankles. Handbag should be strapless and fit the occasion. Shoulders should be covered during the main event. Gloves can be worn but not during dinner. A dark lounge suit is also sufficient and it refers to a black suit with a white shirt and a light-colored tie. \n\nAcademic decorations, such as medals and ribbons, are traditionally part of the annual party attire. \n\nHonorary ribbons are worn over the right shoulder across your chest to the left. In a suit they go under the vest. When wearing a tie, the honorary ribbon should go in front of the tie. Honorary ribbons can also be folded into a rosette to be attached to your left lapel. They should not be in touch with the skin. The decoration of the highest value or representing the biggest organization should be placed on the top (for example student union TYY’s ribbon should be first of the decorations). \n\nMember ribbon is worn yellow stripe on upwards. Decorations should be worn according to the recommendations of the organization that bestowed them. Asteriski member ribbon should not be used at the same time as Asteriski honorary ribbon, ribbon of praise, and medal of praise. A white tie is not accessorized with a handkerchief while wearing decorations. \n\nIn our epic herring breakfast the dress code is much more casual. Dress according to the circus theme, the more chill and sillier the better! Or just come in your overalls. That’s good too.'
+                    'The dress code at the annual ball is a white tie or an evening gown with academic medals or ribbons. \n\nEvening gown should be full length, the hemline going under the ankles. Handbag should be strapless and fit the occasion. Shoulders should be covered during the main event. Gloves can be worn but not during dinner. A dark lounge suit is also sufficient and it refers to a black suit with a white shirt and a light-colored tie. \n\nAcademic decorations, such as medals and ribbons, are traditionally part of the annual party attire. \n\nHonorary ribbons are worn over the right shoulder across your chest to the left. In a suit they go under the vest. When wearing a tie, the honorary ribbon should go in front of the tie. Honorary ribbons can also be folded into a rosette to be attached to your left lapel. They should not be in touch with the skin. The decoration of the highest value or representing the biggest organization should be placed on the top (for example student union TYY’s ribbon should be first of the decorations). \n\nMember ribbon is worn yellow stripe on upwards. Decorations should be worn according to the recommendations of the organization that bestowed them. Asteriski member ribbon should not be used at the same time as Asteriski honorary ribbon, ribbon of praise, and medal of praise. A white tie is not accessorized with a handkerchief while wearing decorations. \n\nIn our epic herring breakfast the dress code is much more casual. Dress according to the magic forest theme, the more chill and sillier the better! Or just come in your overalls. That’s good too.'
                 ],
                 right: ''
             },
@@ -50,7 +51,7 @@
             en: {
                 left: [
                     'Manners', 
-                    'The annual ball is a prestigious event, and you are expected to follow proper manners. Toastmaster’s and song master’s speeches should be followed quietly and attentively. However, outside the official program socializing with your tableside company is encouraged throughout the event. Guest speeches are saved for the dedicated slot in the official program and you may request permission from the toastmaster during scheduled breaks. Songs can also be requested from the song master during breaks only. Songs always start from silence and lyrics follow given songbooks; no extra verses are sung during the main event. \n\nYou may leave your table freely during the scheduled breaks. Otherwise, it’s polite to request permission from your closest tableside company. Don’t move during songs or speeches. \n\n Toasting is done after each song. Toast by lifting your glass and nodding towards the person you are toasting, preferably making eye contact. Start by toasting with the person across your right side, then left across you, and then straight in front of you. Never toast with an empty glass.'
+                    'The annual ball is a prestigious event, and you are expected to follow proper manners. Toastmaster’s and song master’s speeches should be followed quietly and attentively. However, outside the official program socializing with your tableside company is encouraged throughout the event. Guest speeches are saved for the dedicated slot in the official program and you may request permission from the toastmaster during scheduled breaks. Songs can also be requested from the song master during breaks only. Songs always start from silence and lyrics follow given songbooks; no extra verses are sung during the main event. \n\nYou may leave your table freely during the scheduled breaks. Otherwise, it’s polite to request permission from your closest tableside company. Don’t move during songs or speeches. \n\nToasting is done after each song. Toast by lifting your glass and nodding towards the person you are toasting, preferably making eye contact. Start by toasting with the person across your right side, then left across you, and then straight in front of you. Never toast with an empty glass.'
                 ],
                 right: ''
             },
@@ -70,5 +71,6 @@
 <Posts {lang} posts={data.posts}/>
 <Menu {lang}/>
 <Program {lang} title={etiquetteTitle} texts={etiquette} id={'etiquette'}/>
+<Sillis {lang}/>
 <Logofarm />
 <Footer {lang}/>
diff --git a/src/routes/tesmi/en/ilmo/+page.server.js b/src/routes/tesmi/en/ilmo/+page.server.js
@@ -57,9 +57,19 @@ export const actions = {
         const res = await response.json();
 
         if (response.ok) {
-            return { 
-                success: true,
-            };
+            const apiResponse = await fetch('https://api.viiskyt.asteriski.fi/api/participants/');
+            let participants = [];
+            if (apiResponse.ok) {
+                participants = await apiResponse.json();
+                return { 
+                    success: true,
+                    participants
+                };
+            } else {
+                return {
+                    success: true
+                }
+            }
         }
         if (res?.non_field_errors && Array.isArray(res.non_field_errors) && res?.non_field_errors[0] === 'Ilmoittautuminen ei ole auki') {
             return fail(400, {