Skip to content

Commit

Permalink
Add side menu for map on vc details page.
Browse files Browse the repository at this point in the history 
Signed-off-by: Dariy Miseldzhani <dariy.misilgani@envisionblockchain.com>
  • Loading branch information
Dariy Miseldzhani committed Feb 13, 2025
1 parent 2ebe59a commit 1a9462f
Show file tree
Hide file tree
Showing 3 changed files with 248 additions and 41 deletions.
10 changes: 8 additions & 2 deletions ...xer-frontend/src/app/views/details/vc-document-details/vc-document-details.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,16 @@ <h1>{{ 'details.vc.header' | transloco }} {{id}}</h1>
<div class="map-sidebar">
<p-tabView [activeIndex]="tabIndex" [hidden]="loading">
<p-tabPanel [header]="'details.json' | transloco">
<div>1</div>
<pre [innerHTML]="geoJsonShapes"></pre>
</p-tabPanel>
<p-tabPanel [header]="'details.table' | transloco">
<div>2</div>
<app-table class="collection-container__table"
[loading]="loading"
[columns]="geoShapesColumns"
[data]="mapPoints"
[paginator]="false"
>
</app-table>
</p-tabPanel>
</p-tabView>
</div>
Expand Down
69 changes: 69 additions & 0 deletions ...xer-frontend/src/app/views/details/vc-document-details/vc-document-details.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,75 @@
margin-top: 0;
padding: 16px;
}

