Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

AUS-4108 Restore bookmark functionality #376

Merged
merged 2 commits into from
Jun 3, 2024
Merged

AUS-4108 Restore bookmark functionality #376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ade3a6
AUS-4108 Restore bookmark functionality
vjf May 29, 2024
25414b5
Hard-code width of Featured Layer Groups browse menu column so Firefo…
stuartwoodman May 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 26 additions & 6 deletions src/app/browsepanel/browsepanel.component.html
View file
Open in desktop
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
Open in desktop
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
Loading