1 files changed, 33 insertions, 107 deletions

diff --git a/web/src/pkg.tsx b/web/src/pkg.tsx
index c3a6985..b1f38c9 100644
--- a/web/src/pkg.tsx
+++ b/web/src/pkg.tsx
@@ -1,16 +1,9 @@
 import $ from "jquery";
 import * as JSX from "./jsx";
 import { Page, Spinner } from "./components";
-import { sizeHumanReadable } from "./util";
-
-function downloadFile( file: string ) {
-  const a = document.createElement( "a" );
-  a.href = "https://networkheaven.net/pkgs/";
-  a.download = "string";
-  a.click();
-  a.remove();
-}
+import { FtpEntry, ftpGetEntries, sizeHumanReadable } from "./util";
 
+let entries: FtpEntry[] = [];
 function urlForHref( href: string, isdir: boolean ) {
   const url = new URL( window.location.href );
   let path = url.pathname;
@@ -23,99 +16,19 @@ function urlForHref( href: string, isdir: boolean ) {
 
   path = path.slice( path.indexOf( '/pkgs' ) + 5 );
   if( path.endsWith( '/' ) )
-    return "https://networkheaven.net/pkgs" + path + "" + href;
-}
-
-interface PkgEntry {
-  name: string;
-  date: string;
-  time: string;
-  size: string;
-  isdir: boolean;
-}
-
-function entryFromLine( line: string ): PkgEntry | null {
-  const isdir = line[line.length - 1] == '-';
-  const name = line.slice( 0, line.indexOf( " " ) );
-  if( name == ".." ) return null;
-  if( !name )
-    return null;
-  let date = '';
-  let time = '';
-  let size = ''
-  
-  if( !isdir ) {
-    let end = line.lastIndexOf( " " );
-    size = line.slice( end + 1 );
-    date = line.slice( line.indexOf( " " ) + 1, end );
-    end = date.indexOf( " " );
-    const datetime = date.slice( date.search( /[0-9]/ ) );
-    end = datetime.indexOf( ' ' );
-    date = datetime.slice( 0, end );
-    time = datetime.slice( end + 1 );
-    time = time.slice( 0, time.indexOf( " " ) );
-  } else {
-    let start = line.search( /[0-9]/ )
-    date = line.slice( start );
-    let end = date.indexOf( " " );
-    date = date.slice( 0, end );
-    time = line.slice( start + end + 1, line.length - 1 );
-    time = time.slice( 0, time.indexOf( " " ) );
-  }
-
-  return { name, date, time, size, isdir };
-}
-
-async function getEntries(): Promise<PkgEntry[]> {
-  const url = new URL( window.location.href );
-  const href = url.pathname.split( "/pkg" )[1];
-
-  const packages = await fetch( "https://networkheaven.net/pkgs/" + href );
-  const text = await packages.text();
-
-  const pkgBody = $( <div /> );
-  pkgBody.html( text );
-  pkgBody.html( pkgBody.find( "body" ).html() );
-  const pre = pkgBody.find( "pre" )[0].innerText;
-
-  const ret = [];
-  if( !url.pathname.endsWith( "/pkg/" ) && !url.pathname.endsWith( "/pkg" ) ) {
-     ret.push({
-      name: '../',
-      date: ' ',
-      time: ' ',
-      size: '',
-      isdir: true
-    } );
-  }
-
-  const lines = pre.split( "\n" );
-  for( const line of lines ) {
-    if( !line.length )
-      continue;
-
-    const entry = entryFromLine( line );
-    if( entry )
-      ret.push( entry );
-  }
-
-  return ret;
+    return "https://networkheaven.net/pkgs" + path + href;
+  else
+    return "https://networkheaven.net/pkgs" + path + "/" + href;
 }
 
-function back() {
-  const url = new URL( window.location.href );
-  if( url.pathname.endsWith( "/" ) )
-    url.pathname = url.pathname.slice( 0, -1 );
-  url.pathname = url.pathname.slice( 0, url.pathname.lastIndexOf( "/" ) );
-  JSX.navigate( url.pathname );
-}
 
 function PackageEntry( props: any ) {
-  const entry = props.entry as PkgEntry;
+  const entry = props.entry as FtpEntry;
+  const small = !!( window.innerWidth < 750 );
   return <tr>
     <td>
       { entry.name == "../" &&
-      <a href='#' onclick={ () => back() } class="package-entry-link">
+      <a href='#' onclick={ () => JSX.goUpDirectory() } class="package-entry-link">
         ../
       </a> }
       { entry.name != "../" && !entry.isdir &&
@@ -129,29 +42,42 @@ function PackageEntry( props: any ) {
     </td>
     <td><span class="package-entry-date">{entry.date}</span></td>
     <td><span class="package-entry-time">{entry.time}</span></td>
-    <td>{ !entry.isdir && <span>{ sizeHumanReadable( parseInt( entry.size ) ) }</span> }</td>
+    <td>{ !entry.isdir && <span>{ sizeHumanReadable( parseInt( entry.size ), small ) }</span> }
+        { entry.isdir  && <span>dir</span> }
+    </td>
   </tr>
 }
 
+function getEndpoint() {
+  const url = new URL( window.location.href );
+  let href = url.pathname.split( "/pkg" )[1];
+
+  if( href[0] == '/' ) {
+    href = href.slice( 1 );
+  }
+
+  return "pkgs/" + href;
+}
+
 export default function Pkgs() {
+  entries = [];
   setTimeout( async () => {
-    try {
-      const entries = await getEntries();
-      const target = $( "#package-entries" ).find( "table" );
-      $( "#package-entries" ).find( ".spinner" ).remove();
-      for( const entry of entries ) {
-        target.append( <PackageEntry entry={entry} /> );
-      }
+    const url = new URL( window.location.href );
+    const showBack = !url.pathname.endsWith( "/pkg/" ) && !url.pathname.endsWith( "/pkg" );
+    entries = await ftpGetEntries( getEndpoint(), showBack );
 
-    } catch( e ) {
-      console.log( e );
-    }
+    const target = $( "#package-entries" ).find( "table" );
+    $( "#package-entries" ).find( ".spinner" ).remove();
+    target.empty();
 
+    for( const entry of entries ) {
+      target.append( <PackageEntry entry={entry} /> );
+    }
   } );
 
   return <Page>
     <div class="page-title">
-      <h3 style="font-family: JPN24; font-size: 25px; width: min-content" class="gradient">PACKAGE&nbsp;REPOSITORY</h3>
+      <h3 style="font-family: JPN24; width: max-content" class="gradient">PACKAGE&nbsp;REPOSITORY</h3>
     </div>
     <hr />