.table {
min-width: 328px !important;

&__head {
padding-left: 0 !important;
padding-bottom: 8px;
min-height: 0 !important;

.table-cell {
padding: 8px 16px;
}
}

.table-row {
padding-left: 0 !important;
min-height: 48px !important;
align-items: start;

.table-cell {
padding: 8px 0 0 16px !important;

span {
font-weight: 400;
font-size: 14px;
line-height: 16.94px;
letter-spacing: 0%;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
color: var(--guardian-font-color, #23252E)
}
}

.table-cell:last-child {
padding: 5px !important;

.p-button {
width: 38px;
height: 38px;
background-color: #4169E214;
border-radius: 8px;
border: none;

span {
color: var(--guardian-primary-color, #4169E2);
}
}
}
}

.table-row:not(:last-child) {
border-bottom: none;
}
}

.p-tabview .p-tabview-panels .p-tabview-panel {
overflow-y: auto;
}

pre {
margin: 0;
padding: 0;
color: var(--guardian-font-color);

span {
color: #009C2C;
}
}
}

.p-tabview .p-tabview-nav li .p-tabview-nav-link {
Expand Down
210 changes: 171 additions & 39 deletions indexer-frontend/src/app/views/details/vc-document-details/vc-document-details.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,23 +35,23 @@ import { ProjectLocationsComponent } from '@components/project-locations/project
],
standalone: true,
imports: [
CommonModule,
LoadingComponent,
MatTabsModule,
NgxEchartsDirective,
MatInputModule,
TranslocoModule,
TabViewModule,
TableComponent,
ProgressSpinnerModule,
SchemaFormViewComponent,
InputTextareaModule,
SelectButtonModule,
FormsModule,
OverviewFormComponent,
ButtonModule,
ProjectLocationsComponent
],
CommonModule,
LoadingComponent,
MatTabsModule,
NgxEchartsDirective,
MatInputModule,
TranslocoModule,
TabViewModule,
TableComponent,
ProgressSpinnerModule,
SchemaFormViewComponent,
InputTextareaModule,
SelectButtonModule,
FormsModule,
OverviewFormComponent,
ButtonModule,
ProjectLocationsComponent
],
})
export class VcDocumentDetailsComponent extends BaseDetailsComponent {
public chartOption: EChartsOption = createChart();
Expand Down Expand Up @@ -134,9 +134,35 @@ export class VcDocumentDetailsComponent extends BaseDetailsComponent {
formulas?: FormulasTree | null;
formulasResults?: any | null;


mapTabs: any[] = ['json', 'table'];
mapTabIndex: number = 0;
mapPoints: any[] = [];

geoShapes: any = [];
geoJsonShapes: any = [];
geoShapesColumns: any[] = [
{
type: ColumnType.TEXT,
field: 'type',
title: 'grid.type',
width: '80px',
},
{
type: ColumnType.TEXT,
field: 'coordinates',
title: 'grid.coordinates',
width: '196px',
formatValue: (value: any) => {
return value[0] + ' ' + value[1];
}
},
{
type: ColumnType.BUTTON,
callback: this.openMap.bind(this),
icon: 'pi pi-map-marker',
width: '48px',
},
];

constructor(
entitiesService: EntitiesService,
Expand All @@ -146,29 +172,31 @@ export class VcDocumentDetailsComponent extends BaseDetailsComponent {
super(entitiesService, route, router);
}

geoShapes: any = [];

protected override setResult(result?: any) {
super.setResult(result);

try {
if (result?.schema) {
this.schema = new Schema(result?.schema, '');
this.documentViewOption = 'document';

if (result?.item?.documents?.length >= 0) {
const geoFieldPaths: string[] = this.findGeoField(this.schema);

// console.log(this.schema);
// console.log(JSON.parse(result.item.documents[0]));

if (result?.item?.documents?.length >= 0) {
this.mapPoints = [];
const geoFieldPaths: string[] = this.getGeoFields(this.schema);
geoFieldPaths.forEach(path => {
result.item.documents.forEach((document: string) => {
const vc = this.getCredentialSubject(JSON.parse(document));
const locations = this.getValue(vc, path);

if (locations) {
this.geoShapes.push(locations);
this.geoJsonShapes.push(this.formatGeoJsonForMap(locations));
if (Array.isArray(locations)) {
for (const item of locations) {
this.createMapPoints(item);
}
} else {
this.createMapPoints(locations);
}
}
});
});
Expand Down Expand Up @@ -273,26 +301,130 @@ export class VcDocumentDetailsComponent extends BaseDetailsComponent {
}
}

public removeContextField(obj: any, fieldToRemove: string): any {
if (Array.isArray(obj)) {
return obj.map(item => this.removeContextField(item, fieldToRemove));
} else if (typeof obj === 'object' && obj !== null) {
const newObj: any = {};
for (const key in obj) {
if (key !== fieldToRemove) {
newObj[key] = this.removeContextField(obj[key], fieldToRemove);
}
}
return newObj;
}
return obj;
}

public formatGeoJsonForMap(json: any): string {
const formattedJson = this.removeContextField(json, '@context');
const jsonString = JSON.stringify(formattedJson, null, 2);
return jsonString.replace(
/(-?\d+(\.\d+)?)/g,
'<span>$1</span>'
);
}

public getJson(item: any): string {
return JSON.stringify(item, null, 4);
}

public findGeoField(obj: any): string[] {
public getGeoFields(obj: any): string[] {
const fieldNames: string[] = [];
if (obj.fields && obj.fields.length > 0) {
obj.fields.forEach((field: any) => {
if (field?.context?.type === 'GeoJSON') {
fieldNames.push(field.name);
}
if (field.fields && field.fields.length > 0) {
fieldNames.push(...this.findGeoField(field));
}
});

const findGeoField = (fieldObject: any, path: string) => {
if (fieldObject.fields && fieldObject.fields.length > 0) {
fieldObject.fields.forEach((field: any) => {
const newPath = path == '' ? field.name : path + '.' + field.name;
if (field?.context?.type === 'GeoJSON') {
fieldNames.push(newPath);
}
if (field.fields && field.fields.length > 0) {
findGeoField(field, newPath);
}
});
}
}

findGeoField(obj, '');

return fieldNames;
}

public getValue(obj: any, path: string): any {
return path.split('.').reduce((acc, key) => acc?.[key], obj);
}

public openMap(item: any) {
const url = `https://www.google.com/maps/place/${item.coordinates[1]},${item.coordinates[0]}`;
window.open(url, '_blank');
}

private createMapPoints(
item: { type: string; coordinates: any[] },
) {
switch (item.type) {
case 'Point': {
this.mapPoints.push({
coordinates: item.coordinates,
type: item.type,
});
break;
}
case 'MultiPoint':
case 'LineString': {
let coordinatesCount = item.coordinates.length;
const sumCoordinates: number[] = [0, 0];
for (const point of item.coordinates) {
sumCoordinates[0] += point[0];
sumCoordinates[1] += point[1];
}
const centerCoordinate: number[] = [sumCoordinates[0] / coordinatesCount, sumCoordinates[1] / coordinatesCount];
this.mapPoints.push({
coordinates: centerCoordinate,
type: item.type,
})
break;
}
case 'Polygon':
case 'MultiLineString': {
let coordinatesCount = 0;
const sumCoordinates: number[] = [0, 0];
for (const multiPoint of item.coordinates) {
for (const point of multiPoint) {
sumCoordinates[0] += point[0];
sumCoordinates[1] += point[1];
}
coordinatesCount += multiPoint.length;
}
const centerCoordinate: number[] = [sumCoordinates[0] / coordinatesCount, sumCoordinates[1] / coordinatesCount];
this.mapPoints.push({
coordinates: centerCoordinate,
type: item.type,
})
break;
}
case 'MultiPolygon': {
let coordinatesCount = 0;
const sumCoordinates: number[] = [0, 0];
for (const polygon of item.coordinates) {
for (const multiPoint of polygon) {
for (const point of multiPoint) {
sumCoordinates[0] += point[0];
sumCoordinates[1] += point[1];
}
coordinatesCount += multiPoint.length;
}
}
const centerCoordinate: number[] = [sumCoordinates[0] / coordinatesCount, sumCoordinates[1] / coordinatesCount];
this.mapPoints.push({
coordinates: centerCoordinate,
type: item.type,
})
break;
}
default:
break;
}
}
}

0 comments on commit 1a9462f

Please sign in to comment.