workplacex-cli
Version:
Create database applications with Angular 11, ASP.NET Core 5.0 and MS-SQL for Linux and Windows.
275 lines (243 loc) • 9.54 kB
text/typescript
import { Component, ElementRef, Input, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { CommandJson, DataService, Json } from '../data.service';
/* Selector */
export class Selector {
json!: Json
}
/* Page */
export class Page {
json!: Json
trackBy(index: any, item: any) {
return item.TrackBy;
}
}
/* Button */
export class Button {
constructor(private dataService: DataService){
}
json!: Json
click(){
this.json.IsShowSpinner = true;
this.dataService.update(<CommandJson> { CommandEnum: 1, ComponentId: this.json.Id });
}
}
/* Html */
export class Html {
json!: Json
constructor(private dataService: DataService, private sanitizer: DomSanitizer){
}
textHtml: SafeHtml | undefined;
textHtmlPrevious: any = false; // Detect TextHtml change. Also if text is null on first change (false)!
isNoSanatizePrevious: boolean | undefined; // Detect IsNoSanatize change.
ngOnChanges() {
if (this.json.IsNoSanatize) {
if (this.textHtmlPrevious != this.json.TextHtml || this.isNoSanatizePrevious != this.json.IsNoSanatize) { // Change detection
this.textHtmlPrevious = this.json.TextHtml;
this.textHtml = this.sanitizer.bypassSecurityTrustHtml(this.json.TextHtml ? this.json.TextHtml : "");
if (this.json.IsNoSanatizeScript != null) {
setTimeout(() => eval(<string>this.json.IsNoSanatizeScript), 0);
}
}
} else {
this.textHtml = this.json.TextHtml;
}
this.isNoSanatizePrevious = this.json.IsNoSanatize;
}
div: ElementRef | undefined;
click(event: MouseEvent){
var element = event.target;
do {
if (element instanceof HTMLAnchorElement) {
let anchor = <HTMLAnchorElement>element;
if (anchor.classList.contains("navigatePost")) {
event.preventDefault();
this.json.IsShowSpinner = true;
this.dataService.update(<CommandJson> { CommandEnum: 16, ComponentId: this.json.Id, NavigatePath: anchor.pathname });
}
break;
}
if (element instanceof HTMLButtonElement) {
let button = <HTMLButtonElement>element;
this.json.IsShowSpinner = true;
this.dataService.update(<CommandJson> { CommandEnum: 19, ComponentId: this.json.Id, HtmlButtonId: button.id });
}
if (element instanceof HTMLElement) {
element = (<HTMLElement>element).parentElement;
} else {
break;
}
} while (element != this.div?.nativeElement && element != null)
}
}
/* Div */
export class Div {
json!: Json;
trackBy(index: any, item: any) {
return item.TrackBy;
}
}
/* DivContainer */
export class DivContainer {
json!: Json;
trackBy(index: any, item: any) {
return index; // or item.id
}
}
/* BingMap */
declare var scriptBingMap: any;
export class BingMap {
constructor(dataService: DataService){
this.dataService = dataService;
}
json!: Json;
dataService: DataService;
map: ElementRef | undefined;
ngOnChanges(changes: SimpleChanges) {
if (changes.json.previousValue == null || changes.json.previousValue.Lat != changes.json.currentValue.Lat || changes.json.previousValue.Long != changes.json.currentValue.Long)
{
if (this.dataService.json.IsServerSideRendering == false) {
this.scriptBingMapInit();
scriptBingMap({ Lat: changes.json.currentValue.Lat, Long: changes.json.currentValue.Long});
}
}
}
scriptBingMapInit() {
if (this.dataService.document.getElementById('scriptBingMap')) {
// scriptBingMap is defined
return;
}
const script = this.dataService.document.createElement('script');
script.id = "scriptBingMap";
script.text = `
scriptBingMapIsInit = false;
scriptBingMapPos = null;
function scriptBingMap(pos) {
if (!scriptBingMapIsInit && pos == null) {
scriptBingMapIsInit = true;
}
if (pos != null) {
scriptBingMapPos = pos;
}
if (pos == null && scriptBingMapPos != null) {
pos = scriptBingMapPos;
}
if (scriptBingMapIsInit) {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
map.setView({
center: new Microsoft.Maps.Location(pos.Lat, pos.Long),
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
zoom: 15
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
map.entities.push(pushpin);
}
}
`
this.dataService.renderer.appendChild(this.dataService.document.head, script);
const scriptApi = this.dataService.document.createElement('script');
scriptApi.src = 'https://www.bing.com/api/maps/mapcontrol?key=' + this.json.Key + '&callback=scriptBingMap';
scriptApi.async = true;
scriptApi.defer = true;
this.dataService.renderer.appendChild(this.dataService.document.head, scriptApi);
}
}
/* Dialpad */
export class Dialpad {
constructor(private dataService: DataService){
}
json!: Json
click(text: string){
this.json.IsShowSpinner = true;
this.dataService.update(<CommandJson> { CommandEnum: 21, ComponentId: this.json.Id, DialpadText: text });
}
}