master <- develop: pimpage front

README.md

@@ -1,32 +1,32 @@
 # Homeless-front
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.3.
+Display a list of all the shelters available to the homeless people.  
+The number of available beds will be displayed next to each shelter.  
+The numbers will be updated live by the owners of the shelters.  
+A list of various available services (syringes, food location, ...) will be displayed to the homeless people along with the current state of the service.  
+This PWA is installable on your devices. This allows you to access the different features while offline.  
+No direct communication between the user and the admin of the shelters is allowed for "political reasons".  
 
-## Development server
+## Techno
 
-Run `npm install` to install all dependencies.  
+Project made with:  
+- Spring Boot 1 (No Webflux)
+- Swagger
+- Angular
+- PostgresQL
+- Maven
+- CircleCI 
+- Github Action
+- Docker
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+See project front hosted on github pages: [front](https://homeless.project.lambla.eu)  
+See project backend (swagger) hosted on a personal swarm cluster: [swagger](https://homeless-api.project.lambla.eu/swagger-ui.html#/)  
 
-## Code scaffolding
+## Call for contributions
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+If you want to contribute to this project, please see our [agile board](https://github.com/orgs/dans-la-rue/projects) on github an feel free to raise any PR or issues.  
+Thanks in advance,  
+Any help will be welcome =) 
 
 
 ## documentation
@@ -36,3 +36,9 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
 [paperkit components](https://demos.creative-tim.com/paper-kit-2-angular/#/home)  
 
 
+## inspirations and sources
+
+[demo project for ngrx](https://stackblitz.com/github/duncanhunter/angular-and-ngrx-demo-app/tree/20-create-effects?file=src%2Fapp%2Fevent%2Fstate%2Fattendees%2Fattendees.effects.ts)  
+[another ngrx demo](https://github.com/mike1477/NGRX-Products/tree/master/src/app/products/store)  
+
+

package.json

@@ -28,6 +28,8 @@
     "@angular/router": "9.0.6",
     "@angular/service-worker": "9.0.6",
     "@ng-bootstrap/ng-bootstrap": "6.0.0",
+    "@ngrx/effects": "^9.1.0",
+    "@ngrx/store": "^9.1.0",
     "bootstrap": "4.1.2",
     "core-js": "3.6.4",
     "jquery": "3.2.1",

src/app/actions/shelters.action.ts

@@ -0,0 +1,11 @@
+import {createAction, props} from '@ngrx/store';
+import {Shelter} from '../models/Shelter.models';
+
+export const deleteShelter = createAction('[test] Delete a shelter', props<{ shelterId: number }>());
+export const getAllShelters = createAction('[Shelters Page] Load Shelters');
+export const addShelter = createAction('[Shelters Page] Add Shelter', props<{ shelter: Shelter }>());
+export const updateShelter = createAction('[Shelters Page] Update shelter', props<{ shelter: Shelter }>());
+export const successAddShelter = createAction('[Shelters Page] Shelter added', props<{ shelter: Shelter }>());
+export const successUpdateShelter = createAction('[Shelters Page] Shelter updated', props<{ shelter: Shelter }>());
+export const successGetAllShelters = createAction('[Shelters Page] Shelters loaded', props<{ sheltersList: Shelter[] }>());
+export const successDeleteShelter = createAction('[Shelters Page] Shelters deleted');

src/app/app.module.ts

@@ -13,6 +13,10 @@ import {ComponentsModule} from './components/components.module';
 import {SheltersModule} from './shelters/shelters.module';
 import {ServiceWorkerModule} from '@angular/service-worker';
 import {environment} from '../environments/environment';
+import {EffectsModule} from '@ngrx/effects';
+import {SheltersEffects} from './effects/shelters.effect';
+import {StoreModule} from '@ngrx/store';
+import {sheltersReducer} from './reducers/shelters.reducer';
 
 
 @NgModule({
@@ -30,6 +34,8 @@ import {environment} from '../environments/environment';
     SheltersModule,
     AppRoutingModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+    EffectsModule.forRoot([SheltersEffects]),
+    StoreModule.forRoot({sheltersList: sheltersReducer})
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/effects/shelters.effect.ts

@@ -0,0 +1,66 @@
+import {EMPTY} from 'rxjs';
+import {Actions, createEffect, ofType} from '@ngrx/effects';
+import {catchError, map, mergeMap} from 'rxjs/operators';
+import {Injectable} from '@angular/core';
+import {SheltersService} from '../services/shelters.service';
+import {
+  addShelter,
+  deleteShelter,
+  getAllShelters,
+  successAddShelter,
+  successDeleteShelter,
+  successGetAllShelters,
+  successUpdateShelter,
+  updateShelter
+} from '../actions/shelters.action';
+
+@Injectable()
+export class SheltersEffects {
+
+  deleteShelter$ = createEffect(() => this.actions$.pipe(
+    ofType(deleteShelter),
+    mergeMap((action) => this.sheltersService.deleteShelter(action.shelterId)
+      .pipe(
+        map(sheltersList => successDeleteShelter()),
+        map(sheltersList => {
+          console.log('test', sheltersList);
+          return sheltersList;
+        }),
+        catchError(() => EMPTY)
+      ))
+    )
+  );
+
+  updateShelter$ = createEffect(() => this.actions$.pipe(
+    ofType(updateShelter),
+    mergeMap((action) => this.sheltersService.updateShelter(action.shelter)
+      .pipe(
+        map(shelter => successUpdateShelter({shelter: shelter})),
+        catchError(() => EMPTY)
+      ))
+    )
+  );
+
+  addShelter$ = createEffect(() => this.actions$.pipe(
+    ofType(addShelter),
+    mergeMap((action) => this.sheltersService.addShelter(action.shelter)
+      .pipe(
+        map(shelter => successAddShelter({shelter: shelter})),
+        catchError(() => EMPTY)
+      ))
+    )
+  );
+
+  sheltersList$ = createEffect(() => this.actions$.pipe(
+    ofType(getAllShelters),
+    mergeMap(() => this.sheltersService.getAllShelters()
+      .pipe(
+        map(sheltersList => successGetAllShelters({sheltersList})),
+        catchError(() => EMPTY)
+      ))
+    )
+  );
+
+  constructor(private actions$: Actions, private sheltersService: SheltersService) {
+  }
+}

src/app/models/Shelter.models.ts

@@ -1,5 +1,5 @@
 export interface Shelter {
-  id
-  address
-  availableBeds
+  id: number
+  address: string
+  availableBeds: number
 }

src/app/reducers/shelters.reducer.ts

@@ -0,0 +1,56 @@
+import {createReducer, on} from '@ngrx/store';
+import {
+  addShelter,
+  deleteShelter,
+  getAllShelters,
+  successAddShelter,
+  successDeleteShelter,
+  successGetAllShelters, successUpdateShelter, updateShelter
+} from '../actions/shelters.action';
+import {Shelter} from '../models/Shelter.models';
+
+export let sheltersList: Shelter[] = undefined;
+
+const _counterReducer = createReducer(sheltersList,
+  on(successDeleteShelter, (state) => {
+    console.log('shelter deleted reducer');
+    return sheltersList;
+  }),
+  on(successUpdateShelter, (state, action) => {
+    console.log('shelter updated reducer', action.shelter);
+    return sheltersList;
+  }),
+  on(successAddShelter, (state, action) => {
+    console.log('shelter added reducer', action.shelter);
+    sheltersList = [...sheltersList, action.shelter];
+    return sheltersList;
+  }),
+  on(successGetAllShelters, (state, action) => {
+    console.log('get all shelters loaded reducer', action.sheltersList);
+    sheltersList = action.sheltersList;
+    return sheltersList;
+  }),
+  on(getAllShelters, (state) => {
+    console.log('get all shelters reducer', state);
+    // console.log('list', action.sheltersList);
+    // sheltersList = action.sheltersList;
+    return sheltersList;
+  }),
+  on(updateShelter, (state, action) => {
+    console.log('update reducer');
+    return sheltersList;
+  }),
+  on(addShelter, (state, action) => {
+    console.log('add reducer');
+    return sheltersList;
+  }),
+  on(deleteShelter, (state, action) => {
+    console.log('delete reducer', action.shelterId);
+    sheltersList = sheltersList.filter(value => value.id != action.shelterId);
+    return sheltersList;
+  })
+);
+
+export function sheltersReducer(state, action) {
+  return _counterReducer(state, action);
+}

src/app/services/shelters.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SheltersService } from './shelters.service';
+
+describe('SheltersService', () => {
+  let service: SheltersService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SheltersService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/shelters.service.ts

@@ -0,0 +1,62 @@
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {Shelter} from '../models/Shelter.models';
+import {ShelterList} from '../models/ShelterList.models';
+import {environment} from '../../environments/environment';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SheltersService {
+
+  private credentials = 'admin:nimda';
+  private httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Authorization': 'Basic ' + btoa(this.credentials)
+    })
+  };
+  private uri = 'api/v1/shelters';
+  private url = environment.baseUrl + '/' + this.uri;
+  private shelterList$: Observable<Shelter[]>;
+
+  constructor(private _httpClient: HttpClient) {
+  }
+
+  /**
+   * add a shelter
+   */
+  addShelter(shelter: Shelter) {
+    return this._httpClient.post<Shelter>(this.url, shelter, this.httpOptions);
+  }
+
+  /**
+   * delete a shelter
+   */
+  deleteShelter(id: number) {
+    return this._httpClient.delete<Shelter>(this.url + '/' + id, this.httpOptions);
+  }
+
+  /**
+   * update a specific shelter
+   */
+  updateShelter(shelter: Shelter) {
+    return this._httpClient.put<Shelter>(this.url + '/' + shelter.id, shelter, this.httpOptions);
+  }
+
+  /**
+   * fetch all the shelters
+   */
+  getAllShelters(): Observable<Shelter[]> {
+    this.shelterList$ = this._httpClient.get<ShelterList>(this.url, this.httpOptions)
+      .pipe(
+        map((sheltersList: ShelterList) => {
+            return sheltersList.content;
+          }
+        )
+      );
+    return this.shelterList$;
+  }
+}

src/app/shared/footer/footer.component.html

@@ -3,12 +3,12 @@
         <div class="row">
             <nav class="footer-nav">
                 <ul>
-                    <li><a href="https://www.creative-tim.com/license">Licenses</a></li>
+                    <li><a href="https://opensource.org/licenses/MIT">Licenses</a></li>
                 </ul>
             </nav>
             <div class="credits ml-auto">
                 <span class="copyright">
-                    © {{test | date: 'yyyy'}}, made with <i class="fa fa-heart heart"></i> by Damien Lambla with a template from Creative Tim
+                    © {{test | date: 'yyyy'}}, made with <i class="fa fa-heart heart"></i> by Damien Lambla and Vincent Arnal with a template from Creative Tim
                 </span>
             </div>
         </div>