mirror of
https://github.com/dkmstr/openuds-gui.git
synced 2024-10-26 08:55:23 +03:00
fixing up things for IE11 & edge
aaded release & reset actions
This commit is contained in:
parent
ae5b3d9f10
commit
640352cdf5
@ -6,11 +6,15 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
|
|||||||
|
|
||||||
## Development server
|
## Development server
|
||||||
|
|
||||||
Remember editing the "proxy.conf.json" file and adapt it to your needings.
|
Remember editing the "proxy.conf.json" file and adapt it to your needings. Normally this means changing the `172.27.0.1` value to `YOUR_UDS_SERVER_IP` value and nothing more.
|
||||||
|
|
||||||
Currently, you will need to use a running UDS server backend in order to run the development environment.
|
Currently, you will need to use a running UDS server backend in order to run the development environment.
|
||||||
|
|
||||||
Run `yarn start` for a dev server. Navigate to `http://[YOUR_IP]:9000/`. The app will automatically reload if you change any of the source files.
|
Run `yarn start` for a dev server.
|
||||||
|
|
||||||
|
In order to authenticate correctly against the platform, first navigate to `http://[YOUR_IP]:9000/uds/pages/login` so the cookies from backend are correctly implanted.
|
||||||
|
|
||||||
|
Navigate to `http://[YOUR_IP]:9000/`. The app will automatically be reloaded if you change any of the source files.
|
||||||
|
|
||||||
## Importing into OpenUDS
|
## Importing into OpenUDS
|
||||||
|
|
||||||
|
@ -63,6 +63,7 @@
|
|||||||
.name {
|
.name {
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
|
width: calc(100% - 1em);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
flex-flow: row;
|
flex-flow: row;
|
||||||
|
@ -9,11 +9,11 @@
|
|||||||
</mat-menu>
|
</mat-menu>
|
||||||
|
|
||||||
<mat-menu #actions>
|
<mat-menu #actions>
|
||||||
<button mat-menu-item *ngIf="service.allow_users_remove">
|
<button mat-menu-item *ngIf="service.allow_users_remove" (click)="action('remove')">
|
||||||
<i class="material-icons">delete</i>
|
<i class="material-icons">delete</i>
|
||||||
<uds-translate> Release service</uds-translate>
|
<uds-translate> Release service</uds-translate>
|
||||||
</button>
|
</button>
|
||||||
<button mat-menu-item *ngIf="service.allow_users_reset">
|
<button mat-menu-item *ngIf="service.allow_users_reset" (click)="action('reset')">
|
||||||
<i class="material-icons">refresh</i>
|
<i class="material-icons">refresh</i>
|
||||||
<uds-translate> Reset service</uds-translate>
|
<uds-translate> Reset service</uds-translate>
|
||||||
</button>
|
</button>
|
||||||
|
@ -31,12 +31,12 @@ export class ServiceComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
get serviceTooltip() {
|
get serviceTooltip() {
|
||||||
if ( this.service.to_be_replaced !== null ) {
|
if (this.service.to_be_replaced !== null) {
|
||||||
return this.service.to_be_replaced_text;
|
return this.service.to_be_replaced_text;
|
||||||
} else if (this.service.maintenance) {
|
} else if (this.service.maintenance) {
|
||||||
return django.gettext('Service is in maintenance');
|
return django.gettext('Service is in maintenance');
|
||||||
} else if (this.service.not_accesible) {
|
} else if (this.service.not_accesible) {
|
||||||
return django.gettext('Access to the service is restricted at this time');
|
return django.gettext('This service is currently not accessible due to schedule restrictions.');
|
||||||
}
|
}
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
@ -50,7 +50,7 @@ export class ServiceComponent implements OnInit {
|
|||||||
} else if (this.service.not_accesible) {
|
} else if (this.service.not_accesible) {
|
||||||
klass.push('forbidden');
|
klass.push('forbidden');
|
||||||
}
|
}
|
||||||
if (klass.length > 1 ) {
|
if (klass.length > 1) {
|
||||||
klass.push('alert');
|
klass.push('alert');
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -81,7 +81,7 @@ export class ServiceComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
launch(transport: JSONTransport) {
|
launch(transport: JSONTransport) {
|
||||||
if (this.service.maintenance ) {
|
if (this.service.maintenance) {
|
||||||
this.notifyNotLaunching(django.gettext('Service is in maintenance and cannot be launched'));
|
this.notifyNotLaunching(django.gettext('Service is in maintenance and cannot be launched'));
|
||||||
} else if (this.service.not_accesible) {
|
} else if (this.service.not_accesible) {
|
||||||
this.notifyNotLaunching('<p align="center">' +
|
this.notifyNotLaunching('<p align="center">' +
|
||||||
@ -97,4 +97,40 @@ export class ServiceComponent implements OnInit {
|
|||||||
this.api.launchURL(transport.link);
|
this.api.launchURL(transport.link);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
action(type: string) {
|
||||||
|
if (type === 'remove') {
|
||||||
|
this.api.gui.yesno(
|
||||||
|
django.gettext('Release service: ') + this.serviceName,
|
||||||
|
django.gettext('Are you sure?'
|
||||||
|
)).subscribe((val: boolean) => {
|
||||||
|
if (val) {
|
||||||
|
console.log('Releasing service');
|
||||||
|
this.api.releaser(this.service.id).subscribe((service) => {
|
||||||
|
this.api.gui.alert(
|
||||||
|
django.gettext('Release service: ') + this.serviceName,
|
||||||
|
django.gettext('Service released')
|
||||||
|
);
|
||||||
|
console.log(service);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else { // 'reset'
|
||||||
|
this.api.gui.yesno(
|
||||||
|
django.gettext('Reset service: ') + this.serviceName,
|
||||||
|
django.gettext('Are you sure?')
|
||||||
|
).subscribe((val: boolean) => {
|
||||||
|
if (val) {
|
||||||
|
console.log('Reseting service');
|
||||||
|
this.api.resetter(this.service.id).subscribe((service) => {
|
||||||
|
this.api.gui.alert(
|
||||||
|
django.gettext('Reset service: ') + this.serviceName,
|
||||||
|
django.gettext('Service Reset')
|
||||||
|
);
|
||||||
|
console.log(service);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,8 @@
|
|||||||
<h4 mat-dialog-title [innerHtml]="data.title | safeHtml"></h4>
|
<h4 mat-dialog-title [innerHtml]="data.title | safeHtml"></h4>
|
||||||
<mat-dialog-content [innerHTML]="data.body | safeHtml"></mat-dialog-content>
|
<mat-dialog-content [innerHTML]="data.body | safeHtml"></mat-dialog-content>
|
||||||
<mat-dialog-actions>
|
<mat-dialog-actions>
|
||||||
<button mat-raised-button mat-dialog-close (click)="close()"><uds-translate>Close</uds-translate>{{ extra }}</button>
|
<button *ngIf="data.type==0" mat-raised-button mat-dialog-close (click)="close()"> <uds-translate>Close</uds-translate>{{ extra }}</button>
|
||||||
|
<button *ngIf="data.type==1" mat-raised-button mat-dialog-close (click)="yes()"><uds-translate>Yes</uds-translate></button>
|
||||||
|
<button *ngIf="data.type==1" mat-raised-button mat-dialog-close (click)="no()"><uds-translate>No</uds-translate></button>
|
||||||
|
|
||||||
</mat-dialog-actions>
|
</mat-dialog-actions>
|
||||||
|
@ -1,11 +1,17 @@
|
|||||||
import { Component, OnInit, Inject } from '@angular/core';
|
import { Component, OnInit, Inject } from '@angular/core';
|
||||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
|
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
|
||||||
import { interval, Subscription } from 'rxjs';
|
import { interval, Subscription, Observable } from 'rxjs';
|
||||||
|
|
||||||
|
export enum DialogType {
|
||||||
|
alert = 0,
|
||||||
|
yesno = 1
|
||||||
|
}
|
||||||
|
|
||||||
export interface ModalData {
|
export interface ModalData {
|
||||||
title: string;
|
title: string;
|
||||||
body: string;
|
body: string;
|
||||||
autoclose: number;
|
autoclose?: number;
|
||||||
|
type: DialogType;
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -17,11 +23,41 @@ export interface ModalData {
|
|||||||
export class ModalComponent implements OnInit {
|
export class ModalComponent implements OnInit {
|
||||||
extra: string;
|
extra: string;
|
||||||
subscription: Subscription;
|
subscription: Subscription;
|
||||||
|
yesno: Observable<boolean>;
|
||||||
|
yes: () => void;
|
||||||
|
no: () => void;
|
||||||
|
close: () => void;
|
||||||
|
|
||||||
constructor(public dialogRef: MatDialogRef<ModalComponent>, @Inject(MAT_DIALOG_DATA) public data: ModalData) {
|
constructor(public dialogRef: MatDialogRef<ModalComponent>, @Inject(MAT_DIALOG_DATA) public data: ModalData) {
|
||||||
this.subscription = null;
|
this.subscription = null;
|
||||||
|
this.resetCallbacks();
|
||||||
|
// Notifies on case of yes or not to subscriber
|
||||||
|
this.yesno = new Observable<boolean>((observer) => {
|
||||||
|
this.yes = () => {
|
||||||
|
observer.next(true);
|
||||||
|
observer.complete();
|
||||||
|
};
|
||||||
|
this.no = () => {
|
||||||
|
observer.next(false);
|
||||||
|
observer.complete();
|
||||||
|
};
|
||||||
|
this.close = () => {
|
||||||
|
this.doClose();
|
||||||
|
observer.next(false);
|
||||||
|
observer.complete();
|
||||||
|
};
|
||||||
|
const self = this;
|
||||||
|
return {unsubscribe() {
|
||||||
|
self.resetCallbacks();
|
||||||
|
}};
|
||||||
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
resetCallbacks() {
|
||||||
|
this.yes = this.no = () => { this.close(); };
|
||||||
|
this.close = () => { this.doClose(); };
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Invoked on closed modal component
|
* Invoked on closed modal component
|
||||||
@ -33,7 +69,7 @@ export class ModalComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
close(): void {
|
doClose(): void {
|
||||||
this.dialogRef.close();
|
this.dialogRef.close();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -45,7 +81,7 @@ export class ModalComponent implements OnInit {
|
|||||||
this.extra = ' (' + Math.floor(miliseconds / 1000) + ' ' + django.gettext('seconds') + ') ';
|
this.extra = ' (' + Math.floor(miliseconds / 1000) + ' ' + django.gettext('seconds') + ') ';
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
initAlert() {
|
||||||
if (this.data.autoclose > 0) {
|
if (this.data.autoclose > 0) {
|
||||||
this.dialogRef.afterClosed().subscribe(res => {
|
this.dialogRef.afterClosed().subscribe(res => {
|
||||||
this.closed();
|
this.closed();
|
||||||
@ -64,4 +100,16 @@ export class ModalComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
initYesNo() {
|
||||||
|
// data.autoclose is not used
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
if ( this.data.type === DialogType.yesno ) {
|
||||||
|
this.initYesNo();
|
||||||
|
} else {
|
||||||
|
this.initAlert();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -12,9 +12,8 @@
|
|||||||
<!-- user menu -->
|
<!-- user menu -->
|
||||||
<mat-menu #userMenu="matMenu">
|
<mat-menu #userMenu="matMenu">
|
||||||
<button mat-menu-item *ngIf="api.user.isStaff" (click)="admin()"><i class="material-icons">dashboard</i><uds-translate>Dashboard</uds-translate></button>
|
<button mat-menu-item *ngIf="api.user.isStaff" (click)="admin()"><i class="material-icons">dashboard</i><uds-translate>Dashboard</uds-translate></button>
|
||||||
<button mat-menu-item routerLink="/"><i class="material-icons">settings</i><uds-translate>Preferences</uds-translate></button>
|
|
||||||
<button mat-menu-item routerLink="/downloads"><i class="material-icons">file_download</i><uds-translate>Downloads</uds-translate></button>
|
<button mat-menu-item routerLink="/downloads"><i class="material-icons">file_download</i><uds-translate>Downloads</uds-translate></button>
|
||||||
<button mat-menu-item (click)='logout()'><i class="material-icons" style="color: red">exit_to_app</i><uds-translate>Logout</uds-translate></button>
|
<button mat-menu-item (click)='logout()'><i class="material-icons highlight">exit_to_app</i><uds-translate>Logout</uds-translate></button>
|
||||||
</mat-menu>
|
</mat-menu>
|
||||||
|
|
||||||
<!-- shriked menu -->
|
<!-- shriked menu -->
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { Injectable } from '@angular/core';
|
import { Injectable } from '@angular/core';
|
||||||
|
|
||||||
import { ModalComponent, ModalData } from './modal/modal.component';
|
import { ModalComponent, DialogType } from './modal/modal.component';
|
||||||
import { MatDialog } from '@angular/material';
|
import { MatDialog } from '@angular/material';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
@ -12,8 +12,19 @@ export class UDSGuiService {
|
|||||||
const width = window.innerWidth < 800 ? '80%' : '40%';
|
const width = window.innerWidth < 800 ? '80%' : '40%';
|
||||||
const dialogRef = this.dialog.open(ModalComponent, {
|
const dialogRef = this.dialog.open(ModalComponent, {
|
||||||
width: width,
|
width: width,
|
||||||
data: { title: title, body: message, autoclose: autoclose },
|
data: { title: title, body: message, autoclose: autoclose, type: DialogType.alert },
|
||||||
disableClose: true,
|
disableClose: true,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
yesno(title: string, message: string) {
|
||||||
|
const width = window.innerWidth < 800 ? '80%' : '40%';
|
||||||
|
const dialogRef = this.dialog.open(ModalComponent, {
|
||||||
|
width: width,
|
||||||
|
data: { title: title, body: message, type: DialogType.yesno },
|
||||||
|
disableClose: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
return dialogRef.componentInstance.yesno;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -50,7 +50,7 @@ export class Plugin {
|
|||||||
this.api.enabler(params[0], params[1]).subscribe(data => {
|
this.api.enabler(params[0], params[1]).subscribe(data => {
|
||||||
if (data.error !== undefined && data.error !== '') {
|
if (data.error !== undefined && data.error !== '') {
|
||||||
// TODO: show the error correctly
|
// TODO: show the error correctly
|
||||||
alert(data.error);
|
this.api.gui.alert(django.gettext('Error launching service'), data.error);
|
||||||
} else {
|
} else {
|
||||||
if (window.location.protocol === 'https:') {
|
if (window.location.protocol === 'https:') {
|
||||||
// Ensures that protocol is https also for plugin, fixing if needed UDS provided info
|
// Ensures that protocol is https also for plugin, fixing if needed UDS provided info
|
||||||
|
@ -9,8 +9,9 @@ export class TranslateDirective implements OnInit {
|
|||||||
constructor(private el: ElementRef) { }
|
constructor(private el: ElementRef) { }
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
// Simply substitute outer html with translation
|
// Simply substitute innter html with translation
|
||||||
this.el.nativeElement.outerHTML = django.gettext(this.el.nativeElement.innerHTML);
|
|
||||||
|
this.el.nativeElement.innerHTML = django.gettext(this.el.nativeElement.innerHTML);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -23,6 +23,8 @@ export interface UDSUrls {
|
|||||||
readonly services: string;
|
readonly services: string;
|
||||||
readonly admin: string;
|
readonly admin: string;
|
||||||
readonly enabler: string;
|
readonly enabler: string;
|
||||||
|
readonly resetter: string;
|
||||||
|
readonly releaser: string;
|
||||||
readonly galleryImage: string;
|
readonly galleryImage: string;
|
||||||
readonly transportIcon: string;
|
readonly transportIcon: string;
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
|
|||||||
import { Router } from '@angular/router';
|
import { Router } from '@angular/router';
|
||||||
import { User, UDSConfig, Downloadable } from './types/config';
|
import { User, UDSConfig, Downloadable } from './types/config';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { JSONServicesInformation, JSONEnabledService } from './types/services';
|
import { JSONServicesInformation, JSONEnabledService, JSONService } from './types/services';
|
||||||
import { UDSGuiService } from './gui/uds-gui.service';
|
import { UDSGuiService } from './gui/uds-gui.service';
|
||||||
import { Plugin } from './helpers/plugin';
|
import { Plugin } from './helpers/plugin';
|
||||||
|
|
||||||
@ -41,6 +41,18 @@ export class UDSApiService {
|
|||||||
return this.http.get<JSONEnabledService>(enabler);
|
return this.http.get<JSONEnabledService>(enabler);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Services resetter */
|
||||||
|
resetter(serviceId: string) {
|
||||||
|
const resetter = this.config.urls.resetter.replace('param1', serviceId);
|
||||||
|
return this.http.get<JSONService>(resetter);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Services resetter */
|
||||||
|
releaser(serviceId: string) {
|
||||||
|
const releaser = this.config.urls.resetter.replace('param1', serviceId);
|
||||||
|
return this.http.get<JSONService>(releaser);
|
||||||
|
}
|
||||||
|
|
||||||
/* Images & static related */
|
/* Images & static related */
|
||||||
galleryImageURL(imageId: string) {
|
galleryImageURL(imageId: string) {
|
||||||
return this.config.urls.galleryImage.replace('param1', imageId);
|
return this.config.urls.galleryImage.replace('param1', imageId);
|
||||||
|
@ -16,3 +16,7 @@ i.material-icons {
|
|||||||
vertical-align: middle !important;
|
vertical-align: middle !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* colors for remmarks */
|
||||||
|
.highlight {
|
||||||
|
color: red;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user