cichy380 / travelmaker Goto Github PK

SCSS files structure and theming system based on https://indepth.dev/tutorials/angular/angular-material-theming-system-complete-guide

Helpful materials:

• https://material.angular.io/guide/theming#themes
• https://material.angular.io/guide/theming-your-components

• add new field: Post code (optional)
• change name of field: Address to Street

Form validation based on API response with collection of form fields with errors

Add endpoint and correctness validation of data sent:

• PUT /destinations/<ID>

to edit existing item (Destination)

Browser app as native device app:

• add @angular/pwa
• service-worker
• app can be installed
• add custom icon

PWA
config Service Worker to cache request GET /destinations/{{USER-ID}}
clear SW cache when new Destination item is added/edited/deleted

• animated appearing of Destination items
• animated removing of Destination item

https://www.youtube.com/watch?v=h-bUT5BMQrI

DestinationModule - structure for main Nestjs module with first endpoints

• GET /destinations
• GET /destinations/<ID>

reorderable collection by draggable elements Drag and Drop module (@angular/cdk)

modifications to the Manifest file

• remove browser address bar
• change app name
• change colors
• change purpose of icons

Shortening variable names

• DayOfTheWeek -> Weekday
• DestinationListItemComponent -> DestListItemComponent
• DestinationListComponent -> DestListComponent

• split component DestinationFormComponent (create DestinationEditFormComponent and DestinationAddFormComponent)
• add editDestination action

Form component must implements CanDeactivate and if form has unsaved changes and user want to leave it app needs show ConfirmDialog.

Create module GoogleMaps providing service to generating URL to Google Map with driving directions. URL should be available in big button below Directions list.

URL example:
https://www.google.com/maps/dir/?api=1&waypoints=3+Maja,+95-200+Pabianice|Piotrkowska,+90-001+%C5%81%C3%B3d%C5%BA&destination=Nowy+%C5%9Awiat,+Warszawa&travelmode=driving&dir_action=navigate

• Add DestinationFormComponent
• Add addDestination action

Add endpoint:

• POST /destinations

to create new item (Destination)

It is a service for displaying snack-bar error notifications:

• Failed Add
• Failed Change desc/order
• Failed Delete

...maybe:

• Success Added
• Success Changed

Add endpoint:

• DELETE /destinations/<ID>

to remove item (Destination)

Form controls enhanced by a panel of suggested options based on values from state.

Component: Autocomplete

Animated information that request is pending.

For all requests:

• https://ngx-progressbar.netlify.app/

and when Destinations is not loaded yet, we will display the Destinations list instead:

• https://material.angular.io/components/progress-spinner/overview

In DestinationsComponent list of Destinations create by ngFor with trackBy:

<travelmaker-destination-list-item *ngFor="let dest of destinationsOfSelectedDay; trackBy trackByDestId" />

in controller:

public trackByDestId(_, destination) {
   return destination.id;
}

Dedicated View if Destinations List on some day is empty

Create empty, initial NestJS application inside Travemaker project.

npm install -D @nrwl/nest
nx g @nrwl/nest:app api --frontendProject travelmaker-app

Endpoint to change order of items (Destinations):

• PATCH /destinations

body: [ID1, ID2, ID3]

• add removeDestination action
• add confirmation of action

Sign In With Google

https://www.npmjs.com/package/ng-google-one-tap

Articles

• https://medium.com/@danilrabizo/google-authentication-in-the-angular-application-e86df69be58a
• https://nimatrazmjo.medium.com/implementing-google-one-tap-sign-in-using-angular-9-and-expressjs-bc78cf740d70

CSS scrolling shadows:

• Article: https://lea.verou.me/2012/04/background-attachment-local/
• CSS generator: https://css-scroll-shadows.vercel.app/