Edited caching strategy

src/app/pages/analyse/analyse.component.css

@@ -9,7 +9,7 @@
 
 img {
     max-width: 100%;
-    margin: 0 1rem;
+    margin: 0 auto;
 }
 
 label {

src/app/pages/garderner/listmap/listmap.component.html

@@ -24,4 +24,4 @@
         </p>
     </a>
 </div>
-<div class="list-group" *ngIf="!mapservice.data.length">{{"ERRORS.GARDENERS" | translate}}</div>
\ No newline at end of file
+<h5 class="mt-4" *ngIf="!mapservice.data.length">{{"ERRORS.GARDENERS" | translate}}</h5>
\ No newline at end of file

src/app/pages/plantdetails/plantdetails.component.html

@@ -34,7 +34,7 @@
                     </tr>
                 </tbody>
             </table>
-            <section class="my-5 mt-my-0">
+            <section class="my-5 mt-my-0" *ngIf="plant?.diseases">
                 <h3>{{"PLANT.DISEASES" | translate}}</h3>
                 <div class="list-group">
                     <li style="cursor:pointer;" class="list-group-item list-group-item-action" *ngFor="let d of plant?.diseases | sort" [routerLink]="['/disease', d._id]">

src/app/services/disease.service.ts

@@ -8,17 +8,30 @@ import { DataService } from './data.service';
  */
 @Injectable()
 export class DiseaseService extends DataService{
+  private diseases: IDisease[] = [];
 
   constructor(protected apiService: ApiService) { 
     super('diseases/', apiService, ['created', 'modified']);
   }
 
   getAllDiseases():Promise<IDisease[]>{
-    return this.readItems<IDisease>();
+    return this.readItems<IDisease>().then(diseases => this.diseases = diseases);
   }
 
-  getSingleDisease (id: number|string){
-    return this.readSingleItem<IDisease>(id);
+  async getSingleDisease (id: number|string){
+    try{
+      let disease = await this.getSingleDisease(id);
+      return disease;
+    }catch(err){
+      try{
+        if(!this.diseases.length) await this.getAllDiseases();
+        let disease = this.diseases.find(disease => disease._id == id);
+        if(!disease) throw err;
+        else return disease;
+      }catch(err){
+        throw err;
+      }
+    }
   }
 
 }

src/backend/controller/disease.js

@@ -3,7 +3,7 @@ const logger = require('winston');
 
 /** Get all diseases with name and id */
 function getDiseases(req, res){
-    Disease.find({}, ["id", "name", "symptoms"])
+    Disease.find({}).populate('crop_id', ['name'])
         .then(diseases => {
             res.status(200);
             res.send({