Added retrieval and set of search options for the Bibles plugin, allowing to change the Bible version from the remote

This commit is contained in:
Fernando Quant 2020-08-27 04:55:11 +00:00 committed by Raoul Snyman
parent 29041b7f1e
commit e1de5c329e
9 changed files with 11884 additions and 16 deletions

11783
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -2,14 +2,18 @@
"name": "@openlp/web-remote",
"version": "0.9.4",
"description": "The web remote for OpenLP, written in Angular",
"keywords": ["OpenLP", "Angular", "Remote"],
"keywords": [
"OpenLP",
"Angular",
"Remote"
],
"homepage": "https://openlp.org/",
"bugs": "https://gitlab.com/openlp/web-remote",
"license": "GPL-3.0-or-later",
"author": "OpenLP Developers",
"repository": {
"type" : "git",
"url" : "https://gitlab.com/openlp/web-remote.git"
"type": "git",
"url": "https://gitlab.com/openlp/web-remote.git"
},
"scripts": {
"ng": "ng",

View File

@ -24,6 +24,7 @@ import { AppRoutingModule } from './app.routing';
import { ServiceComponent } from './components/service/service.component';
import { AlertComponent } from './components/alert/alert.component';
import { SearchComponent } from './components/search/search.component';
import { SearchOptionsComponent } from './components/search/search-options/search-options.component';
import { SlidesComponent } from './components/slides/slides.component';
import { FormsModule } from '@angular/forms';
import { ChordViewComponent } from './components/chord-view/chord-view.component';
@ -45,6 +46,7 @@ import { ThemesComponent } from './components/themes/themes.component';
ServiceComponent,
AlertComponent,
SearchComponent,
SearchOptionsComponent,
SlidesComponent,
ThemesComponent
],

View File

@ -0,0 +1,8 @@
<mat-form-field >
<mat-select [(ngModel)]="selectedSearchOption" (selectionChange)="setSearchOption($event)" name="selectedSearchOption" [placeholder]="searchOptionsTitle">
<mat-option *ngFor="let option of searchOptions" name="searchOptions" [value]="option">
{{option}}
</mat-option>
</mat-select>
</mat-form-field>
<br>

View File

@ -0,0 +1,3 @@
mat-form-field {
width: 100%;
}

View File

@ -0,0 +1,41 @@
import { Component } from '@angular/core';
import { OpenLPService } from '../../../openlp.service';
@Component({
selector: 'openlp-search-options',
templateUrl: './search-options.component.html',
styleUrls: ['./search-options.component.scss'],
providers: [OpenLPService]
})
export class SearchOptionsComponent {
public selectedPlugin: string;
public searchOptions: Array<string>;
public selectedSearchOption: string;
public searchOptionsTitle: String = '';
constructor(private openlpService: OpenLPService) {}
// Used to display search-options for certain plugins
onPluginChange(plugin) {
this.selectedPlugin = plugin;
if (this.selectedPlugin === 'bibles') {
this.searchOptionsTitle = 'Bible version:';
this.getSearchOptions();
}
}
getSearchOptions() {
this.openlpService.getSearchOptions(this.selectedPlugin).subscribe(res => {
if (this.selectedPlugin === 'bibles') {
this.searchOptions = res['bibles'];
this.selectedSearchOption = res['primary'];
}
});
}
setSearchOption(option) {
this.openlpService.setSearchOption(this.selectedPlugin, option.value).subscribe(res => {});
this.selectedSearchOption = option.value;
}
}

View File

@ -1,18 +1,21 @@
<h3>Search</h3>
<form #searchForm="ngForm">
<mat-form-field>
<mat-select [(ngModel)]="selectedPlugin" name="selectedPlugin" placeholder="Search for:">
<mat-option *ngFor="let plugin of searchPlugins" name="searchPlugins" [value]="plugin.key">
{{plugin.name}}
</mat-option>
</mat-select>
</mat-form-field>
<br>
<mat-form-field>
<input matInput [(ngModel)]="searchText" name="searchText" placeholder="Search Text" required>
</mat-form-field>
<mat-form-field>
<mat-select [(ngModel)]="selectedPlugin" (selectionChange)="onPluginChange($event)" name="selectedPlugin" placeholder="Search for:">
<mat-option *ngFor="let plugin of searchPlugins" name="searchPlugins" [value]="plugin.key">
{{plugin.name}}
</mat-option>
</mat-select>
</mat-form-field>
<br>
<button mat-raised-button id="searchButton" color="primary" [disabled]="!searchForm.form.valid" (click)="onSubmit()">Search</button>
<div [hidden]="!displaySearchOptions">
<openlp-search-options></openlp-search-options>
</div>
<mat-form-field>
<input matInput [(ngModel)]="searchText" name="searchText" placeholder="Search Text" required>
</mat-form-field>
<br>
<button mat-raised-button id="searchButton" color="primary" [disabled]="!searchForm.form.valid" (click)="onSubmit()">Search</button>
</form>
<div *ngIf="searchResults">
<h3>Search Results:</h3>

View File

@ -1,8 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { OpenLPService } from '../../openlp.service';
import { PageTitleService } from '../../page-title.service';
import { PluginDescription } from '../../responses';
import { SearchOptionsComponent } from './search-options/search-options.component';
@Component({
selector: 'openlp-search',
@ -16,6 +17,8 @@ export class SearchComponent implements OnInit {
public searchResults = null;
public selectedPlugin = 'songs';
public currentPlugin: string;
public displaySearchOptions: Boolean = false;
@ViewChild(SearchOptionsComponent, {static: false}) searchOptions: SearchOptionsComponent;
constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService) {
pageTitleService.changePageTitle('Search');
@ -26,6 +29,19 @@ export class SearchComponent implements OnInit {
this.openlpService.search(this.currentPlugin, this.searchText).subscribe(items => this.searchResults = items);
}
// Used to display search-options for certain plugins
onPluginChange() {
if (this.selectedPlugin === 'bibles') {
this.searchOptions.onPluginChange(this.selectedPlugin);
this.displaySearchOptions = true;
}
else {
if (this.displaySearchOptions) {
this.displaySearchOptions = false;
}
}
}
sendLive(id) {
this.openlpService.sendItemLive(this.currentPlugin, id).subscribe(res => {});
}

View File

@ -82,6 +82,14 @@ export class OpenLPService {
return this.http.get(`${this.apiURL}/plugins/${plugin}/search?text=${text}`, httpOptions);
}
getSearchOptions(plugin): Observable<any> {
return this.http.get(`${this.apiURL}/plugins/${plugin}/search-options`, httpOptions);
}
setSearchOption(plugin, option): Observable<any> {
return this.http.post(`${this.apiURL}/plugins/${plugin}/search-options`, {'option': option}, httpOptions);
}
getServiceItems(): Observable<ServiceItem[]> {
return this.http.get<ServiceItem[]>(`${this.apiURL}/service/items`, httpOptions);
}