Local file import is added as a data source

kocatepedogu · Sep 20, 2023 · b92b50c · b92b50c
1 parent f6e96fc
commit b92b50c
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 27 deletions.
diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -7,7 +7,7 @@
 <body>
   <div id="form-div">
     <br>
-    <form method="GET" action="./sounding.html">
+    <form method="GET" action="./viewer.html">
       <ul id="options">
         <li>
           <label for="srcselector">Source</label>

diff --git a/src/renderer/index.ts b/src/renderer/index.ts
@@ -96,6 +96,20 @@ export class Options {
         (type) => {this.updateTypeNOMADS(type)},
         this.newOption('gfs', 'GFS 0.25', true));
     }
+
+    if (src == 'import') {
+      this.newFileInput("file", "File: ", (input) => {
+        const file = input.files![0];
+        const reader = new FileReader();
+        reader.onload = (evt) => {
+          localStorage.setItem('import', <string>evt.target!.result);
+        };
+        reader.onerror = () => {
+          alert('Cannot read given file');
+        }
+        reader.readAsText(file, 'UTF-8');
+      });
+    }
   }
 
   private updateTypeRucsoundings(type: string) {
@@ -208,15 +222,15 @@ export class Options {
   }
 
   private newOption(name: string, text: string, selected: boolean = false) {
-    const option = <HTMLOptionElement>document.createElement('option');
+    const option = document.createElement('option');
     option.textContent = text;
     option.value = name;
     option.selected = selected;
     return option;
   }
 
   private newSelect(name: string, label: string, handler: (value: string) => void, ...options: HTMLOptionElement[]) {
-    const select = <HTMLSelectElement>document.createElement('select');
+    const select = document.createElement('select');
     select.name = name;
     select.id = name;
     select.addEventListener('input', () => {
@@ -227,11 +241,11 @@ export class Options {
       select.add(opt);
     }
 
-    const lbl = <HTMLLabelElement>document.createElement('label');
+    const lbl = document.createElement('label');
     lbl.textContent = label;
     lbl.appendChild(select);
 
-    const li = <HTMLLIElement>document.createElement('li');
+    const li = document.createElement('li');
     li.appendChild(lbl)
 
     this.optionList.appendChild(li);
@@ -241,24 +255,44 @@ export class Options {
   }
 
   private newTextbox(name: string, label: string, value: string = '') {
-    const textbox = <HTMLInputElement>document.createElement('input');
+    const textbox = document.createElement('input');
     textbox.type = 'text';
     textbox.value = value;
     textbox.name = name;
     textbox.id = name;
 
-    const lbl = <HTMLLabelElement>document.createElement('label');
+    const lbl = document.createElement('label');
     lbl.textContent = label;
     lbl.appendChild(textbox);
 
-    const li = <HTMLLIElement>document.createElement('li');
+    const li = document.createElement('li');
     li.appendChild(lbl);
 
     this.optionList.appendChild(li);
     textbox.dispatchEvent(new InputEvent('input'));
 
     return textbox;
   }
+
+  private newFileInput(name: string, label: string, handler: (input: HTMLInputElement) => void) {
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.name = name;
+    fileInput.id = name;
+    fileInput.addEventListener('input', () => {
+      handler(fileInput);
+    });
+
+    const lbl = document.createElement('label');
+    lbl.textContent = label;
+    lbl.appendChild(fileInput);
+
+    const li =document.createElement('li');
+    li.appendChild(lbl);
+
+    this.optionList.appendChild(li);
+    return fileInput;
+  }
 }
 
 window.initializeMapAndOptions = function () {

diff --git a/src/renderer/sounding.css → src/renderer/viewer.css b/src/renderer/sounding.css → src/renderer/viewer.css
diff --git a/src/renderer/sounding.html → src/renderer/viewer.html b/src/renderer/sounding.html → src/renderer/viewer.html
@@ -23,7 +23,7 @@
 <head>
   <title>Sounding Viewer</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="sounding.css">
+  <link rel="stylesheet" href="viewer.css">
 </head>
 
 <body>

diff --git a/src/renderer/sounding.ts → src/renderer/viewer.ts b/src/renderer/sounding.ts → src/renderer/viewer.ts
@@ -33,9 +33,10 @@ function getData(){
   switch (src) {
     case 'rucsoundings':
       return rucsoundings.fetchGSD(url.searchParams);
-    case "nomads": {
+    case "nomads":
       return nomads.fetchGRIB(url.searchParams);
-    }
+    case 'import':
+      return rucsoundings.parse(localStorage.getItem('import')!);
   }
 
   throw new Error("Not implemented");
@@ -44,6 +45,11 @@ function getData(){
 function setTitle() {
   const url = new URL(window.location.href);
   const src = url.searchParams.get('src');
+  if (src == 'import') {
+    document.getElementById('sounding-diagram-title')!.innerText = 'Imported';
+    return;
+  }
+
   const type = url.searchParams.get('type');
   const lat = parseFloat(url.searchParams.get('lat')!).toFixed(4);
   const lon = parseFloat(url.searchParams.get('lon')!).toFixed(4);
@@ -64,23 +70,20 @@ function setTitle() {
     `${modelName} ${lat},${lon} ${hour}h`;
 }
 
-getData;
+window.initializeSounding = async function() {
+  const src = await getData();
 
-window.initializeSounding = function() {
-  //setTitle();
-  setTitle;
-  rucsoundings.example().then(async (src: Iterable<data.LevelSource>) => {
-    const sounding = new data.Sounding(src);
-    const plt = new diagram.SoundingPlot(sounding);
-    const ind = new indices.IndexTable(sounding);
-    new table.SoundingTable(sounding);
-
-    plt.update();
-    ind.update();
+  setTitle();
+  const sounding = new data.Sounding(src);
+  const plt = new diagram.SoundingPlot(sounding);
+  const ind = new indices.IndexTable(sounding);
+  new table.SoundingTable(sounding);
+
+  plt.update();
+  ind.update();
 
-    document.getElementById('main-div')!.style.visibility = "visible";
-    document.getElementById('loading-div')!.style.visibility = "hidden";
-  });
+  document.getElementById('main-div')!.style.visibility = "visible";
+  document.getElementById('loading-div')!.style.visibility = "hidden";
 
   new Dialog("sounding-diagram-settings");
 }
diff --git a/webpack.config.cjs b/webpack.config.cjs
@@ -40,7 +40,7 @@ module.exports = [
 
   Object.assign({}, common, {
     target: 'electron-renderer',
-    entry: ['./src/renderer/index.ts', './src/renderer/sounding.ts'],
+    entry: ['./src/renderer/index.ts', './src/renderer/viewer.ts'],
     output: {
       path: path.resolve(__dirname, 'src/renderer'),
       filename: 'bundle.js'