Skip to content
/ medicalCentre Public

University project (TypeScript, Express, Angular, OAuth)

1 star 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

JulioJu/medicalCentre

BranchesTags

Repository files navigation

« Cabinet medical » project.

Back-end

How to delete too much database record

Use ./deleteTooMuchDatabaseRecord.sh

Important note

  • For HTTP PUT We don't test if there is too much POST params sent (as in ASP.NET CORE)

How to build and start OSRM server

Front-end

Routes

  • Routes described in ./back/README.md#Routes work thanks proxy ./front/proxy.conf.json.
  • /#/patients : GET all patients.
  • /#/nurses : GET all nurses.
  • /#/patient/:id : GET patient with id ":id"
  • /#/nurse/:id : GET nurse with id ":id"
  • Deletions:
    • Parameters:
      • :id is mandatory.
      • confirmation and stateDeletion are matrix parameters, (therefore optionals).
      • stateDeletion could have value:
        • "notTried"(display button to delete in the page)
        • "deleted" (button to delete not displayed)
        • "error" (display error message, button to delete not displayed)
        • Default "notTried".
      • confirmation could have value "true" or "false". If true, delete immediately. Default: false.
    • Routes:
      • /#/patient-delete/:id;confirmation=boolean:stateDeletion=string; : delete patient with id ":id"
      • /#/nurse-delete/:id;confirmation=boolean:stateDeletion=string; : delete nurse with id ":id"
  • /#/patient-form-proto : create a new patient (just for a form prototype, do nothing)
  • /#/patient-form : create a new patient
  • /#/nurse-form : create a new nurse
  • /#/patient-form/:id : PUT (edit) patient with id ":id"
  • /#/nurse-form/:id : PUT (edit) nurse with id ":id"
  • /#/ : home page.

N.B. Form fields are cached in SessionStorage to prevent the loss of data during navigation or page reload without submit. It's the default behaviour in Firefox for a simple HTML form (not Angular). For fields with value non empty, Angular Validation is performed.

Rest API for PUT an entity

  • Bare Mongo Client or Mongoose send

    • MongoError
    • IAbstract
    • DeleteWriteOpResultObject['result']
    • FindAndModifyWriteOpResultObject
    • ValidationError (only for mongoose) with HTTP Code 400 https://mongoosejs.com/docs/api.html#Error
    • ~~CastError (only for mongoose) with HTTP Code 400
      • Note: could be have only one CastError per result (I've tested)~~
      • use option multipleCastError that send ValidationError
    • Custom object with { e.error_message_origin: 'back'} with HTTP error 400
      • Only for mongonative error, check only mandatory parameters.
      • Not very well idea, should use Mongodb Schema instead, but Mongoose Validation is more powerful, more capabilities and definitions are more clear.
      • Not handle in Angular Front
    • => See also
      • ./back/app/entities/abstract/abstract.mongonative.service.ts
      • ./back/app/entities/abstract/abstract.mongoose.service.ts
      • ./back/app/entities/abstract/abstract.route.ts

  • On the Angular Client, this errors are properly displayed for each field and on the top of the form.

    • To test it, in submit button remove attribute 'disabled' thanks inspector tool in Firefox and enjoy ;-).
    • When we navigate, the red banner displayed at the front of the page is removed of the page

Create a service with Angular-cli

  • To create a new module with its service and component. With Angular-cli
    1. cd src/app/
    2. ng generate module ./entities/patient
    3. ng generate component ./entities/patient --module ./entities/patient/patient.module.ts
    4. ng generate service ./entities/patient/patient --module ./entities/patient/patient.module.ts

Observables

Slippy Map

OpenStreetMap solutions

How use Leaflet in an Angular app

Leaflet fullscreen

DON'T USE LEAFLET, USE OPENLAYERS

  • TODO IMPORTANT, USE OPENLAYERS, LEAFLET IS SO BAD !! COMPLETLY OUTDATED WRITTEN IN ES5, PROJECT NO DYNAMIC CONTRARY TO OPENLAYERS OPENLAYERS IS THE SOLUTION

OSRM and leaflet-routing-machine

See also iframe with metromobilite (for updated traffic info in Grenoble)

  • An interesting solution is to embedded the metromobilite iframe: 
    <!-- or `velo=true`, or `voiture=true' or `tc=true', can't be the third  -->
<!-- We can't inject script du to cross-domain rules -->
<!-- https://stackoverflow.com/questions/16194398/inject-a-javascript-function-into-an-iframe -->
<iframe src="https://www.metromobilite.fr/iti.html?dep=truc&arr=machin&lonlatDep=45.149,5.709965&lonlatArr=45.15857,5.70924&iFrame=true&tc=true" frameborder="0" width="100%" height="800"></iframe>
    Copyright: GNU Affero General Public License Contributors: NB/VT - sully-group - www.sully-group.fr - initialisation and implementation See https://www.metromobilite.fr/# (in developers tools) for more infos.

    • Website https://www.tag.fr/7-itineraire.htm use something an iframe ! I've discovered this utilisation thanks it ;-).

    • We could use REST API to use it ;-). So cool. Like it: https://www.metromobilite.fr/iti.html?lonlatDep=45.149,5.709965&lonlatArr=45.15857,5.70924

    • Interesting Note: use OpenLayers and not Leaflet

    • See also https://www.metromobilite.fr/pages/opendata/OpenDataApi.html#

    • To investigate the page, use wget -p -k https://www.metromobilite.fr/iti.html Do not download with Chromium or Firefox, as they don't download font, and it breaks the webpage.

    • Sadly, we can't inject script to change display cause of cross-domain rules. Therefore actually the better solution is to patch the app and server its own version of the app. License permit that.

    • I've sent a mail with the contact form under page opendata. I asked to add modes:

      Objet: Documentation et amélioration de la page iti.html

      Bonjour,

      J'ai regardé un peu comment était construit votre page https://www.metromobilite.fr/js/iti.js

      Sur la page, https://www.metromobilite.fr/pages/opendata/OpenDataApi.html#, je me disais qu'il serait intéressant de documenter un peu les paramètres GET, notamment les paramètres dep, arr, lonlatDep, lonlatArr, iFrame, tc, velo et voiture. Ainsi les usagers de TAG pourraient très facilement se créer des raccourcis internet sans avoir à créer d'espace perso !

      De plus, peut-être que dans la function initForm() il serait intéressant de créer un paramètre all qui sélectionnerait tous les paramètres, ainsi qu'un paramètre covoiturage qui sélectionnerait uniquement le covoiturage, et un paramètre doux qui sélectionnerait le vélo, piéton et tc. Ainsi dés dès le chargement de la page s'afficherait les modes que l'on désire. J'ai testé, ça marche bien. Dans ce cas il faudrait également modifier js/outils.js .

      Qu'en pensez-vous ?

      Si je peux aider, n'hésitez pas.

      Bien cordialement,

      Julio Prayer (https://github.com/JulioJu)

Geocoder

Get current location

Note: XMLHttpRequest is deprecated

When I run ./deprecatedXMLHttpRequest.ts (compiled thanks tsc -t es2017) I have:

Synchronous XMLHttpRequest on the main thread is deprecated because of its
detrimental effects to the end user’s experience. For more help
http://xhr.spec.whatwg.org/

Note about my Standalone example

TODO

Secondary TODO

  • For GET, add infinite scroll (example on JHipster).

  • Add an eventSuscriber to subscribe to modifications (example on JHipster).

  • Maybe use paramMap instead of params as explained https://angular.io/guide/router. But JHipster 5.0.0 use params, probably enough.

  • See if router-outlet is the best directive for us.

  • For Nurses add UNIQUE contraint in mongodb. Maybe it should not have two nurses with the same firstname or lastname. At Decathlon (French shop), we could have two persons with the same firstname and lastname, birthdate and address (I've had two cards).

  • Front, form:

    • Front: for url /*/entity-form do not display the field with label id. In this case, ensure than sessionStorage.getItem(this.formRoute)._id = ''.
    • Front: test if the data exists in back, if data doesn't exists in back, ensure than sessionStorage.getItem(this.formRoute)._id = '' and display title Creation. Otherwise display Edition.

  • Open a PR on @types/mongoose, see ./back/app/entities/abstract/abstract.mongoose.service

Principal TODO

  • See section TODO in ./back/README.md.

  • Done

  • Improve message error "duplicate key" in dynamic-form (like iSSN duplication key in /patient-form)

  • For entities, actually REGEX of back doesn't match REGEX of back. See for example at http://localhost:4200/#/bb an object added thanks:

    $ curl --data "_id=bb&_idSSN=790089941908186&_firstname=value2&_lastname=value3&_gender=male&_birthday=coucou&_address=chouette" -X PUT http://localhost:8080/mongoose/patients

  • Check if we could add validator for question-dropdown.ts

  • Add success message for deletion, add, edit… Maybe we could also use an Angular service, like in JHipster or http://jasonwatmore.com/post/2017/06/25/angular&#45;2&#45;4&#45;alert&#45;toaster&#45;notifications Probably it's better if we have different sorts of messages.

  • WARNING depreciation warnings for CRUD in back. Correct it.

  • When we edit an existing form, and if nothing is found, we have a perpetual message 'Loading Form'

  • Improve Openlayers map see also https://openlayers.org/en/latest/examples/draw-and-modify-features.html

Notes for developers

  • BIG WARNING:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

    • « The pattern is not surrounded by forward slashes. » Chrome doesn't respect the specification, contrary to Firefox.
    • « Use the title attribute to describe the pattern to help the user. »

  • For input attribute:

    • "attr." prefix seems bypass any angular conversion.
      • [required] attribute is converted to "ng-reflect-required"
      • [attr.required] gives "required"

  • Fields could be cached in SessionStorage. Do not use SessionStorage to cache sensitive datas like passwords (be careful).

  • Subtyping is better than generecity. Contrary to C#, we can't initialize a Generic Type in TypeScript or Java, otherwise we could delete constroctors of children class like in patient-form.dynamic-form.component.ts. Genericity declared like abstract class myCl <T extends IAbstract> add nothing (furthermore I've seen some false positive with tsc).

  • At url /*/patient-form/:id, if the birthday field contains not a date, we have an error in console: « Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date()… + » No solution to avoid found this console.error()

  • Migrate to TypeScript 3.1 with noUnusedLocal raise error 6133 when a private parameter is declared in a ts file and used in a template file (seems logic). Therefore they are changed to become protected.

  • When for error handling await / async see https://javascript.info/async-await#error-handling Note that in a Promise, we must continue to try and catch Promises called even if it is marked async. It's logical. Nested Promises, simply return the Promise! No need to try catch nested promises,

  • For hierarchy of inheritance, with a class at the end, prefer use only classes (e.b ./back/app/entities/abstract/abstract.model) see at for instance at ./shared-back-front/entities-interface/abstract.interface.ts

  • ./shared-back-front/entities-interface/abstract.interface.ts contains all type allowed. Could be any, probably, easier ! See index signature at https://www.typescriptlang.org/docs/handbook/interfaces.html

  • angular/angular#13721 Reactive forms are not strongly typed

  • Symlink between Front and Back: so cool to use it but don't forget angular/angular-cli#9807

    "build": {
  "preserveSymlinks": true
  },
  ```

Linting

  • Use typedef: true is a very bad idea. Too much boilerplate, sometimes with this rule typedef are redundant e.g (imagine with lot of param, sometimes we have param definition on several lines).

    const myFunc: (aa: string) => bool = (aa: string): bool => {
    return true;
}
    • For a complet beginner it's could be cool, as it now I understand know it off by heart how to define types. But not cool when I come back to the code, too much boilerplate.
    • Therefore for back and front I use typdef: true except for variable-declaration

  • In this project, // tslint:disable:no-unsafe-any in:

    • back/app/utils/route-main.ts
    • back/app/entities/abstract/abstract.route.ts
    • back/app/ObserverTests.ts
    • back/no-unsafe-any: false

Issues and PR opened by me for this project:

Update

Credit

About

University project (TypeScript, Express, Angular, OAuth)

Resources

Readme
Activity

Stars

1 star

Watchers

4 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages