Skip to content

I
ipmworks-web
Commit 06827be2 by Danijela Boberic Krsticev
Options

integracija sa backendom - in progress

parent e6e77f54
Showing with 202 additions and 93 deletions
src/app/app.module.ts
......@@ -30,6 +30,7 @@ import {ChipsModule} from 'primeng/chips';
import {MessagesModule} from 'primeng/messages';
import {MessageModule} from 'primeng/message';
import {ToastModule} from 'primeng/toast';
import {PanelModule} from "primeng/panel";
@NgModule({
......@@ -39,38 +40,39 @@ import {ToastModule} from 'primeng/toast';
ResourceComponent,
AddResourceComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
MenubarModule,
ButtonModule,
MenuModule,
AccordionModule,
SharedModule,
CheckboxModule,
FormsModule,
DataViewModule,
RatingModule,
RouterModule,
HttpClientModule,
MultiSelectModule,
DropdownModule,
InputTextModule,
TooltipModule,
CardModule,
TagModule,
InputTextModule,
CheckboxModule,
ButtonModule,
RadioButtonModule,
InputTextareaModule,
FileUploadModule,
ChipsModule,
MessagesModule,
MessageModule,
ToastModule
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
MenubarModule,
ButtonModule,
MenuModule,
AccordionModule,
SharedModule,
CheckboxModule,
FormsModule,
DataViewModule,
RatingModule,
RouterModule,
HttpClientModule,
MultiSelectModule,
DropdownModule,
InputTextModule,
TooltipModule,
CardModule,
TagModule,
InputTextModule,
CheckboxModule,
ButtonModule,
RadioButtonModule,
InputTextareaModule,
FileUploadModule,
ChipsModule,
MessagesModule,
MessageModule,
ToastModule,
PanelModule
],
providers: [MessageService],
bootstrap: [AppComponent]
})
......
src/app/component/add-resource/add-resource.component.html
......@@ -26,9 +26,27 @@
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Content type</label>
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Relaevant pests</label>
<div class="p-col-12 p-md-10">
<p-dropdown [options]="resourceTypes" optionLabel="name" placeholder="Select content type" [(ngModel)]="resource.resourceType"></p-dropdown>
<p-multiSelect defaultLabel="Select pests" [options]="pests" optionLabel="name" [(ngModel)]="resource.pests"></p-multiSelect>
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Relevant crops</label>
<div class="p-col-12 p-md-10">
<p-multiSelect defaultLabel="Select crops" [options]="crops" optionLabel="name" [(ngModel)]="resource.crops"></p-multiSelect>
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Relevant project</label>
<div class="p-col-12 p-md-10">
<p-dropdown [options]="projects" optionLabel="name" placeholder="Select project" [(ngModel)]="resource.project"></p-dropdown>
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Resource type</label>
<div class="p-col-12 p-md-10">
<p-dropdown [options]="resourceTypes" optionLabel="name" placeholder="Select resource type" [(ngModel)]="resource.resourceType"></p-dropdown>
</div>
</div>
<div class="p-field p-grid">
......@@ -57,12 +75,6 @@
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Project</label>
<div class="p-col-12 p-md-10">
<p-dropdown [options]="projects" optionLabel="name" placeholder="Select project" [(ngModel)]="resource.project"></p-dropdown>
</div>
</div>
<div class="p-field p-grid">
<label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Links</label>
<div class="p-col-12 p-md-10">
<p-chips [(ngModel)]="resource.links" [max]=5 placeholder="Enter relevant links" [allowDuplicate]=false></p-chips>
......@@ -74,18 +86,24 @@
<input id="source" type="text" pInputText [(ngModel)]="resource.resourceOrigin">
</div>
</div>
<div class="p-field p-grid">
<label for="contactName" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Contact name</label>
<div class="p-col-12 p-md-10">
<input id="contactName" type="text" pInputText [(ngModel)]="resource.contactName">
</div>
<div class="p-field p-grid">
<label for="citation" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Citation</label>
<div class="p-col-12 p-md-10">
<input id="citation" type="text" pInputText [(ngModel)]="resource.citation">
</div>
</div>
<div class="p-field p-grid">
<label for="contactOrg" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Contact institution</label>
<div class="p-col-12 p-md-10">
<input id="contactOrg" type="text" pInputText [(ngModel)]="resource.contactInstitution">
</div>
</div>
<div class="p-field p-grid">
<label for="contactName" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Contact name</label>
<div class="p-col-12 p-md-10">
<input id="contactName" type="text" pInputText [(ngModel)]="resource.contactName">
</div>
</div>
<div class="p-field p-grid">
<label for="contactEmail" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Contact email</label>
<div class="p-col-12 p-md-10">
......
src/app/component/add-resource/add-resource.component.ts
import { Component, OnInit } from '@angular/core';
import {ResourceType, Language, Region, Sector, Project, Resource} from "../../model/resource";
import {ResourceType, Language, Region, Sector, Project, Resource, Pest, Crop} from "../../model/resource";
import {ResourceService} from "../../service/resource.service";
import {MessageService} from 'primeng/api';
import {Router} from "@angular/router";
......@@ -16,6 +16,8 @@ export class AddResourceComponent implements OnInit {
resourceTypes: ResourceType[] = [];
languages: Language[] = [];
projects: Project[] = [];
pests:Pest[] = [];
crops: Crop [] = [];
resource: Resource = {};
image: any;
resourceContent: File[] = [];
......@@ -32,6 +34,10 @@ export class AddResourceComponent implements OnInit {
this.languages = languages;});
this.resourceService.getAllProjects().subscribe((projects: Project[]) => {
this.projects = projects;});
this.resourceService.getAllPests().subscribe((pests: Pest[]) => {
this.pests = pests;});
this.resourceService.getAllCrops().subscribe((crops: Crop[]) => {
this.crops = crops;});
}
saveResource(){
......
src/app/component/home/home.component.css
.imageSizeHome{
height: auto;
width: auto;
max-width: 300px;
max-height: 300px;
}
.card {
padding: 2rem;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
......
src/app/component/home/home.component.html
......@@ -44,14 +44,14 @@
<p-dataView #dv [value]="resources" [paginator]="true" [rows]="6" layout="grid">
<ng-template let-resource pTemplate="gridItem">
<div class="p-col-12 p-md-4">
<p-card header="{{resource.resourceName}}" subheader="" styleClass="p-card-shadow">
<p-card header="{{resource.resourceName}}" subheader="" styleClass="p-card-shadow" routerLink="/resource/{{resource.idResource}}">
<ng-template pTemplate="header">
<div class="p-pb-1 button-right">
<p-tag *ngIf="resource.resourceType" [rounded]=true value="{{resource.resourceType.name}}">
</p-tag>
</div>
<img alt="Card" [src]="imagePath+'/'+resource.idResource">
<img class="flag" alt="Card" [src]="'assets/flags/'+resource.language.name.toLowerCase()+'.svg'">
<img [src]="imagePath+'/'+resource.idResource" class="imageSizeHome">
<img class="flag" [src]="'assets/flags/'+resource.language.name.toLowerCase()+'.svg'">
</ng-template>
<div *ngFor="let sector of resource.relevantSectors" class="horizontal">
<ng-container [ngSwitch]=sector.idSector>
......
src/app/component/resource/resource.component.css
.imageSize{
width:100%;
height: auto;
width: 100%;
max-height: 400px;
}
.horizontal{
padding:5px;
......@@ -13,3 +15,6 @@
display: flex;
justify-content: space-around;
}
.button-link{
background-color: unset !important;
}
src/app/component/resource/resource.component.html
<div class="p-grid p-pt-6 p-pl-6">
<div class="p-col-6">
<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>
<div class="p-col-6 p-d-flex p-jc-center">
<img [src]="imagePath+'/'+resource.idResource" class="imageSize" >
</div>
<p-panel header="Short summary" class="p-col-6 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>
<div class="p-d-inline p-my-0" *ngFor="let sector of resource.sectors">
<img class="sector p-mx-2" [src]="'assets/sectors/'+sector.sectorIcon" pTooltip="{{sector.name}}">
</div>
</div>
<div class="p-d-flex ">
<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}}">
</div>
</div>
<div class="p-d-flex ">
<div class="p-d-inline p-col-3 p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Relevant pest(s)</div>
<div *ngFor="let pest of resource.pests" class="p-d-inline p-my-0">
<p class=" p-my-0 p-py-2 p-mx-2" >{{pest.name}}</p>
</div>
</div>
<div class="p-d-flex ">
<div class="p-d-inline p-col-3 p-my-0" [ngStyle]="{color:'var(--surface-500)'}"> Relevant crop(s)</div>
<p-card header="{{resource.resourceName}}" >
<div *ngFor="let keyword of resource.keywords" class="horizontal">
<p-tag value=" {{keyword.name}}"></p-tag>
<div *ngFor="let crop of resource.crops" class="p-d-inline p-my-0">
<p class="p-my-0 p-py-2 p-mx-2" >{{crop.name}}</p>
</div>
<div>
{{resource.language?.name}}
</div>
<div *ngFor="let sector of resource.sectors" class="horizontal">
<ng-container [ngSwitch]=sector.idSector>
<img *ngSwitchCase="1" class="sector" [src]="'assets/sectors/arable.svg'" pTooltip="{{sector.name}}">
<img *ngSwitchCase="5" class="sector" [src]="'assets/sectors/greenhouse.svg'" pTooltip="{{sector.name}}">
<img *ngSwitchCase="3" class="sector"[src]="'assets/sectors/orchard.svg'" pTooltip="{{sector.name}}">
<img *ngSwitchCase="4" class="sector"[src]="'assets/sectors/vegetables.svg'" pTooltip="{{sector.name}}">
<img *ngSwitchCase="2" class="sector" [src]="'assets/sectors/vineyard.svg'" pTooltip="{{sector.name}}">
</ng-container>
</div>
<div>
<div *ngFor="let region of resource.regions" class="horizontal">
<img class="sector" alt="Card" [src]="'assets/flags/'+region.name.toLowerCase()+'.svg'" pTooltip="{{region.name}}">
</div>
</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>
<hr/>
<div class="p-text-italic" [ngStyle]="{color:'var(--green-200)'}">
Date of upload:{{resource.idResource}}
<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">
<div *ngFor="let link of resource.links" >
<a href="{{link}}">{{link}}</a>
</div>
<div class="p-text-italic" [ngStyle]="{color:'var(--green-200)'}">
Uploaded by: {{resource.idResource}}
<div class="p-mt-2" *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> <h3>Summary description</h3>{{resource.description}}</div>
</p-card>
</div>
<div class="p-col-3">
<img alt="Card" [src]="imagePath+'/'+resource.idResource" class="imageSize">
<div>
<h3>Links and downloads</h3>
<div *ngFor="let link of resource.links" >
<a href="{{link}}">{{link}}</a>
</div>
</div>
</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/component/resource/resource.component.ts
......@@ -12,6 +12,8 @@ import {Resource} from "../../model/resource";
export class ResourceComponent implements OnInit {
resource: Resource ={};
imagePath = environment.baseUrl+"/resource/image";
filePath = environment.baseUrl+"/resource/file";
url:any;
constructor(private resourceService:ResourceService, private route: ActivatedRoute) { }
......@@ -23,5 +25,20 @@ export class ResourceComponent implements OnInit {
});
}
downloadFile(fileName: any): void {
console.log("file")
this.resourceService.downloadFile(fileName).subscribe((file: any) => {
const blob = new Blob([file], {type: 'application/pdf'});
this.url = window.URL.createObjectURL(file);
const link = document.createElement('a');
link.href = this.url;
link.download = fileName;
link.click();
}, error => {
console.log(error)
});
}
}
src/app/model/resource.ts
......@@ -3,10 +3,14 @@ export interface Resource {
resourceName?: string;
description?: string;
links?:string[];
fileNames?:string[];
resourceOrigin?: string;
countryOrigin?:Country;
resourceType?: ResourceType;
sectors?: Sector[];
regions?: Region[];
crops?:Crop[];
pests?:Pest[];
keywordsTemp?:string[];
keywords?: Keyword[];
language?: Language;
......@@ -15,9 +19,22 @@ export interface Resource {
contactInstitution?: string;
contactEmail?: string;
contactPhone?: string;
mainURL?:string;
citation?:string;
}
export class Country{
public idCountry!:string;
public name!: string;
}
export class Crop{
public idCrop!:string;
public name!: string;
}
export class Pest{
public idPest!:string;
public name!: string;
}
export class ResourceType{
public idResourceType!:string;
public name!: string;
......@@ -25,6 +42,7 @@ export class ResourceType{
export class Sector{
public idSector!: string;
public name!: string;
public sectorIcon!:string;
}
export class Region{
public idRegion!: string;
......
src/app/service/resource.service.ts
......@@ -4,7 +4,7 @@ import {HttpClient} from "@angular/common/http";
import {AppConfig} from "../../config/app.config";
import {ResourceType, Language, Region, Resource, Sector, Project, Keyword} from "../model/resource";
import {ResourceType, Language, Region, Resource, Sector, Project, Keyword, Pest, Crop} from "../model/resource";
@Injectable({
providedIn: 'root'
......@@ -19,9 +19,15 @@ export class ResourceService {
public getAllResources() {
return this._httpClient.get<Resource[]>(`${AppConfig.ApiPaths.getAllResources}`);
}
public getResource(id:number) {
public getResource(id:string) {
return this._httpClient.get<Resource>(`${AppConfig.ApiPaths.getResource}`+"/"+id);
}
public downloadFile(name: string) {
const httpOptions = {
responseType: 'blob' as 'json',
};
return this._httpClient.get<Resource>(`${AppConfig.ApiPaths.getFile}`+"/"+name, httpOptions);
}
public saveResource(resource: Resource) {
return this._httpClient.post<Resource>(`${AppConfig.ApiPaths.saveResource}`, resource);
}
......@@ -49,6 +55,12 @@ export class ResourceService {
public getAllProjects() {
return this._httpClient.get<Project[]>(`${AppConfig.ApiPaths.getAllProjects}`);
}
public getAllPests() {
return this._httpClient.get<Pest[]>(`${AppConfig.ApiPaths.getAllPests}`);
}
public getAllCrops() {
return this._httpClient.get<Crop[]>(`${AppConfig.ApiPaths.getAllCrops}`);
}
public getAllKeywords() {
return this._httpClient.get<Keyword[]>(`${AppConfig.ApiPaths.getAllKeywords}`);
......
src/config/app.config.ts
......@@ -7,6 +7,8 @@ export class AppConfig {
public static ApiPaths = {
getAllResources: `${AppConfig.Origin}/resource/getAllResources`,
getResource: `${AppConfig.Origin}/resource/get`,
getFile: `${AppConfig.Origin}/resource/file`,
saveResource: `${AppConfig.Origin}/resource/saveResource`,
addFile: `${AppConfig.Origin}/resource/add`,
......@@ -16,6 +18,8 @@ export class AppConfig {
getAllRegions: `${AppConfig.Origin}/codebooks/getAllRegions`,
getAllResourceTypes: `${AppConfig.Origin}/codebooks/getAllResourceTypes`,
getAllProjects: `${AppConfig.Origin}/codebooks/getAllProjects`,
getAllPests: `${AppConfig.Origin}/codebooks/getAllPests`,
getAllCrops: `${AppConfig.Origin}/codebooks/getAllCrops`,
getAllKeywords: `${AppConfig.Origin}/codebooks/getAllKeywords`
......
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