From 58dac185c0a3546dc813bf1e009be3e8b6a46e89 Mon Sep 17 00:00:00 2001
From: bogdan <bogd@live.ru>
Date: Sun, 24 Mar 2024 20:06:06 +0200
Subject: [PATCH] added FilesCard implemented file API access

---
 cards/FilesCard.vue | 200 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 186 insertions(+), 14 deletions(-)

diff --git a/cards/FilesCard.vue b/cards/FilesCard.vue
index 6aa384f..15bcbf2 100644
--- a/cards/FilesCard.vue
+++ b/cards/FilesCard.vue
@@ -4,48 +4,220 @@
       <div class="text-h6">Home</div>
     </q-card-section>
     <q-card-section class="q-pt-none">
+      <div class="q-pa-none">
+        <q-table title="File system" :rows="data.file_list" :columns="columns" row-key="name" selection="single"
+          v-model:selected="selected" :flat="true" :bordered="false" :rows-per-page-options="[10, 20, 30, 0]" />
+      </div>
       <div class="q-pa-md">
-        <q-table title="File system" :rows="data.file_list" :columns="columns" row-key="name" />
+        <div><q-file v-model="file" label="Select file to upload" /></div>
+      </div>
+      <div class="q-pa-md">
+        <q-btn class="btn q-ma-xs" flat label="DOWNLOAD" @click="DownloadFile"></q-btn>
+        <q-btn class="btn q-ma-xs" flat label="UPLOAD" @click="UploadFile"></q-btn>
+        <q-btn class="btn q-ma-xs" flat label="DELETE" @click="DeleteFile"></q-btn>
+        <q-btn class="btn q-ma-xs" flat label="TEST SAVE" @click="SaveFile"></q-btn>
+      </div>
+      <div class="row q-pa-md">
+
+
       </div>
     </q-card-section>
   </q-card>
 </template>
 
 <script setup>
-import { computed, onUnmounted, reactive, onMounted } from "vue";
+import { computed, onUnmounted, reactive, onMounted, ref } from "vue";
 import { PostData } from "components/webguicomp//network";
 import { secondsToHms } from "components/webguicomp/helpers"
+import { useQuasar, Dialog } from 'quasar';
+const $q = useQuasar();
 
 const columns = [
-  {
-    name: 'fname',
-    required: true,
-    label: 'File name',
-    align: 'left',
-    field: 'name',
-    sortable: true
-  },
-  { name: 'ftype', label: 'File type', field: 'type', sortable: true },
-  { name: 'fsize', label: 'Size ', field: 'size' }
+  { name: 'fname', required: true, label: 'File name', align: 'left', field: 'name', sortable: true },
+  { name: 'fsize', label: 'Size ', align: 'left', field: 'size' }
 ]
 
 defineOptions({
   name: 'FilesCard'
 })
 
+const BLOCK_SIZE = 5120;
 const init_list = [
   {
+    sel: false,
     name: '',
-    type: '',
     size: '',
-
   }
 ]
 
