Spaces:
Running
Running
File size: 2,641 Bytes
b8b73b2 da515b9 b8b73b2 da515b9 b8b73b2 da515b9 b8b73b2 da515b9 b8b73b2 da515b9 b8b73b2 da515b9 b8b73b2 da515b9 b8b73b2 da515b9 b8b73b2 da515b9 b8b73b2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
<script lang="ts">
// The directory browser.
import logo from './assets/logo.png';
import Home from 'virtual:icons/tabler/home'
import Folder from 'virtual:icons/tabler/folder'
import File from 'virtual:icons/tabler/file'
export let path = '';
async function fetchList(path) {
const encodedPath = encodeURIComponent(path || '');
const res = await fetch(`/api/dir/list?path=${encodedPath}`);
const j = await res.json();
return j;
}
$: list = fetchList(path);
function link(item) {
if (item.type === 'directory') {
return `#dir?path=${item.name}`;
} else {
return `#edit?path=${item.name}`;
}
}
function shortName(item) {
return item.name.split('/').pop();
}
</script>
<div class="directory-page">
<div class="logo">
<a href="https://lynxkite.com/"><img src="{logo}" class="logo-image"></a>
<div class="tagline">The Complete Graph Data Science Platform</div>
</div>
<div class="entry-list">
{#if path} <div class="breadcrumbs"><a href="#dir"><Home /></a> {path} </div> {/if}
{#await list}
<div>Loading...</div>
{:then list}
{#each list as item}
<a class="entry" href={link(item)}>
{#if item.type === 'directory'}
<Folder />
{:else}
<File />
{/if}
{shortName(item)}
</a>
{/each}
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
</div>
</div>
<style>
.entry-list {
width: 100%;
margin: 10px auto;
background-color: white;
border-radius: 10px;
box-shadow: 0px 2px 4px;
padding: 10px 0;
}
@media (min-width: 768px) {
.entry-list {
width: 768px;
}
}
@media (min-width: 960px) {
.entry-list {
width: 80%;
}
}
.logo {
margin: 0;
padding-top: 50px;
text-align: center;
}
.logo-image {
max-width: 50%;
}
.tagline {
color: #39bcf3;
font-size: 14px;
font-weight: 500;
}
@media (min-width: 1400px) {
.tagline {
font-size: 18px;
}
}
.breadcrumbs {
padding-left: 10px;
font-size: 20px;
}
.entry-list .entry {
display: block;
border-bottom: 1px solid whitesmoke;
padding-left: 10px;
color: #004165;
cursor: pointer;
user-select: none;
text-decoration: none;
}
.entry-list .open .entry,
.entry-list .entry:hover,
.entry-list .entry:focus {
background: #39bcf3;
color: white;
}
.entry-list .entry:last-child {
border-bottom: none;
}
.directory-page {
background: #002a4c;
height: 100vh;
}
a {
color: black;
}
</style>
|