From c1e16406bca98dd076ef98c0951cf186e5f41601 Mon Sep 17 00:00:00 2001
From: FEARmeR <fearmer@gmail.com>
Date: Thu, 18 May 2023 16:37:22 +0100
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=D1=8E?=
 =?UTF-8?q?=D1=82=20=D1=81=D1=81=D1=8B=D0=BB=D0=BA=D0=B8=20/project/1=20?=
 =?UTF-8?q?=D0=B8=20/project/2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                        |  9 ++++
 src/views/LandingPages/Project/Project.vue | 56 ++++++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src/views/LandingPages/Project/Project.vue

diff --git a/src/router/index.js b/src/router/index.js
index 6257f01..51cb27e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,6 +23,9 @@ import ElDropdowns from "../layouts/sections/elements/dropdowns/DropdownsView.vu
 import ElProgressBars from "../layouts/sections/elements/progress-bars/ProgressBarsView.vue";
 import ElToggles from "../layouts/sections/elements/toggles/TogglesView.vue";
 import ElTypography from "../layouts/sections/elements/typography/TypographyView.vue";
+import Project from "../views/LandingPages/Project/Project.vue";
+
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -31,6 +34,12 @@ const router = createRouter({
       name: "presentation",
       component: PresentationView,
     },
+    {
+      path: '/project/:id',
+      name: 'project',
+      component: Project
+    },
+
     {
       path: "/pages/landing-pages/about-us",
       name: "about",
diff --git a/src/views/LandingPages/Project/Project.vue b/src/views/LandingPages/Project/Project.vue
new file mode 100644
index 0000000..72fafcb
--- /dev/null
+++ b/src/views/LandingPages/Project/Project.vue
@@ -0,0 +1,56 @@
+<script setup>
+import axios from 'axios';
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+
+
+const projectId = ref(null);
+const route = useRoute();
+const projectData = ref([]);
+
+onMounted(async() => {
+    projectId.value = route.params.id;
+    await getProject();
+});
+
+
+const getProject = async () => {
+    try {
+        const projectDataRecieved = await axios.get(`http://somebodyhire.me/api/projects/${projectId.value}/`);
+        projectData.value = projectDataRecieved.data;
+    } catch (error) {
+        console.error('There was an error fetching the project data', error);
+    }
+};
+
+
+
+
+</script>
+
+
+<template>
+    <div v-if="projectData">
+      <h1>Проект номер: {{ projectData.id }}</h1>
+      <h2>{{ projectData.title }}</h2>
+      <p>{{ projectData.description }}</p>
+      <img :src="projectData.featured_image" alt="Featured image">
+      <p v-if="projectData.demo_link">Demo Link: <a :href="projectData.demo_link">{{ projectData.demo_link }}</a></p>
+      <p v-if="projectData.source_link">Source Link: <a :href="projectData.source_link">{{ projectData.source_link }}</a></p>
+      <p>Total Votes: {{ projectData.vote_total }}</p>
+      <p>Vote Ratio: {{ projectData.vote_ratio }}</p>
+      <p>Created On: {{ new Date(projectData.created).toLocaleDateString() }}</p>
+      <p>Owner ID: {{ projectData.owner }}</p>
+      <p>Tags: 
+        <span v-for="(tag, index) in projectData.tags" :key="index">
+          {{ tag }}<span v-if="index < projectData.tags.length - 1">, </span>
+        </span>
+      </p>
+    </div>
+  </template> 
+
+
+
+<style scoped>
+</style>
+  
\ No newline at end of file