diff --git a/pdb-js/src/app/customizable-grid/customizable-grid.component.html b/pdb-js/src/app/customizable-grid/customizable-grid.component.html index 7e514fc..0533647 100644 --- a/pdb-js/src/app/customizable-grid/customizable-grid.component.html +++ b/pdb-js/src/app/customizable-grid/customizable-grid.component.html @@ -56,6 +56,7 @@ .cdk-drag-preview { box-sizing: border-box; + border-color: red; border-radius: 4px; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -63,6 +64,7 @@ .cdk-drag-placeholder { opacity: 0.3; + border-color: green; } .cdk-drag-animating { @@ -96,6 +98,7 @@ button { >
@@ -105,6 +108,6 @@ button { (cdkDropListDropped)="onDropListDropped()" *ngFor="let item of items" > -
{{ item }}
+
{{ item }}
diff --git a/pdb-js/src/app/customizable-grid/customizable-grid.component.ts b/pdb-js/src/app/customizable-grid/customizable-grid.component.ts index 6da1c2d..848a4e8 100644 --- a/pdb-js/src/app/customizable-grid/customizable-grid.component.ts +++ b/pdb-js/src/app/customizable-grid/customizable-grid.component.ts @@ -104,6 +104,7 @@ export class CustomizableGridComponent implements AfterViewInit { this.dragRef = item._dragRef; placeholderElement.style.display = ''; + placeholderElement.style.backgroundColor ='pink'; dropElement.parentElement!.insertBefore( placeholderElement, diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts index 9d80e7c..22c6b11 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts @@ -111,7 +111,7 @@ export class DashboardComponent implements OnInit { data: {text:""}, width: '600px' }).afterClosed().subscribe((text: string) => { - const widget = new TextWidget(crypto.randomUUID(),'MEDIUM', text); + const widget = new TextWidget((window).randomId(),'MEDIUM', text); this.dashboard!.texts.push(widget); this.dashboard!.arrangement[0].push(widget.id); }); @@ -124,7 +124,7 @@ export class DashboardComponent implements OnInit { height: 'calc(100% - 1em)' }).afterClosed().subscribe((config: PlotConfig | "") => { if (config != "" && config.query.length > 0) { - const widget = new PlotWidget(crypto.randomUUID(), 'MEDIUM', config); + const widget = new PlotWidget((window).randomId(), 'MEDIUM', config); this.dashboard!.plots.push(widget); this.dashboard!.arrangement[0].push(widget.id); this.plotWidgetRenderData.push(new PlotWidgetRenderData(widget)); diff --git a/pdb-js/src/app/dashboard.service.ts b/pdb-js/src/app/dashboard.service.ts index 8a55b05..b68e48b 100644 --- a/pdb-js/src/app/dashboard.service.ts +++ b/pdb-js/src/app/dashboard.service.ts @@ -77,7 +77,7 @@ export class PlotWidget extends BaseWidget { const fullHeight = window.innerHeight-30; const request = new PlotRequest( - (window).submitterId+crypto.randomUUID(), + (window).submitterId+(window).randomId(), widget.config, { 'main': new RenderOptions(height,width, false, true), diff --git a/pdb-js/src/main.ts b/pdb-js/src/main.ts index af4dead..73613d2 100644 --- a/pdb-js/src/main.ts +++ b/pdb-js/src/main.ts @@ -8,7 +8,11 @@ if (environment.production) { enableProdMode(); } -(window).submitterId = crypto.randomUUID(); +(window).randomId = () => { + return Math.random().toString(36).replace('0.', '') + Math.random().toString(36).replace('0.', ''); +}; + +(window).submitterId = (window).randomId(); platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));