From e18b973dcd11b8f1257aaa739f5e858762cdd2a0 Mon Sep 17 00:00:00 2001
From: Karnikaa Velumani <60043611+karnikaavelumani@users.noreply.github.com>
Date: Mon, 22 May 2023 12:29:58 -0700
Subject: [PATCH] Create /wave2 board applications (#861)

* Create acmcsuf.com/wave2

- Remove /s23positions
- Update board tier list
- Add new positions

* Run `npm run all`

* Fix nits

* Fix website check

* Fix playwright test
---
 src/lib/public/board/data/tiers.json          |   3 +-
 src/lib/public/links/links.json               |   3 +-
 src/routes/(site)/s23positions/+page.svelte   | 134 -------------
 src/routes/(site)/s23positions/page.test.ts   |   8 -
 src/routes/(site)/wave2/+page.svelte          | 176 ++++++++++++++++++
 .../(site)/{s23positions => wave2}/data.ts    |  61 +++++-
 src/routes/(site)/wave2/page.test.ts          |   8 +
 .../position-list.svelte                      |   0
 .../{s23positions => wave2}/position.svelte   |  11 +-
 .../{s23positions => wave2}/position.ts       |   3 +-
 10 files changed, 254 insertions(+), 153 deletions(-)
 delete mode 100644 src/routes/(site)/s23positions/+page.svelte
 delete mode 100644 src/routes/(site)/s23positions/page.test.ts
 create mode 100644 src/routes/(site)/wave2/+page.svelte
 rename src/routes/(site)/{s23positions => wave2}/data.ts (73%)
 create mode 100644 src/routes/(site)/wave2/page.test.ts
 rename src/routes/(site)/{s23positions => wave2}/position-list.svelte (100%)
 rename src/routes/(site)/{s23positions => wave2}/position.svelte (90%)
 rename src/routes/(site)/{s23positions => wave2}/position.ts (83%)

diff --git a/src/lib/public/board/data/tiers.json b/src/lib/public/board/data/tiers.json
index 17b52437b..d3d4edaef 100644
--- a/src/lib/public/board/data/tiers.json
+++ b/src/lib/public/board/data/tiers.json
@@ -25,5 +25,6 @@
   "Game Dev Team Lead": { "id": 25, "index": 1170 },
   "Game Dev Officer": { "id": 26, "index": 1180 },
   "Nodebuds Officer": { "id": 22, "index": 1200 },
-  "ICC Representative": { "id": 23, "index": 1250 }
+  "ICC Representative": { "id": 23, "index": 1250 },
+  "Web Officer": { "id": 27, "index": 1300 }
 }
diff --git a/src/lib/public/links/links.json b/src/lib/public/links/links.json
index 96bc75482..5e4fe579e 100644
--- a/src/lib/public/links/links.json
+++ b/src/lib/public/links/links.json
@@ -51,5 +51,6 @@
   "api-meeting-deck": "https://docs.google.com/presentation/d/1kXMse3folOF6iIxoe87lZ_5ZgvhkWHazsJRtoR5VXws/edit?usp=sharing",
   "pm-resources": "https://enormous-guarantee-b83.notion.site/PM-Resources-Public-c75a990ff0a34137be05cde66ce00be4",
   "student-pack": "/blog/806",
-  "wave1apply": "https://forms.gle/FMvmhhUb5vkNDbsC8"
+  "wave1apply": "https://forms.gle/FMvmhhUb5vkNDbsC8",
+  "wave2apply": "https://forms.gle/DMrhZjsGqE91xujY8"
 }
