Skip to content

Commit

Permalink
Merge pull request #376 from AuScope/AUS-4108
Browse files Browse the repository at this point in the history 
AUS-4108 Restore bookmark functionality
  • Loading branch information
@stuartwoodman
stuartwoodman authored Jun 3, 2024
2 parents 9d70ae4 + 25414b5 commit 0ab74d7
Show file tree
Hide file tree
Showing 4 changed files with 217 additions and 74 deletions.
32 changes: 26 additions & 6 deletions src/app/browsepanel/browsepanel.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,34 @@
<!-- Menu toggle button -->
<button class="btn browse-menu-button btn-auscope-primary" (click)="toggleBrowsePanel()">
<em class="fa fa-bars" title="Browse featured layers"></em>&nbsp;Browse
<em *ngIf="bShowBrowsePanel" class="fa fa-caret-up caret-icon"></em>
<em *ngIf="!bShowBrowsePanel" class="fa fa-caret-down caret-icon"></em>
</button>
<span class="sidebar-toggle" (click)="toggleSidebar()">
<i class="fa fa-angle-left fa-5x" *ngIf="isSidebarOpen" title="Open active layers"></i>
<i class="fa fa-angle-left fa-5x" *ngIf="isSidebarOpen" title="Close active layers"></i>
<i class="fa fa-angle-right fa-5x" *ngIf="!isSidebarOpen" title="Open active layers"></i>
</span>
<div *ngIf="bShowBrowsePanel" class="browse-menu">
<!-- Layer Groups column -->
<div class="container text-left browse-menu-col">
<a style="font-weight: bold">Featured Layer Groups</a>
<div style="font-weight: bold; width: 22rem; margin-bottom: 10px;">Featured Layer Groups
<!-- 'Bookmarked only' check box -->
<div *ngIf="isUserLoggedIn()" style="display: inline-block" class="form-check">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input class="form-check-input" type="checkbox" value="" [(ngModel)]="showOnlyBookmarked" id="showBkMarkedDefault">
<label class="form-check-label" for="showBkMarkedDefault">
Bookmarked
</label>
</div>
</div>
<!-- Layer groups -->
<div class="row align-items-start" *ngFor="let layerGroup of layerGroupColumn | keyvalue">
<div class="col" (click)="selectGroup(layerGroup)">
<div *ngIf="!showOnlyBookmarked || layerGroupHasBookmarkedLayer(layerGroup.key)" class="col" (click)="selectGroup(layerGroup)">
<a>
<span class="truncate-grp" [ngClass]="{'enbolden': isGroupSelected(layerGroup)}" title="{{layerGroup.key}}">{{layerGroup.key}}</span>
<span class="truncate-grp" [ngClass]="{'enbolden': isGroupSelected(layerGroup)}" title="{{layerGroup.key}}">
<i *ngIf="layerGroupHasBookmarkedLayer(layerGroup.key)" class="ti-bookmark-alt bookmark-icon" title="This layer is bookmarked"></i>
{{layerGroup.key}}
</span>
</a>
</div>
</div>
Expand All @@ -24,10 +39,15 @@
<a *ngIf="!layerColumnHeader" style="font-weight: bold">Layers</a>
<a *ngIf="layerColumnHeader"><span style="font-weight: bold;" class="truncate-layer">{{layerColumnHeader}} Layers</span></a>
<div class="row align-items-start" *ngFor="let layer of layerColumn">
<div class="col" (click)="selectLayer(layer)">
<!-- Layers -->
<div *ngIf="!showOnlyBookmarked || checkLayerBookmarked(layer.id)" class="col" (click)="selectLayer(layer)">
<a>
<span class="truncate-layer" [ngClass]="{'enbolden': isLayerSelected(layer)}" title="{{layer.name}}">{{layer.name}}</span>
<span class="truncate-layer" [ngClass]="{'enbolden': isLayerSelected(layer)}" title="{{layer.name}}">
<i *ngIf="checkLayerBookmarked(layer.id)" class="ti-bookmark-alt bookmark-icon" title="This layer is bookmarked"></i>
{{layer.name}}
</span>
</a>
<!-- Add layer button -->
<button *ngIf="isLayerSelected(layer)" style="float:right; width:6em; padding:2px" class="btn btn-sm btn-success" type="button" title="Add layer" (click)="addLayer(layer)">
<i class="fa fa-plus-circle"></i>
&nbsp;Add
Expand Down
137 changes: 102 additions & 35 deletions src/app/browsepanel/browsepanel.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, OnInit, type OnDestroy } from '@angular/core';
import { Component, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
import { LayerHandlerService, RenderStatusService } from '@auscope/portal-core-ui';
import { UILayerModel } from '../menupanel/common/model/ui/uilayer.model';
import { UILayerModelService } from 'app/services/ui/uilayer-model.service';
Expand All @@ -7,14 +7,16 @@ import { LayerManagerService } from 'app/services/ui/layer-manager.service';
import { FilterService } from 'app/services/filter/filter.service';
import { SidebarService } from 'app/portal/sidebar.service';
import { Subscription } from 'rxjs';
import { UserStateService } from 'app/services/user/user-state.service';
import { AuthService } from 'app/services/auth/auth.service';


@Component({
selector: 'app-browse-menu',
templateUrl: './browsepanel.component.html',
styleUrls: ['./browsepanel.component.scss']
})
export class BrowsePanelComponent implements OnInit, OnDestroy{
export class BrowsePanelComponent implements OnInit, AfterViewInit, OnDestroy {

public layerGroupColumn: {}; /* Holds the data structures for all layers and groups */
public layerColumn: []; /* List of layers for a certain group */
Expand All @@ -24,55 +26,109 @@ export class BrowsePanelComponent implements OnInit, OnDestroy{
public bShowBrowsePanel = false; /* If true menu panel is open */
public isSidebarOpen = false; /* If true sidebar is open */
public sidebarSubscription: Subscription;
public layerBookmarked = {}; /* Object stores which layers are bookmarked. key is layer id, value is boolean */
public showOnlyBookmarked = false; /* When true only bookmarked layers are shown in the browse menu */

constructor(private layerHandlerService: LayerHandlerService,
private layerManagerService: LayerManagerService,
private renderStatusService: RenderStatusService,
private uiLayerModelService: UILayerModelService,
private filterService: FilterService,
private sidebarService: SidebarService,
private userStateService: UserStateService,
private authService: AuthService
) {
}
toggleSidebar() {

/**
* Toggle sidebar
*/
public toggleSidebar() {
this.sidebarService.toggleSidebar();
}

/**
* Initialise Component
*/
public ngOnInit() {
const me = this;
this.sidebarSubscription = this.sidebarService.isSidebarOpen$.subscribe(
isOpen => {
this.isSidebarOpen = isOpen;
}
);
// Initialise layers and groups in sidebar
this.layerHandlerService.getLayerRecord().subscribe(
response => {
me.layerGroupColumn = response;
// Loop over each group of layers
for (const group in me.layerGroupColumn) {
// Loop over each layer in a group
for (let layer_idx = 0; layer_idx < me.layerGroupColumn[group].length; layer_idx++) {

// Initialise a list of cesium layers
me.layerGroupColumn[group][layer_idx].csLayers = [];
// Initialise UILayerModel
const uiLayerModel = new UILayerModel(me.layerGroupColumn[group][layer_idx].id, me.renderStatusService.getStatusBSubject(me.layerGroupColumn[group][layer_idx]));
me.uiLayerModelService.setUILayerModel(me.layerGroupColumn[group][layer_idx].id, uiLayerModel);

}
public ngOnInit() {
const me = this;
this.sidebarSubscription = this.sidebarService.isSidebarOpen$.subscribe(
isOpen => {
this.isSidebarOpen = isOpen;
}
);
// Initialise layers and groups in sidebar
this.layerHandlerService.getLayerRecord().subscribe(
response => {
me.layerGroupColumn = response;
// Loop over each group of layers
for (const group in me.layerGroupColumn) {
// Loop over each layer in a group
for (let layer_idx = 0; layer_idx < me.layerGroupColumn[group].length; layer_idx++) {

// Initialise a list of cesium layers
me.layerGroupColumn[group][layer_idx].csLayers = [];
// Initialise UILayerModel
const uiLayerModel = new UILayerModel(me.layerGroupColumn[group][layer_idx].id, me.renderStatusService.getStatusBSubject(me.layerGroupColumn[group][layer_idx]));
me.uiLayerModelService.setUILayerModel(me.layerGroupColumn[group][layer_idx].id, uiLayerModel);
}
Object.keys(me.layerGroupColumn).forEach(group => {
me.layerGroupColumn[group].sort((a, b) => a.name.localeCompare(b.name));
});
});
}
ngOnDestroy(): void {
if (this.sidebarSubscription) {
this.sidebarSubscription.unsubscribe();
}
// Sort alphabetically by group name
Object.keys(me.layerGroupColumn).forEach(group => {
me.layerGroupColumn[group].sort((a, b) => a.name.localeCompare(b.name));
});
}
);
}

/**
* Called after Angular has initialised the view
*/
public ngAfterViewInit() {
const me = this;
this.userStateService.getBookmarks().subscribe(bookMarkList => {
me.layerBookmarked = {}
for (const bookMark of bookMarkList) {
me.layerBookmarked[bookMark.fileIdentifier] = true;
}
});
}

/**
* Check is user is currently logged in
*
* @returns true if user is logged in, false otherwise
*/
public isUserLoggedIn(): boolean {
return this.authService.isLoggedIn;
}

/**
* See whether a layer group contains a layer that has been bookmarked by the user
*
* @param layerGroupKey the key (string) of the layer group
* @returns true iff the layer group contains a layer that has been bookmarked, false otherwise
*/
public layerGroupHasBookmarkedLayer(layerGroupKey: string): boolean {
if (this.layerGroupColumn.hasOwnProperty(layerGroupKey)) {;
for (const layer of this.layerGroupColumn[layerGroupKey]) {
if (this.layerBookmarked?.hasOwnProperty(layer.id) && this.layerBookmarked[layer.id]) {
return true;
}
}
}
return false;
}

/**
* Called when component destroyed
*/
ngOnDestroy(): void {
if (this.sidebarSubscription) {
this.sidebarSubscription.unsubscribe();
}
}

/**
* Select a group
*
Expand Down Expand Up @@ -138,11 +194,22 @@ export class BrowsePanelComponent implements OnInit, OnDestroy{

/**
* Is this group selected?
*
*
* @param layerGroup group
* @returns true if this group is selected
*/
public isGroupSelected(layerGroup: any) {
return this.layerColumn === layerGroup.value;
}

/**
* Checks if a layer has been bookmarked
*
* @param layerId layer id
* @returns boolean, true iff layer has been bookmarked
*/

public checkLayerBookmarked(layerId: string) {
return this.layerBookmarked?.hasOwnProperty(layerId) && this.layerBookmarked[layerId];
}
}
Loading

0 comments on commit 0ab74d7

Please sign in to comment.