generisanje slike za resurs

angular.json

@@ -32,10 +32,10 @@
             ],
             "styles": [
               "src/styles.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/primeng/resources/themes/md-light-indigo/theme.css",
-              "node_modules/primeng/resources/primeng.css",
-              "node_modules/primeflex/primeflex.scss"
+              "./node_modules/primeicons/primeicons.css",
+              "./node_modules/primeng/resources/themes/mdc-light-indigo/theme.css",
+              "./node_modules/primeng/resources/primeng.css",
+              "./node_modules/primeflex/primeflex.scss"
             ],
             "scripts": []
           },

package-lock.json

@@ -10950,11 +10950,18 @@
       "integrity": "sha512-uEv2pSPk1zQCfaB2VgnUfnUxxlGryYi+5rbdxmZBBt5v9S/pscIQYS5YDLxsQZ7D9jn5c76+Tx5wX/2J1nK6sA=="
     },
     "node_modules/primeng": {
-      "version": "12.0.0-rc.1",
-      "resolved": "https://registry.npmjs.org/primeng/-/primeng-12.0.0-rc.1.tgz",
-      "integrity": "sha512-YSQUKmUFa234wzvm8HYzu1wdQlg1Jd2BI85YYiNdwV3uwZIPRDsOURkapZ42bcQHwBrXPUXkCBgULhoiC6Dlfw==",
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/primeng/-/primeng-12.0.2.tgz",
+      "integrity": "sha512-lkuBc+46VyojhNZ2e5Uc6H9nvTRiBBEizJT06Ql6RfLZ8ckfFZvDtwzEDxuPJixmQ9L42rxMybiCGNJsq4IkSg==",
       "dependencies": {
         "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0",
+        "@angular/core": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0",
+        "@angular/forms": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0",
+        "rxjs": "^6.0.0",
+        "zone.js": "^0.10.2 || ^0.11.0"
       }
     },
     "node_modules/process-nextick-args": {
@@ -23756,9 +23763,9 @@
       "integrity": "sha512-uEv2pSPk1zQCfaB2VgnUfnUxxlGryYi+5rbdxmZBBt5v9S/pscIQYS5YDLxsQZ7D9jn5c76+Tx5wX/2J1nK6sA=="
     },
     "primeng": {
-      "version": "12.0.0-rc.1",
-      "resolved": "https://registry.npmjs.org/primeng/-/primeng-12.0.0-rc.1.tgz",
-      "integrity": "sha512-YSQUKmUFa234wzvm8HYzu1wdQlg1Jd2BI85YYiNdwV3uwZIPRDsOURkapZ42bcQHwBrXPUXkCBgULhoiC6Dlfw==",
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/primeng/-/primeng-12.0.2.tgz",
+      "integrity": "sha512-lkuBc+46VyojhNZ2e5Uc6H9nvTRiBBEizJT06Ql6RfLZ8ckfFZvDtwzEDxuPJixmQ9L42rxMybiCGNJsq4IkSg==",
       "requires": {
         "tslib": "^2.1.0"
       }

src/app/component/add-resource/add-resource.component.ts

@@ -50,12 +50,11 @@ export class AddResourceComponent implements OnInit {
   saveResource(){
     this.resourceService.saveResource(this.resource).subscribe((data: Resource) => {
       this.resource = data;
-      this.resourceService.addFiles(this.image,this.resourceContent,this.resource.idResource).
-        subscribe(data =>{
-          this.messageService.add({severity:'success', detail:'Resource is saved!'});
+        this.resourceService.addFiles(this.image, this.resourceContent, this.resource.idResource).subscribe(data => {
+          this.messageService.add({severity: 'success', detail: 'Resource is saved!'});
           this.router.navigate(['/home']);
 
-      },error =>{
+        }, error => {
           this.messageService.add({severity: 'error', detail: 'Some error occurred!'})
         });
     },error => {

src/app/component/home/home.component.html

@@ -70,7 +70,6 @@
                   </p-tag>
                 </div>
                 <img [src]="imagePath+'/'+resource.idResource" class="imageSizeHome">
-                <img class="flag" [src]="'assets/flags/'+resource.language.name.toLowerCase()+'.png'">
               </ng-template>
               <div *ngFor="let sector of resource.relevantSectors" class="horizontal">
                 <ng-container [ngSwitch]=sector.idSector>

src/app/component/resource/resource.component.html

 <div class="p-grid p-pt-6 p-pl-6 p-d-flex">
-  <div class="p-d-flex p-col-12">
-    <h1 class="p-text-center" [ngStyle]="{'flex-grow':1}">{{resource.resourceName}}</h1>
+  <div class="p-d-flex p-col-12 p-jc-center">
+    <h1>{{resource.resourceName}}</h1>
   </div>
-  <div class="p-col-6 p-d-flex p-jc-center">
-      <!--<img [src]="imagePath+'/'+resource.idResource" class="imageSize" >-->
-     <img [src]="'assets/sectors/'+getRandomSector()" class="imageSize" >
-
+  <div class="p-col-6 p-d-flex p-flex-column p-jc-center">
+    <div class="p-col-12">
+      <img [src]="imagePath+'/'+resource.idResource" class="imageSize" >
+    </div>
+    <div class="p-col-12">
+      <p-panel class="p-col-12 p-d-inline">
+        <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource language</div><div class=" p-d-inline p-my-0">{{resource.language?.name}}</div></div>
+        <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource origin</div> <div class=" p-d-inline p-my-0">{{resource.resourceOrigin}}</div></div>
+        <div class="p-d-flex p-ai-center"> <div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource type</div><div class=" p-d-inline p-my-0">{{resource.resourceType?.name}}</div></div>
+        <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Organization name</div><div class=" p-d-inline p-my-0">{{resource.contactInstitution}}</div></div>
+        <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact email</div><div class=" p-d-inline p-my-0"></div>{{resource.contactEmail}}</div>
+        <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact phone</div><div class=" p-d-inline p-my-0">{{resource.contactPhone}}</div></div>
+        <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource main url</div><div class=" p-d-inline p-my-0">{{resource.mainURL}}</div></div>
+        <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Citation (DOI)</div><div class=" p-d-inline p-my-0">{{resource.citation}}</div></div>
+      </p-panel>
+    </div>
   </div>
-  <p-panel header="Short summary" class="p-col-6 p-d-block">
+  <div class="p-col-6 p-d-flex p-flex-column">
+  <p-panel header="Short summary" class="p-col-12 p-d-block">
       <div class="p-d-flex "> {{resource.description}}</div>
       <div class="p-d-flex  p-mt-5 ">
         <div class="p-d-inline p-col-3 p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Sectors</div>
@@ -19,7 +32,7 @@
         <div class="p-d-inline p-col-3 p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Regions</div>
 
         <div *ngFor="let region of resource.regions" class="p-d-inline p-my-0">
-          <img class="sector p-mx-2" [src]="'assets/flags/'+region.name.toLowerCase()+'.svg'" pTooltip="{{region.name}}">
+          <p class=" p-my-0 p-py-2 p-mx-2" >{{region.name}}</p>
         </div>
       </div>
       <div class="p-d-flex ">
@@ -37,37 +50,17 @@
         </div>
       </div>
     </p-panel>
-    <p-panel class="p-col-6 p-d-inline">
-    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource language</div><div class=" p-d-inline p-my-0">{{resource.language?.name}}</div></div>
-    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource origin</div> <div class=" p-d-inline p-my-0">{{resource.resourceOrigin}}</div></div>
-    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Country (of origin)</div><div class=" p-d-inline p-my-0"></div>{{resource.countryOrigin?.name}}</div>
-    <div class="p-d-flex p-ai-center"> <div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource type</div><div class=" p-d-inline p-my-0">{{resource.resourceType?.name}}</div></div>
-    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Organization name</div><div class=" p-d-inline p-my-0">{{resource.contactInstitution}}</div></div>
-    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact name</div><div class=" p-d-inline p-my-0"></div>{{resource.contactName}}</div>
-    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact email</div><div class=" p-d-inline p-my-0"></div>{{resource.contactEmail}}</div>
-    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact phone</div><div class=" p-d-inline p-my-0">{{resource.contactPhone}}</div></div>
-
-    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource main url</div><div class=" p-d-inline p-my-0">{{resource.mainURL}}</div></div>
-<div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Citation (DOI)</div><div class=" p-d-inline p-my-0">{{resource.citation}}</div></div>
-<div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Keywords</div>
-  <div *ngFor="let keyword of resource.keywords" class="p-col-4 p-d-inline p-my-0">
-  <p-tag value=" {{keyword.name}}"></p-tag>
-</div>
+    <p-panel class="p-col-12" header="Find out more">
+      <div *ngFor="let file of resource.fileNames" >
+        <i class="pi pi-file p-mr-2" style="font-size: 2rem"></i>
+        <button pButton type="button" label="{{file}}" class="p-button-link button-link" (click)="downloadFile(file)"></button>
+      </div>
+      <div class="p-mt-2" *ngFor="let link of resource.links" >
+        <i class="pi pi-link p-mr-2" style="font-size: 2rem"></i>
+        <a href="{{link}}">{{link}}</a>
+      </div>
+    </p-panel>
 </div>
-
-  </p-panel>
-
-  <p-panel class="p-col-6" header="Find out more">
-    <div *ngFor="let file of resource.fileNames" >
-      <i class="pi pi-file p-mr-2" style="font-size: 2rem"></i>
-      <button pButton type="button" label="{{file}}" class="p-button-link button-link" (click)="downloadFile(file)"></button>
-    </div>
-    <div class="p-mt-2" *ngFor="let link of resource.links" >
-      <i class="pi pi-link p-mr-2" style="font-size: 2rem"></i>
-      <a href="{{link}}">{{link}}</a>
-    </div>
-  </p-panel>
-
   <div class="p-col-12 p-pt-3 button-center">
     <p-button  label="Back to search" icon="pi pi-search" routerLink="/home" [loading]="false"></p-button>
   </div>

src/app/service/resource.service.ts

@@ -33,8 +33,11 @@ export class ResourceService {
   }
 
   public addFiles(image:File,resourceContent:File[],idResource:any){
+
     const formData: FormData = new FormData();
-    formData.append("image", image);
+    if(image != undefined) {
+      formData.append("image", image);
+    }
     resourceContent.forEach(r =>{
       formData.append("files",r);
     })

src/styles.css

+*{
+  font-family: 'Roboto';
+}
 .p-menubar{
   margin:-8px;
   background-color:#00662e !important;