+async function SaveFile(data, fn) {
+  let blobData = new Blob([data]);
+  let url = window.URL.createObjectURL(blobData);
+  let a = document.createElement("a");
+  a.style = "display: none";
+  document.body.appendChild(a);
+  a.href = url;
+  a.download = fn;
+  a.click();
+  window.URL.revokeObjectURL(urlFile);
+  a.remove();
+}
+
+function ReceiveChunk(cur, total, chunk) {
+  let foper;
+  if (total == 1) foper = 3;
+  else if (cur == 0) foper = 1;
+  else if (cur == (total - 1)) foper = 2;
+  else foper = 0;
+  let data = {
+    raw_data: {
+      opertype: 1,
+      operphase: foper,
+      mem_object: selected.value[0].name,
+      size: BLOCK_SIZE,
+      dat: ''
+    }
+  };
+  return new Promise((resolve, reject) => {
+    console.log(`Receive chunk ${cur} from ${total}`)
+    PostData(data, 1, 0, () => resolve(data))
+  })
+}
+
+
+function base64ToArrayBuffer(base64) {
+  var binaryString = atob(base64);
+  var bytes = new Uint8Array(binaryString.length);
+  for (var i = 0; i < binaryString.length; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+  return bytes;
+}
+
+async function ReveiveFileChunks(buf) {
+  let chunksnum = Math.floor(selected.value[0].size / BLOCK_SIZE);
+  if (selected.value[0].size % BLOCK_SIZE)
+    chunksnum++;
+  console.log(`Found ${chunksnum} blocks in file ${selected.value[0].name}`)
+  let i;
+  let chunk, resp;
+  const dialog = Dialog.create({ message: 'Downloaded 0%', progress: true, persistent: true, ok: false, style: 'border: none; box-shadow: none;' })
+  for (i = 0; i < chunksnum; i++) {
+    resp = await ReceiveChunk(i, chunksnum, chunk);
+    let decoded = base64ToArrayBuffer(resp.raw_data.dat);
+    for (let k = 0; k < decoded.byteLength; k++)
+      buf[i * BLOCK_SIZE + k] = decoded[k];
+    dialog.update({ message: `Downloaded ${Math.floor(i * 100 / chunksnum)}%` })
+  }
+  dialog.hide();
+}
+
+async function DownloadFile() {
+  if (selected.value[0]) {
+    const buf = new Uint8Array(selected.value[0].size);
+    await ReveiveFileChunks(buf);
+    SaveFile(buf, selected.value[0].name);
+  }
+}
+
+
+
+function ToBase64(bytes) {
+  var binary = '';
+  var len = bytes.byteLength;
+  for (var i = 0; i < len; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return window.btoa(binary);
+}
+
+function SendChunk(cur, total, reader) {
+  return new Promise((resolve, reject) => {
+    let arr;
+    if (cur == (total - 1))
+      arr = new Uint8Array(reader.result, cur * BLOCK_SIZE);
+    else
+      arr = new Uint8Array(reader.result, cur * BLOCK_SIZE, BLOCK_SIZE);
+    let encode = ToBase64(arr);
+    let length = encode.length;
+
+    let foper;
+    if (total == 1) foper = 3;
+    else if (cur == 0) foper = 1;
+    else if (cur == (total - 1)) foper = 2;
+    else foper = 0;
+
+    let data = {
+      raw_data: {
+        opertype: 3,
+        operphase: foper,
+        mem_object: file.value.name,
+        size: length,
+        dat: encode
+      }
+    };
+
+    console.log(`Send chunk ${cur} from ${total} length ${arr.byteLength}`)
+    PostData(data, 1, 0, () => resolve())
+  })
+}
+
+async function SendFileChunks(reader) {
+  let chunksnum = Math.floor(reader.result.byteLength / BLOCK_SIZE);
+  if (reader.result.byteLength % BLOCK_SIZE)
+    chunksnum++;
+  console.log(`Found ${chunksnum} blocks in file`)
+  let i;
+  const dialog = Dialog.create({ message: 'Uploaded 0%', progress: true, persistent: true, ok: false, style: 'border: none; box-shadow: none;' })
+  for (i = 0; i < chunksnum; i++) {
+    await SendChunk(i, chunksnum, reader);
+    dialog.update({ message: `Uploaded ${Math.floor(i * 100 / chunksnum)}%` })
+  }
+  dialog.update({ message: 'Done.Refreshing file list...' });
+  PostData(data, 2, 0, () => { dialog.hide() });
+}
+
+function UploadFile() {
+  const reader = new FileReader();
+  reader.onload = () => {
+    console.log(`File "${file.value.name}" with size ${file.value.size} byte`);
+    if (reader.result.byteLength == 0)
+      return;
+    SendFileChunks(reader);
+  }
+  reader.readAsArrayBuffer(file.value);
+}
+
+function DeleteFile() {
+  if (selected.value[0]) {
+    $q.dialog({
+      title: 'Confirm delete file',
+      message: `Are you really wan to delete file "${selected.value[0].name}"?`,
+      cancel: true,
+      persistent: true
+    }).onOk(() => {
+      const dialog = Dialog.create({ message: 'Waiting for delete finished...', progress: true, persistent: true, ok: false, style: 'border: none; box-shadow: none;' })
+
+      PostData({
+        raw_data: {
+          opertype: 2,
+          operphase: 3,
+          mem_object: selected.value[0].name,
+          offset: 0,
+          size: 0
+        }
+      }, 1, 0, () => { PostData(data, 2, 0, () => { dialog.hide(); }) })
+    })
+  }
+}
+
 const init = {
   file_list: [init_list]
 }
+
 const data = reactive(init);
+const selected = ref([]);
+const file = ref(null);
 
 PostData(data, 2, 0, null);
 </script>