yo-vscode/type-script-helper/src/WebviewPanelCostOfDelay.ts

import * as vscode from "vscode";
import { getNonce } from "./getNonce";
import { apiBaseUrl } from "./constants";
import { PostMessage } from "./PostMessage";
import { title } from "process";

export class WebviewPanelCostOfDelay {
  /**
   * Track the currently panel. Only allow a single panel to exist at a time.
   */
  public static _site: string;
  public static _view: string;
  public static currentPanel: WebviewPanelCostOfDelay | undefined;

  public static readonly viewType = "web-view-panel";

  private _disposables: vscode.Disposable[] = [];

  public static createOrShow(extensionContext: vscode.ExtensionContext, site: string, view: string) {
    this._site = site;
    this._view = view;

    const column = vscode.window.activeTextEditor
      ? vscode.window.activeTextEditor.viewColumn
      : undefined;

    // If we already have a panel, show it.
    if (WebviewPanelCostOfDelay.currentPanel) {
      WebviewPanelCostOfDelay.currentPanel._panel.reveal(column);
      WebviewPanelCostOfDelay.currentPanel._update(site, view);
      return;
    }

    const title = view === '' ? 'Cost of Delay (CoD)' :
      view === 'EFFORT' ? 'Effort' :
        view === 'LIVE' ? 'Cost of Delay (CoD) - Live Update' :
          view === 'WSJF' ? 'Weightest Shortest Job First calculation (WSJF)' :
            'CoD';

    // Otherwise, create a new panel.
    const panel = vscode.window.createWebviewPanel(
      WebviewPanelCostOfDelay.viewType,
      title,
      column || vscode.ViewColumn.One,
      {
        // Enable javascript in the webview
        enableScripts: true,

        // And restrict the webview to only loading content from our extension's `media` directory.
        localResourceRoots: [
          vscode.Uri.joinPath(extensionContext.extensionUri, "media"),
          vscode.Uri.joinPath(extensionContext.extensionUri, "out/compiled"),
        ],
      }
    );

    WebviewPanelCostOfDelay.currentPanel = new WebviewPanelCostOfDelay(panel, extensionContext, site, view);
  }

  public static kill() {
    WebviewPanelCostOfDelay.currentPanel?.dispose();
    WebviewPanelCostOfDelay.currentPanel = undefined;
  }

  public static revive(panel: vscode.WebviewPanel, extensionContext: vscode.ExtensionContext) {
    WebviewPanelCostOfDelay.currentPanel = new WebviewPanelCostOfDelay(panel, extensionContext, this._site, this._view);
  }

  private constructor(private readonly _panel: vscode.WebviewPanel, private readonly _extensionContext: vscode.ExtensionContext, site: string, view: string) {

    // Set the webview's initial html content
    this._update(site, view);

    // Listen for when the panel is disposed
    // This happens when the user closes the panel or when the panel is closed programmatically
    this._panel.onDidDispose(() => this.dispose(), null, this._disposables);

    // // Handle messages from the webview
    // this._panel.webview.onDidReceiveMessage(
    //   (message) => {
    //     switch (message.command) {
    //       case "alert":
    //         vscode.window.showErrorMessage(message.text);
    //         return;
    //     }
    //   },
    //   null,
    //   this._disposables
    // );
  }

  public dispose() {
    WebviewPanelCostOfDelay.currentPanel = undefined;

    // Clean up our resources
    this._panel.dispose();

    while (this._disposables.length) {
      const x = this._disposables.pop();
      if (x) {
        x.dispose();
      }
    }
  }

  private async _update(site: string, view: string) {
    const webview = this._panel.webview;

    this._panel.webview.html = this._getHtmlForWebview(site, view, webview);
    webview.onDidReceiveMessage(async (postMessage: PostMessage) => {
      switch (postMessage.type) {
        case "on-info":
          if (!postMessage.value)
            return;
          vscode.window.showInformationMessage(postMessage.value);
          break;
        case "on-error":
          if (!postMessage.value)
            return;
          vscode.window.showErrorMessage(postMessage.value);
          break;
        default:
          vscode.window.showErrorMessage(postMessage.type);
          break;
      }
    });
  }

  private _getHtmlForWebview(site: string, view: string, webview: vscode.Webview) {
    const baseUri = 'https://eaf-dev.mes.infineon.com';

    const styleBootstrapUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "bootstrap.min.css")
    );
    const styleCostOfDelayUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "cod.css")
    );
    const scriptJQueryUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "jquery-1.6.4.min.js")
    );
    const scriptSignalRUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "jquery.signalR-2.4.3.min.js")
    );
    const scriptCostOfDelayUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "cost-of-delay.js")
    );

    // Use a nonce to only allow a specific script to be run.
    const nonce = getNonce();

    return `<!DOCTYPE html>
      <html lang="en">

      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Infineon - Cost of Delay (CoD) (see @SCALE formula)</title>
          <link href="${styleBootstrapUri}" rel="stylesheet" />
          <link href="${styleCostOfDelayUri}" rel="stylesheet" />
          <script nonce="${nonce}" src="${scriptJQueryUri}"></script>
          <script nonce="${nonce}" src="${scriptSignalRUri}"></script>
          <script nonce="${nonce}" src="${baseUri}/signalr/hubs"></script>
          <script nonce="${nonce}" src="${baseUri}/js/cod-b.js?v=2025-01-22-10-49" type="text/javascript"></script>
          <script nonce="${nonce}">
            const _webviewSite = '${site}';
            const _webviewView = '${view}';
            const acquiredVsCodeApi = acquireVsCodeApi();
            const apiBaseUrl = ${JSON.stringify(apiBaseUrl)}
            const _webviewUsername = '${process.env.USERNAME}';
            const _webviewMachineId = '${vscode.env.machineId}';
          </script>
      </head>

      <body>
          <div class="navbar navbar-fixed-top">
              <div class="container-fluid">
                  <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                      </button>
                      <div class="navbar-brand">
                          <span id="siteHeader">&nbsp;</span> -
                          <span id="th-span">&nbsp;</span>
                          <button id="toggle">Toggle</button>
                      </div>
                  </div>
                  <div class="navbar-collapse collapse">
                      <ul class="nav navbar-nav">
                      </ul>
                      <p class="navbar-text navbar-right">
                          &nbsp;
                      </p>
                  </div>
              </div>
          </div>
          <div class="container-fluid body-content" style="margin-top: 40px; margin-left: 15px;">
              <div id="HeaderGridDiv">
                  <table id="HeaderGrid" border="1"></table>
              </div>

              <br />&nbsp;

              <div id="AllGridDiv">
                  <table id="AllGrid"></table>
              </div>

              <textarea id="AllTextarea" rows="20" cols="147"></textarea>
          </div>

				<script nonce="${nonce}" src="${scriptCostOfDelayUri}"></script>
      </body>

      </html>`;
  }
}