Frontend used Vue.js & Added ESLint

4 files changed, 262 insertions, 0 deletions

diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..79ec4ab
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,62 @@
+<template>
+	<HomeHeader />
+	<div class="row mx-0 mt-5">
+		<div id="projects-header" class="col ms-4">
+			<p class="fs-1">
+				Projects
+			</p>
+		</div>
+		<div id="projects-search" class="col d-flex justify-content-end">
+			<form>
+				<input type="search" name="q">
+				<input type="submit" value="Search">
+			</form>
+		</div>
+	</div>
+	<div class="row mx-0">
+		<div class="col ms-4">
+			<ul id="repos">
+				<li v-for="(project, project_name, index) in projects" :key="index">
+					<div v-if="(search !== null && project_name.includes(search)) || search == null">
+						<p class="fs-3">
+							<router-link :to="project_name">
+								{{ project_name }}
+							</router-link>
+						</p>
+						<span class="repo-last-updated fs-5">Last updated about {{ project["last_updated"] }} ago</span>
+						<span class="fs-5">{{ project["description"] }}</span>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+import HomeHeader from "../components/HomeHeader";
+import { watch, reactive, toRefs } from "vue";
+
+export default {
+	name: "Home",
+	components: {
+		HomeHeader
+	},
+	setup()
+	{
+		const state = reactive({ projects: Object, search: String });
+
+		watch(() =>
+		{
+			fetch(`http://localhost:1337/api/v1/repos`)
+				.then((res) => res.json())
+				.then((data) => state.projects = data["data"]);
+		});
+
+		state.search = (new URLSearchParams(window.location.search)).get("q");
+
+		return {
+			... toRefs(state)
+		};
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/Repository.vue b/src/views/Repository.vue
new file mode 100644
index 0000000..8863529
--- /dev/null
+++ b/src/views/Repository.vue
@@ -0,0 +1,29 @@
+<template>
+	<RepositoryHeader :repository="repository" />
+	<router-view :repository="repository" />
+</template>
+
+<script>
+import RepositoryHeader from "../components/RepositoryHeader";
+
+export default {
+	name: "Repository",
+	components: {
+		RepositoryHeader
+	},
+	props: {
+		repository: {
+			type: String,
+			required: true
+		}
+	},
+	created()
+	{
+		if(/^\/[a-zA-Z0-9.\-_]+[/]?$/.test(window.location.pathname)) {
+			this.$router.push({ path: `${window.location.pathname}${( window.location.pathname.endsWith("/") ) ? "log" : "/log"}`, replace: true});
+		}
+
+		console.log(this.repository);
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/RepositoryCommit.vue b/src/views/RepositoryCommit.vue
new file mode 100644
index 0000000..1fc1ea0
--- /dev/null
+++ b/src/views/RepositoryCommit.vue
@@ -0,0 +1,90 @@
+<template>
+	<RepositoryNavbar active-page="log" />
+	<div class="row mx-0">
+		<div class="col ms-2 ps-4 ps-sm-5 fs-5">
+			<nav aria-label="breadcrumb">
+				<ol class="breadcrumb">
+					<li class="breadcrumb-item">
+						<router-link :to="'/' + repository + '/log'">
+							Log
+						</router-link>
+					</li>
+					<li class="breadcrumb-item active" aria-current="page">
+						{{ commit }}
+					</li>
+				</ol>
+			</nav>
+			<table id="commit-info" class="table table-dark">
+				<tbody>
+					<tr>
+						<td class="commit-info-title">
+							Author
+						</td>
+						<td>{{ commit_data["author"] }}</td>
+					</tr>
+					<tr>
+						<td class="commit-info-title">
+							Date
+						</td>
+						<td>{{ commit_data["date"] }}</td>
+					</tr>
+					<tr>
+						<td class="commit-info-title">
+							Message
+						</td>
+						<td>{{ commit_data["message"] }}</td>
+					</tr>
+				</tbody>
+			</table>
+
+			<template
+				v-for="(patch, index) in commit_data['patches']" :key="index">
+				<CommitPatch :patch="patch" />
+			</template>
+		</div>
+	</div>
+</template>
+
+<script>
+import RepositoryNavbar from "../components/RepositoryNavbar";
+import CommitPatch from "../components/CommitPatch";
+import { watch, reactive, toRefs } from "vue";
+import { format } from "date-fns";
+
+export default {
+	name: "RepositoryCommit",
+	components: {
+		RepositoryNavbar,
+		CommitPatch
+	},
+	props: {
+		repository: {
+			type: String,
+			required: true
+		},
+		commit: {
+			type: String,
+			required: true
+		}
+	},
+	setup(props)
+	{
+		const state = reactive({ commit_data: {} });
+
+		watch(() =>
+		{
+			fetch(`http://localhost:1337/api/v1/repos/${props.repository}/log/${props.commit}`)
+				.then((res) => res.json())
+				.then((data) =>
+				{
+					data["data"]["date"] = format(new Date(data["data"]["date"]), "yyyy-MM-dd hh:mm");
+					state.commit_data = data["data"]
+				});
+		});
+
+		return {
+			... toRefs(state)
+		};
+	}
+}
+</script>
diff --git a/src/views/RepositoryLog.vue b/src/views/RepositoryLog.vue
new file mode 100644
index 0000000..da93624
--- /dev/null
+++ b/src/views/RepositoryLog.vue
@@ -0,0 +1,81 @@
+<template>
+	<RepositoryNavbar active-page="log" />
+	<div class="row mx-0">
+		<div class="col ms-4 ps-4 ps-sm-5 mt-3">
+			<table id="log" class="table table-dark fs-5">
+				<thead>
+					<tr>
+						<th class="text-secondary">
+							Subject
+						</th>
+						<th class="text-secondary">
+							Author
+						</th>
+						<th class="text-secondary">
+							Date
+						</th>
+						<th class="text-secondary">
+							Files
+						</th>
+						<th class="text-secondary">
+							Del/Add
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr v-for="(commit, index) in commits" :key="index">
+						<td>
+							<router-link :to="'log/' + commit['commit']">
+								{{ commit["message"] }}
+							</router-link>
+						</td>
+						<td>{{ commit["author_name"] }}</td>
+						<td>{{ format(new Date(commit["date"]), "yyyy-MM-dd hh:mm") }}</td>
+						<td>{{ commit["files_changed"] }}</td>
+						<td><span class="text-danger">-{{ commit["deletions"] }}</span> / <span class="text-success">+{{ commit["insertions"] }}</span></td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+</template>
+
+<script>
+import RepositoryNavbar from "../components/RepositoryNavbar";
+import { format } from "date-fns";
+import { watch, reactive, toRefs } from "vue";
+
+export default {
+	name: "RepositoryLog",
+	components: {
+		RepositoryNavbar
+	},
+	props: {
+		repository: {
+			type: String,
+			required: true
+		}
+	},
+	data()
+	{
+		return {
+			format: format
+		};
+	},
+	setup(props)
+	{
+		const state = reactive({ commits: {} });
+
+		watch(() =>
+		{
+			fetch(`http://localhost:1337/api/v1/repos/${props.repository}/log`)
+				.then((res) => res.json())
+				.then((data) => state.commits = data["data"]);
+		});
+
+		return {
+			... toRefs(state)
+		};
+	}
+}
+</script>
\ No newline at end of file