ng-schooldule
Tools
Demo
Setup
- Setup firestore:
- Go to firebase.google.com and login with your Google account
- Click 'Get Started'
- Click 'Add Project' and enter a project name
- Inside the 'Develop' menu under 'Authentication', select 'Sign-In Method' and enable 'Google' and 'Anonymous'
- Inside the 'Develop' menu, select 'Database' and click 'Try Firestore Beta'
- Under the 'Data' tab, click 'Add Collection' and title it 'Class'
- In the 'Class' collection, click 'Add Document' and enter class details with the following fields:
name | field |
---|---|
class | string |
title | string |
days** | Array[string] |
start* | timestamp |
end* | timestamp |
semester (optional) | string |
year (optional) | number |
* a note about timestamps
: The month/day/year of the timestamp doesn't matter
but make sure they are the same for all classes
or the firestore indexing might break.
** a note about days
: Use 'mon', 'tues', 'wed', 'thurs', 'fri', 'sat', 'sun'
- Under the 'Rules' tab, edit the rules to match:
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow write: if request.auth != null;
allow read: if true;
}
}
}
- Click the gear next to "Project Overview" on the sidebar and click 'Project Settings'
- Click 'Add Firebase to your web app' and copy these values into your
environment.ts
files, like so"
export const environment = {
production: false,
firebaseConfig: {
apiKey: 'some-token',
authDomain: 'some-domain',
databaseURL: 'some-url',
projectId: 'some-project-id',
storageBucket: 'some-storage-bucket',
messagingSenderId: 'some-sender-id'
}
};
-
Run
npm install firebase angularfire2 --save
andnpm install @rbwrightjr91/ng-schooldule
. -
Imports:
In app.module.ts
:
import { NgSchoolduleModule } from '@rbwrightjr91/ng-schooldule';
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
export const firebaseConfig = environment.firebaseConfig;
@NgModule({
imports: [
NgSchoolduleModule,
AngularFireModule.initializeApp(firebaseConfig)
]
})
- Usage:
<ng-schooldule [semester]="'Fall'" [year]='2018'></ng-schooldule>
inside your desiredcomponent.html
file.
If you'd like to contribute:
The module is located in the ng-schooldule
folder and imported into the root project so it can be served via Angular CLI.