diff --git a/src/routes/(site)/s23positions/+page.svelte b/src/routes/(site)/s23positions/+page.svelte
deleted file mode 100644
index 7ad274e7c..000000000
--- a/src/routes/(site)/s23positions/+page.svelte
+++ /dev/null
@@ -1,134 +0,0 @@
-<script lang="ts">
-  import { MetaTags } from 'svelte-meta-tags';
-  import Block from '$lib/components/block/block.svelte';
-  import Button from '$lib/components/button/button.svelte';
-  import Spacing from '$lib/public/legacy/spacing.svelte';
-  import { TextAlignment } from '$lib/public/text-alignment/text-alignment';
-
-  import PositionList from './position-list.svelte';
-  import { POSITIONS } from './data';
-
-  function expandAll() {
-    const positions = document.querySelectorAll('.position');
-    positions.forEach((el) => el.setAttribute('open', 'true'));
-  }
-</script>
-
-<svelte:head>
-  <title>Spring 2023 board applications | ACM at CSUF</title>
-</svelte:head>
-
-<MetaTags
-  openGraph={{
-    title: 'Spring 2023 board applications',
-    description:
-      'Listed below are the positions that are open for the Spring 2023 semester. Please read the descriptions carefully and apply for the position(s) that you are interested in. You may apply for multiple positions, but you may only be selected for one. If you are selected for a position, you will be contacted by the current board member in charge of that position.',
-    url: 'https://acmcsuf.com/s23positions',
-    type: 'article',
-    article: {
-      publishedTime: '2023-19-01T00:00:00.000Z',
-      modifiedTime: '2023-19-01T00:00:00.000Z',
-    },
-  }}
-/>
-
-<Spacing --min="175px" --med="200px" --max="200px" />
-
-<Block align={TextAlignment.LEFT}>
-  <h1 slot="headline" class="size-lg">Spring 2023 board applications</h1>
-  <p slot="text" class="size-sm">
-    Listed below are the positions that are open for the Spring 2023 semester. Please read the
-    descriptions carefully and apply for the position(s) that you are interested in. You may apply
-    for multiple positions, but you may only be selected for one. If you are selected for a
-    position, you will be contacted by the current board member in charge of that position.
-    <br />
-    <br />
-    Last updated January 19th, 2023
-    <br />
-    <br />
-    <span class="center-btn" on:click={expandAll} on:keypress={expandAll}>
-      <Button text="Expand all!" />
-    </span>
-  </p>
-</Block>
-
-<section class="positions-container">
-  <div class="positions-container-inner">
-    <PositionList data={POSITIONS} />
-  </div>
-</section>
-
-<Spacing --med="64px" />
-
-<span class="center-btn">
-  <Button link="/s23apply" text="Apply now!" />
-</span>
-
-<Spacing --med="64px" />
-
-<Block align={TextAlignment.LEFT}>
-  <h1 id="contact-information" slot="headline" class="size-lg">Contact information</h1>
-  <div slot="text" class="contact-text">
-    <p class="size-sm">
-      <span class="brand-italic"
-        >Feel free to contact the ACM Executive Board if you have questions.</span
-      >
-    </p>
-
-    <p class="size-sm">
-      <span class="brand-em">Karnikaa Velumani (ACM President)</span>
-    </p>
-    <ul>
-      <li>Email: <code>karnikaavelumani@csu.fullerton.edu</code></li>
-      <li>Discord: <code>Karbas#0001</code></li>
-    </ul>
-
-    <p>
-      <span class="brand-em">Ethan Davidson (ACM VP / Webmaster)</span>
-    </p>
-    <ul>
-      <li>Email: <code>ethandavidson@csu.fullerton.edu</code></li>
-      <li>Discord: <code>EthanThatOneKid#3456</code></li>
-    </ul>
-  </div>
-</Block>
-
-<Spacing --min="40px" --med="95px" --max="120px" />
-
-<style lang="scss">
-  .page-body {
-    width: 100%;
-    margin: 0 1rem;
-  }
-
-  .center-btn {
-    display: flex;
-    justify-content: center;
-  }
-
-  .contact-text ul {
-    padding: 0 0 0 1rem;
-  }
-
-  .positions-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .positions-container-inner {
-    margin: 0 24px;
-    width: 100%;
-  }
-
-  @media (min-width: 768px) {
-    .positions-container {
-      margin-top: 2rem;
-    }
-
-    .positions-container-inner {
-      max-width: 64ch;
-      margin: 0 1rem;
-    }
-  }
-</style>
diff --git a/src/routes/(site)/s23positions/page.test.ts b/src/routes/(site)/s23positions/page.test.ts
deleted file mode 100644
index 3898fca63..000000000
--- a/src/routes/(site)/s23positions/page.test.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test.describe.configure({ mode: 'parallel' });
-
-test('s23positions page has expected h1', async ({ page }) => {
-  await page.goto('/s23positions');
-  expect(await page.textContent('h1')).toBe('Spring 2023 board applications');
-});
diff --git a/src/routes/(site)/wave2/+page.svelte b/src/routes/(site)/wave2/+page.svelte
new file mode 100644
index 000000000..4e801adfd
--- /dev/null
+++ b/src/routes/(site)/wave2/+page.svelte
@@ -0,0 +1,176 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { MetaTags } from 'svelte-meta-tags';
+  import Block from '$lib/components/block/block.svelte';
+  import Button from '$lib/components/button/button.svelte';
+  import Spacing from '$lib/public/legacy/spacing.svelte';
+  import { TextAlignment } from '$lib/public/text-alignment/text-alignment';
+  import PositionList from './position-list.svelte';
+  import { POSITIONS } from './data';
+
+  /**
+   * positions is the list of position elements.
+   */
+  let positions: HTMLDialogElement[] | null = null;
+
+  /**
+   * expanded is true when every position is open.
+   */
+  let expanded = false;
+
+  /**
+   * checkExpanded tests whether a set of positions are expanded.
+   */
+  function checkExpanded() {
+    expanded = positions !== null && positions.every((el) => el.hasAttribute('open'));
+  }
+
+  /**
+   * action is done each time the user clicks the primary button.
+   */
+  function action() {
+    if (positions === null) {
+      return;
+    }
+
+    // Defers checkExpanded for after this function is called,
+    // no matter the path this function continues to take.
+    setTimeout(checkExpanded);
+
+    if (expanded) {
+      positions.forEach((el) => el.removeAttribute('open'));
+      return;
+    }
+
+    positions.forEach((el) => el.setAttribute('open', 'true'));
+  }
+
+  onMount(() => {
+    positions = [...document.querySelectorAll<HTMLDialogElement>('.position')];
+  });
+</script>
+
+<svelte:head>
+  <title>Wave 2 board applications | ACM at CSUF</title>
+</svelte:head>
+
+<MetaTags
+  openGraph={{
+    title: 'Fall 2023 board applications',
+    description:
+      'Listed below are the positions that are open for the Fall 2023 semester. Please read the descriptions carefully and apply for the position(s) that you are interested in. You may apply for multiple positions, but you may only be selected for one. If you are selected for a position, you will be contacted by the current board member in charge of that position.',
+    url: 'https://acmcsuf.com/wave2',
+    type: 'article',
+    article: {
+      publishedTime: '2023-22-05T00:00:00.000Z',
+      modifiedTime: '2023-22-05T00:00:00.000Z',
+    },
+  }}
+/>
+
+<Spacing --min="175px" --med="200px" --max="200px" />
+
+<Block align={TextAlignment.LEFT}>
+  <h1 slot="headline" class="size-lg">Wave 2 board applications</h1>
+  <p slot="text" class="size-sm">
+    Listed below are the positions that are open for the Fall 2023 semester (semester long
+    position). Please read the descriptions carefully and apply for the position(s) that you are
+    interested in. You may apply for multiple positions, but you may only be selected for one. If
+    you are selected for a position, you will be contacted by the current board member in charge of
+    that position.
+    <br />
+    <br />
+    Last updated May 22nd, 2023
+    <br />
+    <br />
+    <span class="center-btn" on:click={action} on:keypress={action}>
+      <Button text={`${expanded ? 'Close all.' : 'Expand All!'}`} />
+    </span>
+  </p>
+</Block>
+
+<section class="positions-container">
+  <div
+    class="positions-container-inner"
+    on:click={() => setTimeout(checkExpanded)}
+    on:keypress={() => setTimeout(checkExpanded)}
+  >
+    <PositionList data={POSITIONS} />
+  </div>
+</section>
+
+<Spacing --med="64px" />
+
+<span class="center-btn">
+  <Button link="/wave2apply" text="Apply now!" />
+</span>
+
+<Spacing --med="64px" />
+
+<Block align={TextAlignment.LEFT}>
+  <h1 id="contact-information" slot="headline" class="size-lg">Contact information</h1>
+  <div slot="text" class="contact-text">
+    <p class="size-sm">
+      <span class="brand-italic"
+        >Feel free to contact the ACM Executive Board if you have questions.</span
+      >
+    </p>
+
+    <p class="size-sm">
+      <span class="brand-em">Karnikaa Velumani (ACM President)</span>
+    </p>
+    <ul>
+      <li>Email: <code>karnikaavelumani@csu.fullerton.edu</code></li>
+      <li>Discord: <code>Karbas#0001</code></li>
+    </ul>
+
+    <p class="size-sm">
+      <span class="brand-em">Ethan Davidson (ACM VP / Webmaster)</span>
+    </p>
+    <ul>
+      <li>Email: <code>ethandavidson@csu.fullerton.edu</code></li>
+      <li>Discord: <code>EthanThatOneKid#3456</code></li>
+    </ul>
+  </div>
+</Block>
+
+<Spacing --min="40px" --med="95px" --max="120px" />
+
+<style lang="scss">
+  .page-body {
+    width: 100%;
+    margin: 0 1rem;
+  }
+
+  .center-btn {
+    display: flex;
+    justify-content: center;
+  }
+
+  .contact-text ul {
+    padding: 0 0 0 1rem;
+  }
+
+  .positions-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .positions-container-inner {
+    margin: 0 24px;
+    width: 100%;
+    margin: 2rem 2rem 0;
+  }
+
+  @media (min-width: 768px) {
+    .positions-container {
+      margin-top: 2rem;
+    }
+
+    .positions-container-inner {
+      max-width: 64ch;
+      margin: 0 1rem;
+    }
+  }
+</style>
diff --git a/src/routes/(site)/s23positions/data.ts b/src/routes/(site)/wave2/data.ts
similarity index 73%
rename from src/routes/(site)/s23positions/data.ts
rename to src/routes/(site)/wave2/data.ts
index f3934157c..41eeeb935 100644
--- a/src/routes/(site)/s23positions/data.ts
+++ b/src/routes/(site)/wave2/data.ts
@@ -17,10 +17,59 @@ export const TOOLS = {
 };
 
 export const POSITIONS: ClubPosition<keyof typeof TOOLS>[] = [
+  {
+    title: 'Secretary',
+    teamColor: 'var(--acm-general-rgb)',
+    qualifications: [
+      li('Organizational and time management skills'),
+      li('Interest in helping the executive board with administrative tasks'),
+      li('Commitment to the providing information to the club members'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'Social media'],
+    responsibilities: [
+      li(
+        'Check emails daily and report to the President and Vice President of any important emails'
+      ),
+      li('Take notes during board meetings and send them to the board members'),
+      li('Assist in room booking for events'),
+      li('Outreach to companies for collaborative events or sponsorships'),
+    ],
+  },
+  {
+    title: 'Event Coordinator',
+    teamColor: 'var(--acm-general-rgb)',
+    qualifications: [
+      li('Interest in event planning and management'),
+      li('Interest in public speaking/leading events - Strong communication skills'),
+      li('Passionate for inclusion and increasing student engagement'),
+      li('Creative and innovative'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'Social media'],
+    responsibilities: [
+      li('Plan and organize socials and technical events every Friday at 5pm'),
+      li('Collaborate with other ACM branches to host events'),
+      li('Work with the Secretary to book rooms for events and other logistics'),
+    ],
+  },
+  {
+    title: 'Web Officer',
+    teamColor: 'var(--acm-general-rgb)',
+    qualifications: [
+      li('Passion for web development and open source projects'),
+      li('Open to learning new technologies'),
+      li('Ability to work in a team and to teach others'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'GitHub'],
+    responsibilities: [
+      li('Work closely with the Webmaster to maintain the ACM website and OSS projects'),
+      li('Understand the Git workflow and be able to teach it to others'),
+      li('Attend weekly meetings and provide updates on projects'),
+    ],
+  },
   {
     title: 'AI Officer',
     teamColor: 'var(--acm-ai-rgb)',
-    requirements: [
+    qualifications: [
       li('Interest in artificial intelligence'),
       li('Interest in public speaking/leading events'),
       li('Passion for guiding AI related student projects'),
@@ -39,7 +88,7 @@ export const POSITIONS: ClubPosition<keyof typeof TOOLS>[] = [
   {
     title: 'Algo Officer',
     teamColor: 'var(--acm-algo-rgb)',
-    requirements: [
+    qualifications: [
       li('Passion for algorithms'),
       li('Productive time management'),
       li('Interest in public speaking and leading events'),
@@ -58,7 +107,7 @@ export const POSITIONS: ClubPosition<keyof typeof TOOLS>[] = [
   {
     title: 'Design Officer',
     teamColor: 'var(--acm-design-rgb)',
-    requirements: [
+    qualifications: [
       li('Open mind to suggest new ideas in the field of design'),
       li('Interest in learning and teaching common apps (ex. Figma)'),
       li('Interest in programming to create basic front-end applications'),
@@ -80,7 +129,7 @@ export const POSITIONS: ClubPosition<keyof typeof TOOLS>[] = [
   {
     title: 'Dev Officer',
     teamColor: 'var(--acm-dev-rgb)',
-    requirements: [
+    qualifications: [
       li('Passion for helping students develop projects'),
       li('Strong communication and leadership'),
       li('Flexibility with skills to assist students in a variety of projects'),
@@ -108,7 +157,7 @@ export const POSITIONS: ClubPosition<keyof typeof TOOLS>[] = [
   {
     title: 'Game Dev Officer',
     teamColor: 'var(--acm-gamedev-rgb)',
-    requirements: [
+    qualifications: [
       li('Passion and interest in game development'),
       li('Strong communication and leadership'),
       li('Flexibility with skills to assist students in a variety of projects'),
@@ -133,7 +182,7 @@ export const POSITIONS: ClubPosition<keyof typeof TOOLS>[] = [
   {
     title: 'Marketing Officer',
     teamColor: 'var(--acm-marketing-rgb)',
-    requirements: [
+    qualifications: [
       li('Interest in exploring business and marketing'),
       li('Substantial awareness or usage of multiple social media platforms'),
       li('Represent and advocate diversity within the club'),
diff --git a/src/routes/(site)/wave2/page.test.ts b/src/routes/(site)/wave2/page.test.ts
new file mode 100644
index 000000000..f6a21c215
--- /dev/null
+++ b/src/routes/(site)/wave2/page.test.ts
@@ -0,0 +1,8 @@
+import { expect, test } from '@playwright/test';
+
+test.describe.configure({ mode: 'parallel' });
+
+test('wave2 page has expected h1', async ({ page }) => {
+  await page.goto('/wave2');
+  expect(await page.textContent('h1')).toBe('Wave 2 board applications');
+});
diff --git a/src/routes/(site)/s23positions/position-list.svelte b/src/routes/(site)/wave2/position-list.svelte
similarity index 100%
rename from src/routes/(site)/s23positions/position-list.svelte
rename to src/routes/(site)/wave2/position-list.svelte
diff --git a/src/routes/(site)/s23positions/position.svelte b/src/routes/(site)/wave2/position.svelte
similarity index 90%
rename from src/routes/(site)/s23positions/position.svelte
rename to src/routes/(site)/wave2/position.svelte
index 4d0731ecb..9082e096c 100644
--- a/src/routes/(site)/s23positions/position.svelte
+++ b/src/routes/(site)/wave2/position.svelte
@@ -17,9 +17,16 @@
   </summary>
 
   <div class="position__body">
+    <div class="position__qualifications">
+      <h3 class="headers">Qualifications</h3>
+      <RecursiveUL data={data.qualifications} />
+    </div>
+
     <div class="position__requirements">
-      <h3 class="headers">What you need</h3>
-      <RecursiveUL data={data.requirements} />
+      {#if data.requirements}
+        <h3 class="headers">Requirements</h3>
+        <RecursiveUL data={data.requirements} />
+      {/if}
     </div>
 
     <p class="position__tools">
diff --git a/src/routes/(site)/s23positions/position.ts b/src/routes/(site)/wave2/position.ts
similarity index 83%
rename from src/routes/(site)/s23positions/position.ts
rename to src/routes/(site)/wave2/position.ts
index 39bab984c..a9d807e14 100644
--- a/src/routes/(site)/s23positions/position.ts
+++ b/src/routes/(site)/wave2/position.ts
@@ -4,7 +4,8 @@ import type { TIERS } from '$lib/public/board/data';
 export interface ClubPosition<ToolNames extends string = string> {
   title: keyof typeof TIERS;
   teamColor: string;
-  requirements: ListItem[];
+  qualifications: ListItem[];
+  requirements?: ListItem[];
   tools: ToolNames[];
   responsibilities: ListItem[];
 }