file api added, bugs in file view fixed

control/frontend/src/ts/api_handler.ts

@@ -1,21 +1,62 @@
+import type { FolderElement } from "./types";
+import { get_uuid } from "./utils";
 
+interface FileInfo {
+    name: string;
+    type: string;
+    size: string;
+    created: string;
+}
 
-
-export async function get_file_data(ip: string, path: string = './') {
+export async function get_file_data(ip: string, path: string): Promise<FolderElement[]> {
     const options = {
         method: 'PATCH',
         headers: { 'content-type': 'application/json' },
-        body: `{"command":"cd ${path} && find . -maxdepth 1 -mindepth 1 -print0 | while IFS= read -r -d \'\' f; do\n  typ=$(file -b --mime-type -- \"$f\")\n  size=$(stat -c \'%s\' -- \"$f\")\n  created=$(stat -c \'%w\' -- \"$f\")\n  [ \"$created\" = \"-\" ] && created=$(stat -c \'%y\' -- \"$f\")\n  jq -n --arg name \"$f\" --arg type \"$typ\" --arg size \"$size\" --arg created \"$created\" \'{name:$name, type:$type, size:($size|tonumber), created:$created}\' | tr -d \'\\n\'\n  echo\n done\n"}`
+        body: JSON.stringify({
+            command: `cd .${path} && find . -maxdepth 1 -mindepth 1 -print0 | while IFS= read -r -d '' f; do
+  typ=$(file -b --mime-type -- "$f")
+  size=$(stat -c '%s' -- "$f")
+  created=$(stat -c '%w' -- "$f")
+  [ "$created" = "-" ] && created=$(stat -c '%y' -- "$f")
+  jq -n --arg name "$f" --arg type "$typ" --arg size "$size" --arg created "$created" \
+    '{name:$name, type:$type, size:($size|tostring), created:$created}' | tr -d '\n'
+  echo
+done
+` })
     };
-    console.log(request(ip, '/shellCommand', options));
+    const raw_response = await request(ip, '/shellCommand', options);
+    const response: FileInfo[] = raw_response.stdout.trim()
+        .split("\n")
+        .filter(Boolean)
+        .map((line: string) => JSON.parse(line) as FileInfo);
+
+    const folder_element_list: FolderElement[] = [];
+
+    for (const response_element of response) {
+        // filter hidden files (start with '.' -> './.config')
+        if (response_element.name.charAt(2) !== '.') {
+            const folder_element: FolderElement = {
+                id: get_uuid(),
+                hash: JSON.stringify(response),
+                thumbnail: null,
+                name: response_element.name.slice(2), // remove "./"
+                type: response_element.type,
+                date_created: new Date(response_element.created),
+                size: Number(response_element.size),
+            };
+            folder_element_list.push(folder_element);
+        }
+    }
+    return folder_element_list;
 }
 
 
 
 
-async function request(ip: string, api_route: string, options: { method: string, headers?: Record<string, string>, body?: string }) {
+async function request(ip: string, api_route: string, options: { method: string, headers?: Record<string, string>, body?: any }): Promise<any | null> {
     try {
         const url = `http://${ip}:1323/api${api_route}`;
+        console.log(url)
         const response = await fetch(url, options);
         const data = await response.json();
         return data;

control/frontend/src/ts/stores/displays.ts

@@ -1,16 +1,17 @@
 import { get, writable, type Writable } from "svelte/store";
 import type { Display, DisplayGroup } from "../types";
 import { is_selected, select, selected_display_ids } from "./select";
+import { get_uuid } from "../utils";
 
 export const displays: Writable<DisplayGroup[]> = writable<DisplayGroup[]>([{
-    id: crypto.randomUUID(),
+    id: get_uuid(),
     data: []
 }]);
 
 
 function add_display(ip: string, mac: string, name: string, status: string) {
     displays.update((displays: DisplayGroup[]) => {
-        displays[0].data.push({ id: crypto.randomUUID(), ip, mac, name, status });
+        displays[0].data.push({ id: get_uuid(), ip, mac, name, status });
         return displays;
     });
 }
@@ -58,7 +59,7 @@ export function get_display_by_id(display_id: string) {
 export function add_empty_display_group() {
     displays.update((displays: DisplayGroup[]) => {
         displays.push({
-            id: crypto.randomUUID(),
+            id: get_uuid(),
             data: [],
         });
         return displays;

control/frontend/src/ts/stores/files.ts

@@ -3,6 +3,7 @@ import type { FolderElement } from "../types";
 import { displays } from "./displays";
 import { selected_display_ids, selected_file_ids } from "./select";
 import { get_file_data } from "../api_handler";
+import { get_uuid } from "../utils";
 
 export const all_files: Writable<Record<string, Record<string, FolderElement[]>>> = writable<Record<string, Record<string, FolderElement[]>>>({});
 // {
@@ -59,17 +60,19 @@ export function updates_files_on_display(display_id: string, new_folder_elements
             files[file_path] = {};
         }
         for (const new_folder_element of new_folder_elements) {
-            new_folder_element.id = crypto.randomUUID();
+            new_folder_element.id = get_uuid();
         }
         files[file_path][display_id] = new_folder_elements;
         return files;
     });
 }
 
-function get_files_on_all_displays() {
+async function get_files_on_all_displays(current_file_path: string) {
     for (const display_group of get(displays)) {
         for (const display of display_group.data) {
-            get_file_data(display.ip)
+            const new_folder_elements = await get_file_data(display.ip, current_file_path);
+            updates_files_on_display(display.id, new_folder_elements, current_file_path)
+            console.log(new_folder_elements)
         }
     }
 }
@@ -77,7 +80,7 @@ function get_files_on_all_displays() {
 
 export function get_current_folder_elements(all_files: Record<string, Record<string, FolderElement[]>>, current_file_path: string, selected_display_ids: string[]) {
     if (!all_files.hasOwnProperty(current_file_path)) {
-        get_files_on_all_displays();
+        setTimeout(async () => { await get_files_on_all_displays(current_file_path) }, 0);
         return [];
     }
     const files_on_display_array = all_files[current_file_path];

control/frontend/src/ts/types.ts

@@ -46,12 +46,12 @@ export const supported_file_types: Record<string, SupportedFileType> = {
 
 export type FolderElement = {
     id?: string;
-    hash: string;
+    hash: string | null;
     thumbnail: Blob | null;
     name: string;
     type: string;
     date_created: Date;
-    size: string;
+    size: number;
 }
 
 

control/frontend/src/ts/utils.ts

@@ -0,0 +1,17 @@
+export function get_uuid(): string {
+    return crypto.randomUUID();
+}
+
+export function get_file_size_display_string(size: number, toFixed: number|null = null): string {
+    if (size === 0) return "0 B";
+
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB", "TB"];
+
+    const i = Math.floor(Math.log(size) / Math.log(k));
+    const value = size / Math.pow(k, i);
+
+    const size_string = `${value.toFixed(toFixed !== null ? toFixed : Math.max(0, 2 - Math.floor(Math.log10(value))))} ${sizes[i]}`;
+
+    return size_string.replace('.', ',');
+}