Merge pull request #5 from moxon6/add-import-export

moxon6 · web-flow · commit 0793324e5720 · 2020-09-28T23:31:13.000+01:00
Add import/export buttons
diff --git a/index.html b/index.html
@@ -8,18 +8,40 @@
    <script type="text/python3" src="app.py"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.7.5/brython.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.7.5/brython_stdlib.js"></script>
-   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ace.js"
-      charset="utf-8"></script>
-   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ext-language_tools.js"
-      charset="utf-8"></script>
+   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ace.js" charset="utf-8"></script>
+   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ext-language_tools.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/theme-monokai.js"></script>
+   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.js"></script>
    <script>
       // Workaround to allow brython to handle AttributeErrors correctly
       window.$raise = () => null;
    </script>
+   <script>
+      function configure() {
+         brython({debug:1})
+         
+         document.querySelector("#export_button")
+            .addEventListener("click", () => { 
+               saveAs(
+                  new Blob([ window.ace.edit("editor").getValue() ]),
+                  "bot.py"
+               ) 
+            })
+
+         document.querySelector("#import")
+            .addEventListener("change", function(e) { 
+               const file = e.target.files[0];
+               if (!file) return;
+               
+               const reader = new FileReader();
+               reader.onload = e => window.ace.edit("editor").setValue(e.target.result);                  
+               reader.readAsText(file);
+            })
+      }
+   </script>
 </head>
 
-<body onload="brython({debug:1})">
+<body onload="configure()">
    <div class="app">
       <div class="editor-panel">
          <div id="editor">
@@ -29,6 +51,21 @@
             </div>
          </div>
          <div class="button-container">
+            <div>
+               <button id="import_button" class="option-button">
+                  <label for="import">
+                     <span>Import</span>
+                     <i class="fa fa-upload"></i>
+                  </label>
+                  <input id="import" type="file" onchange="onImportSelected(this)"/>
+               </button>
+            </div>
+            <div>
+               <button id="export_button" class="option-button" onclick="onExportClick()">
+                  <span>Export</span>
+                  <i class="fa fa-download"></i>
+               </button>
+            </div>
             <div>
                <button id="reset_button" class="option-button">
                   <span>Reset</span>
diff --git a/styles/main.scss b/styles/main.scss
@@ -43,3 +43,7 @@ body {
     grid-area: 1 / 2 / 3 / 3;
   }
 }
+
+#import {
+  display: none;
+}

Original file line number	Diff line number	Diff line change
`@@ -43,3 +43,7 @@ body {`
`43`	`43`	`grid-area: 1 / 2 / 3 / 3;`
`44`	`44`	`}`
`45`	`45`	`}`
	`46`	`+`
	`47`	`+#import {`
	`48`	`+ display: none;`
	`49`	`+}`