This is the repository for the Brock University Computer Science Club web page.

• Angular CLI: 12.1.1
• Package Version
• @angular-devkit/architect 0.1201.1
• @angular-devkit/build-angular 12.1.1
• @angular-devkit/core 12.1.1
• @angular-devkit/schematics 12.1.1
• @angular/fire 6.1.5
• @schematics/angular 12.1.1
• rxjs 6.6.7
• typescript 4.3.5
• webpack 5.44.0

Dev env: https://brockcsc-test.firebaseapp.com

• Node >= v12.14.0
• npm >= 6.13.4

• First run npm install from the terminal. This will install all the required packages into the node_modules folder in the root directory.

• To run a development server, run npm run start.
• This will spawn a server which can be accessed from http://localhost:8080.
• If wanting to lazy load images from the assets folder, run npm run gen:img. This will generate a file which can be located at src/tmp/assets.json. The file contains the configs for the images which then can be used within the app.

• In order to build the site, run npm run build. This generates a dist folder in the root directory which will contain the minimized version of the site.
• This will also run a postbuild script that will generate a serviceworker which will provide the PWA capabilities for the site.

• You will need firebase cli installed. See https://firebase.google.com/docs/cli.
• Use firebase login to login with the brock csc gmail account.
• run npm run prod:dev to deploy. This deploys the website on the brockcsc-test firebase project, which can be viewed at https://brockcsc-test.firebaseapp.com/

• Create a pull request/push to the production branch of this repository. This triggers GitHub actions deployment script, which should build and deploy the project in the master branch, and will then be available at brockcsc.github.io or brockcsc.ca

Make sure that your module is importing the SharedModule.

<csc-upload></csc-upload>

Make sure that your module is importing the SharedModule.

<csc-modal>
  <csc-modal-header>
    <!-- Modal Header -->
  </csc-modal-header>
  <csc-modal-body>
    <!-- Modal Body -->
  </csc-modal-body>
  <csc-modal-footer>
    <!-- Modal Footer -->
  </csc-modal-footer>
</csc-modal>

There are two ways to programatically open and close the modal.

1. Access the modal component using local variables from the parent component

<button (click)="modalAccessor.open()">Open Modal</button>
<csc-modal #modalAccessor> ...</csc-modal>

2. Trigger using the ViewChild reference from the parent component.

<button (click)="openModal()">Open Modal</button>
<csc-modal #modalAccessor> ...</csc-modal>

import { ViewChild } from '@angular/core';
@ViewChild('modalAccessor') modal: ModalComponent;
public openModal(): void {
    this.modal.open();
}

Make sure that your module is importing the SharedModule.

<csc-input-container label="label" labelLocation="left">
  <input type="text" />
</csc-input-container>

Make sure that your module is importing the SharedModule.

<csc-checkbox>
  <input type="checkbox" />
</csc-checkbox>

Make sure that your module is importing the SharedModule.

<!-- Host -->
<div id="someId"></div>

<!-- Tooltip, forId and host id must match -->
<csc-tooltip forId="someId" direction="right">
  <p>Some HTML content</p>
</csc-tooltip>

To use the csc button, a csc-button attribute needs to be added to either an a or button tag.

<button csc-button>Text</button>

<a csc-button>Text</a>

Simple progress bar with a binding for current progress value.

<csc-progress-bar progress="25" color="navy"></csc-progress-bar>

Simple loader component that has no functionality. Use with *ngIf to manage whether it is displayed or not.

<csc-spinner></csc-spinner>

Slideshow component, to be used with child Slide components. Intended to be used with csc-image.

The csc-slideshow must contain slides.

<csc-slideshow delay="2">
  <csc-slide>
    <!-- content -->
    <csc-img ...></csc-img>
  </csc-slide>
  <csc-slide>
    <!-- content -->
    <csc-img ...></csc-img>
  </csc-slide>
</csc-slideshow>