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));