dbg

Author: malcolm-sparkfun

kernel/src/components/Dialog.ts

@@ -1,6 +1,4 @@
-import { Card } from './Card';
-import { FlashCard } from './FlashCard';
-// import { ConnectCard } from './ConnectCard';
+import { ConnectCard } from './ConnectCard';
 import { ServiceContainer } from '../services/ServiceContainer';
 
 export interface DialogProps {
@@ -10,9 +8,7 @@ export interface DialogProps {
 
 export class Dialog {
   private element: HTMLDivElement;
-  // private connectCard: ConnectCard;
-  private flashCard: FlashCard;
-  private resetCard: Card;
+  private connectCard: ConnectCard;
 
   constructor(props: DialogProps) {
     this.element = document.createElement('div');
@@ -27,38 +23,17 @@ export class Dialog {
     const header = this.createHeader();
     const optionsContainer = this.createOptionsContainer();
 
-    // this.connectCard = new ConnectCard(
-    // {
-    //   action: 'connect',
-    //   icon: '🔌',
-    //   title: 'Connect Device',
-    //   description: 'Connect to RedBoard via serial',
-    //   color: 'var(--ui-navy)'
-    // },
-    // props.serviceContainer.deviceService);
-    
-    this.flashCard = new FlashCard({
-      action: 'flash',
-      icon: '⚡️',
-      title: 'Flash Device',
-      description: 'Flash your device with the latest firmware',
-      color: 'var(--ui-red)'
-    }, 
-    () => props.serviceContainer.flashService.flashDevice(),
-    props.serviceContainer.firmwareService,
+    this.connectCard = new ConnectCard(
+    {
+      action: 'connect',
+      icon: '🔌',
+      title: 'Connect Device',
+      description: 'Connect to RedBoard via serial',
+      color: 'var(--ui-navy)'
+    },
     props.serviceContainer.deviceService);
 
-    this.resetCard = new Card({
-      action: 'reset-esp',
-      icon: '🔄',
-      title: 'Hard reset Esp',
-      description: 'Hard reset esp chip',
-      color: 'var(--ui-red)'
-    }, () => props.serviceContainer.deviceService.reset());
-
-    // optionsContainer.appendChild(this.connectCard.getElement());
-    optionsContainer.appendChild(this.flashCard.getElement());
-    optionsContainer.appendChild(this.resetCard.getElement());
+    optionsContainer.appendChild(this.connectCard.getElement());
 
     let content = document.createElement('div');
     content.className = 'welcome-dialog';

kernel/src/panel.ts

@@ -1,42 +1,42 @@
 import { globalStyles, animations, overlayStyles, dialogStyles, minimizedStyles, cardStyles, buttonStyles, progressOverlayStyles } from './styles';
 import { MinimizedButton } from './components/MinimizedButton';
-// import { Dialog } from './components/Dialog';
-//import { ServiceContainer } from './services/ServiceContainer';
-
-// class DialogPanel {
-//   private element: HTMLDivElement;
-
-//   constructor(dialog: Dialog) {
-//     this.element = document.createElement('div');
-//     this.element.id = 'dialog-widget-panel';
-//     this.element.appendChild(dialog.getElement());
-//   }
-
-//   show(): void {
-//     this.element.style.display = 'block';
-//     this.element.classList.remove('minimized');
-//     this.element.classList.add('visible');
-
-//     this.element.style.transition = 'opacity 0.3s ease-in-out';
-//     this.element.style.opacity = '1';
-//   }
-
-//   hide(): void {
-//     this.element.classList.add('minimizing');
-//     this.element.classList.remove('visible');
-//     this.element.style.opacity = '0';
-
-//     setTimeout(() => {
-//       this.element.style.display = 'none';
-//       this.element.classList.remove('minimizing');
-//       this.element.classList.add('minimized');
-//     }, 300);
-//   }
-
-//   getElement(): HTMLDivElement {
-//     return this.element;
-//   }
-// }
+import { Dialog } from './components/Dialog';
+import { ServiceContainer } from './services/ServiceContainer';
+
+class DialogPanel {
+  private element: HTMLDivElement;
+
+  constructor(dialog: Dialog) {
+    this.element = document.createElement('div');
+    this.element.id = 'dialog-widget-panel';
+    this.element.appendChild(dialog.getElement());
+  }
+
+  show(): void {
+    this.element.style.display = 'block';
+    this.element.classList.remove('minimized');
+    this.element.classList.add('visible');
+
+    this.element.style.transition = 'opacity 0.3s ease-in-out';
+    this.element.style.opacity = '1';
+  }
+
+  hide(): void {
+    this.element.classList.add('minimizing');
+    this.element.classList.remove('visible');
+    this.element.style.opacity = '0';
+
+    setTimeout(() => {
+      this.element.style.display = 'none';
+      this.element.classList.remove('minimizing');
+      this.element.classList.add('minimized');
+    }, 300);
+  }
+
+  getElement(): HTMLDivElement {
+    return this.element;
+  }
+}
 
 class MinimizedPanel {
   private element: HTMLDivElement;
@@ -89,10 +89,10 @@ export default class WelcomePanel {
   private element: HTMLDivElement;
 
   private minimizedPanel: MinimizedPanel;
-  // private dialogPanel: DialogPanel;
+  private dialogPanel: DialogPanel;
 
-  // constructor(private serviceContainer: ServiceContainer) {
-  constructor() {
+  constructor(private serviceContainer: ServiceContainer) {
+  // constructor() {
 
     this.element = document.createElement('div');
     this.element.id = 'jp-kernel-welcome-panel';
@@ -128,14 +128,14 @@ export default class WelcomePanel {
     const minimizedButton = new MinimizedButton(() => this.show());
     this.minimizedPanel = new MinimizedPanel(minimizedButton);
 
-    // const dialog = new Dialog({
-    //   closeDialog: () => this.hide(),
-    //   serviceContainer: this.serviceContainer,
-    // });
-    // this.dialogPanel = new DialogPanel(dialog);
+    const dialog = new Dialog({
+      closeDialog: () => this.hide(),
+      serviceContainer: this.serviceContainer,
+    });
+    this.dialogPanel = new DialogPanel(dialog);
 
     this.element.appendChild(this.minimizedPanel.getElement());
-    // this.element.appendChild(this.dialogPanel.getElement());
+    this.element.appendChild(this.dialogPanel.getElement());
 
     document.addEventListener('deviceConnected', (event: Event) => {
       const customEvent = event as CustomEvent;
@@ -182,10 +182,11 @@ export default class WelcomePanel {
 
     // this.dialogPanel.show();
     //this.minimizedPanel.hide();
+    this.minimizedPanel.show();
   }
 
   hide(): void {
-    // this.dialogPanel.hide();
+    this.dialogPanel.hide();
     this.minimizedPanel.show();
   }
 }