Skip to content

I
ipmworks-web
Commit 89f891ef by Danijela Boberic Krsticev
Options

generisanje slike za resurs

parent 6d9ef0fd
Showing with 49 additions and 45 deletions
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>
<p-panel header="Short summary" class="p-col-6 p-d-block">
<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>
<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,27 +50,7 @@
</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>
</div>
</p-panel>
<p-panel class="p-col-6" header="Find out more">
<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>
......@@ -67,7 +60,7 @@
<a href="{{link}}">{{link}}</a>
</div>
</p-panel>
</div>
<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();
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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment