From 371e3f13e0a046aeca3a2895e4a85f8b51059edf Mon Sep 17 00:00:00 2001
From: HampusM <hampus@hampusmat.com>
Date: Wed, 2 Jun 2021 20:13:48 +0200
Subject: Added a tree page
---
README.md | 2 +-
src/app.js | 9 +++
src/frontend/components/RepositoryNavbar.vue | 8 +-
src/frontend/components/RepositoryTreeBlob.vue | 23 ++++++
src/frontend/components/RepositoryTreeTree.vue | 84 +++++++++++++++++++++
src/frontend/router/index.js | 11 ++-
src/frontend/scss/style.scss | 26 +++++++
src/frontend/views/RepositoryTree.vue | 100 +++++++++++++++++++++++++
8 files changed, 257 insertions(+), 6 deletions(-)
create mode 100644 src/frontend/components/RepositoryTreeBlob.vue
create mode 100644 src/frontend/components/RepositoryTreeTree.vue
create mode 100644 src/frontend/views/RepositoryTree.vue
diff --git a/README.md b/README.md
index 570437c..b3e14eb 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ Githermit will probably **never** be as fast as cgit, Gitweb & Stagit. But that'
- [x] Log & commit pages
- [x] Cloning
- [ ] Refs page
-- [ ] Tree page
+- [x] Tree page
- [ ] Blob page
- [ ] Markdown support
- [ ] Tests
diff --git a/src/app.js b/src/app.js
index b05bbcf..8904219 100644
--- a/src/app.js
+++ b/src/app.js
@@ -114,6 +114,15 @@ fastify.register((fastify_repo, opts, done) =>
}
});
+ fastify_repo.route({
+ method: "GET",
+ path: "/tree/*",
+ handler: async (req, reply) =>
+ {
+ reply.sendFile("app.html");
+ }
+ });
+
fastify_repo.route({
method: "GET",
path: "/info/refs",
diff --git a/src/frontend/components/RepositoryNavbar.vue b/src/frontend/components/RepositoryNavbar.vue
index 87a32d6..53e1bfa 100644
--- a/src/frontend/components/RepositoryNavbar.vue
+++ b/src/frontend/components/RepositoryNavbar.vue
@@ -8,9 +8,11 @@
<li
v-for="(item, index) in nav_items" :key="index"
class="nav-item">
- <a
+ <router-link
class="nav-link fs-4" :class="{ active: activePage === item }"
- :aria-current="(activePage === item) ? 'page' : ''" :href="item">{{ item }}</a>
+ :aria-current="(activePage === item) ? 'page' : ''" :to="'/' + repository + '/' + item">
+ {{ item }}
+ </router-link>
</li>
<li class="nav-item ms-auto me-4">
<RepositoryCloneDropdown :repository="repository" class="d-block" />
@@ -48,5 +50,5 @@ export default {
url: `${window.location.protocol}//${window.location.host}/${this.repository}`
};
}
-}
+};
</script>
\ No newline at end of file
diff --git a/src/frontend/components/RepositoryTreeBlob.vue b/src/frontend/components/RepositoryTreeBlob.vue
new file mode 100644
index 0000000..a0a7514
--- /dev/null
+++ b/src/frontend/components/RepositoryTreeBlob.vue
@@ -0,0 +1,23 @@
+<template>
+ {{ content }}
+</template>
+
+<script>
+export default {
+ name: "RepositoryTreeBlob",
+ props: {
+ repository: {
+ type: String,
+ required: true
+ },
+ path: {
+ type: String,
+ required: true
+ },
+ content: {
+ type: String,
+ required: true
+ }
+ }
+};
+</script>
\ No newline at end of file
diff --git a/src/frontend/components/RepositoryTreeTree.vue b/src/frontend/components/RepositoryTreeTree.vue
new file mode 100644
index 0000000..70c63eb
--- /dev/null
+++ b/src/frontend/components/RepositoryTreeTree.vue
@@ -0,0 +1,84 @@
+<template>
+ <table id="tree" class="fs-5">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Last commit</th>
+ <th>Last updated</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-if="path !== ''" @click="$router.go(-1)">
+ <td
+ class="d-flex align-items-center">
+ <div class="tree-entry-padding" />
+ ..
+ </td>
+ <td />
+ <td />
+ </tr>
+ <tr
+ v-for="(entry, entry_name, index) in tree" :key="index"
+ @click="$router.push(`/${repository}/tree${path ? '/' + path : ''}/${entry_name}`)">
+ <td class="d-flex align-items-center">
+ <svg
+ xmlns="http://www.w3.org/2000/svg" height="18px"
+ viewBox="0 0 24 24" width="18px"
+ fill="#FFFFFF" v-if="entry['type'] === 'tree'"
+ preserveAspectRatio="xMidYMin">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" />
+ </svg>
+ <span v-else class="tree-entry-padding" />
+ <a @click="stopClick" :href="`/${repository}/tree${path ? '/' + path : ''}/${entry_name}`">{{ entry_name }}</a>
+ </td>
+ <td>
+ <a @click="routeToCommit(entry.last_commit.id, $event)" :href="`/${repository}/log/${entry.last_commit.id}`">
+ {{ entry.last_commit.message }}
+ </a>
+ </td>
+ <td>
+ {{ getPrettyLastUpdated(entry.last_commit.time) }}
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</template>
+
+<script>
+const { formatDistance } = require('date-fns');
+
+export default {
+ name: "RepositoryTreeTree",
+ props: {
+ repository: {
+ type: String,
+ required: true
+ },
+ path: {
+ type: String,
+ required: true
+ },
+ tree: {
+ type: Object,
+ required: true
+ }
+ },
+ methods: {
+ stopClick(event)
+ {
+ event.preventDefault();
+ },
+ routeToCommit(commit_id, event)
+ {
+ event.stopPropagation();
+ event.preventDefault();
+ this.$router.push(`/${this.repository}/log/${commit_id}`);
+ },
+ getPrettyLastUpdated(date)
+ {
+ return formatDistance(new Date(), new Date(date));
+ }
+ }
+};
+</script>
\ No newline at end of file
diff --git a/src/frontend/router/index.js b/src/frontend/router/index.js
index 68762cd..fc332cd 100644
--- a/src/frontend/router/index.js
+++ b/src/frontend/router/index.js
@@ -3,6 +3,7 @@ import Home from "../views/Home";
import Repository from "../views/Repository";
import RepositoryLog from "../views/RepositoryLog";
import RepositoryCommit from "../views/RepositoryCommit";
+import RepositoryTree from "../views/RepositoryTree";
const routes = [
{
@@ -19,17 +20,23 @@ const routes = [
{
name: "Repository Log",
path: "log",
- component: RepositoryLog,
+ component: RepositoryLog
},
{
name: "Commit",
path: "log/:commit([a-fA-F0-9]{40}$)",
component: RepositoryCommit,
props: route => ({ commit: route.params.commit })
+ },
+ {
+ name: "Tree Entry",
+ path: "tree/:path*",
+ component: RepositoryTree,
+ props: route => ({ pathArr: route.params.path ? route.params.path : [] })
}
]
}
-]
+];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
diff --git a/src/frontend/scss/style.scss b/src/frontend/scss/style.scss
index d5a4a02..1f2cd6a 100644
--- a/src/frontend/scss/style.scss
+++ b/src/frontend/scss/style.scss
@@ -327,6 +327,32 @@ th {
box-shadow: none;
}
+#tree {
+ border-spacing: 0;
+ th {
+ padding-bottom: 5px;
+ color: colors.$secondary;
+ }
+ tbody tr:hover {
+ background-color: lighten(colors.$background, 10%);
+ }
+ td {
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-right: 2vw;
+ &:nth-child(2) a, &:nth-child(3) {
+ font-weight: 300;
+ }
+ }
+ .tree-entry-padding, svg {
+ width: 18px;
+ padding-right: 5px;
+ }
+ a {
+ padding-right: 18px;
+ }
+}
+
@include media-breakpoint-down(sm) {
.commit-file table tbody tr td {
padding-left: 4px;
diff --git a/src/frontend/views/RepositoryTree.vue b/src/frontend/views/RepositoryTree.vue
new file mode 100644
index 0000000..80a5c3b
--- /dev/null
+++ b/src/frontend/views/RepositoryTree.vue
@@ -0,0 +1,100 @@
+<template>
+ <RepositoryNavbar active-page="tree" :repository="repository" />
+ <div class="row mx-0 vld-parent">
+ <Loading
+ v-model:active="is_loading" :height="24"
+ :width="24" color="#ffffff"
+ :opacity="0" />
+ <div class="col ms-4 ps-4 ps-sm-5 mt-3">
+ <RepositoryTreeTree
+ :repository="repository" :path="path"
+ :tree="tree" v-if="type === 'tree'" />
+ <RepositoryTreeBlob
+ :repository="repository" :path="path"
+ :content="blob_content" v-else />
+ </div>
+ </div>
+</template>
+
+<script>
+import RepositoryNavbar from "../components/RepositoryNavbar";
+import RepositoryTreeTree from "../components/RepositoryTreeTree";
+import RepositoryTreeBlob from "../components/RepositoryTreeBlob";
+import Loading from "vue-loading-overlay";
+import 'vue-loading-overlay/dist/vue-loading.css';
+import { ref } from "vue";
+
+export default {
+ name: "RepositoryTree",
+ components: {
+ RepositoryNavbar,
+ Loading,
+ RepositoryTreeTree,
+ RepositoryTreeBlob
+ },
+ props: {
+ repository: {
+ type: String,
+ required: true
+ },
+ pathArr: {
+ type: Array,
+ required: true
+ }
+ },
+ watch: {
+ pathArr()
+ {
+ this.fetchTree();
+ }
+ },
+ setup(props)
+ {
+ const type = ref("");
+ const tree = ref({});
+ const blob_content = ref("");
+ const is_loading = ref(true);
+ const path = ref("");
+
+ const fetchTree = async () =>
+ {
+ path.value = props.pathArr ? props.pathArr.join("/") : undefined;
+ const data = await (await fetch(`${window.location.protocol}//${window.location.host}/api/v1/repos/${props.repository}/tree${path.value ? "?path=" + path.value : ""}`)).json();
+
+ console.log(path.value);
+ type.value = data["data"]["type"];
+
+ if(data["data"]["type"] === "tree") {
+ const tree_data = data["data"]["tree"];
+
+ let tree_trees = Object.entries(tree_data).filter((entry) => entry[1].type === "tree");
+ tree_trees = tree_trees.sort((a, b) => a[0].localeCompare(b[0]));
+
+ let tree_blobs = Object.entries(tree_data).filter((entry) => entry[1].type === "blob");
+ tree_blobs = tree_blobs.sort((a, b) => a[0].localeCompare(b[0]));
+
+ tree.value = Object.fromEntries(tree_trees.concat(tree_blobs));
+ }
+ else {
+ blob_content.value = data["data"]["content"];
+ }
+
+ is_loading.value = false;
+ };
+
+ return {
+ type,
+ tree,
+ blob_content,
+ is_loading,
+ path,
+ fetchTree
+ };
+ },
+ mounted()
+ {
+ console.log("VAFAAAN öaöaöaö");
+ this.fetchTree();
+ }
+};
+</script>
\ No newline at end of file
--
cgit v1.2.3-18-g5258