diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.js | 9 | ||||
| -rw-r--r-- | src/frontend/components/RepositoryNavbar.vue | 8 | ||||
| -rw-r--r-- | src/frontend/components/RepositoryTreeBlob.vue | 23 | ||||
| -rw-r--r-- | src/frontend/components/RepositoryTreeTree.vue | 84 | ||||
| -rw-r--r-- | src/frontend/router/index.js | 11 | ||||
| -rw-r--r-- | src/frontend/scss/style.scss | 26 | ||||
| -rw-r--r-- | src/frontend/views/RepositoryTree.vue | 100 |
7 files changed, 256 insertions, 5 deletions
@@ -116,6 +116,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", handler: (req, reply) => { 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 |