tracer/Spookie
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

before urpgrade to vue 3

Browse Source
This commit is contained in:
tracer
2022-05-06 13:52:18 +02:00
parent b60c4ffd74
commit 1b4ca82754
31 changed files with 1424 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
assets/js/components/projects/details.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<div
v-if="isLoading"
class="circle"
>
<i class="fa fa-spinner fa-spin fa-3x fa-fw" />
<span class="sr-only">Loading …</span>
</div>
<div
v-else
class="row"
>
<div class="col-sm-12">
<!-- {% if is_granted('ROLE_ADMIN') %}
<div class="d-flex justify-content-end">
<a :to="id"><i class="fa fa-3x fa-fw fa-edit"></i></a>
<a :to="project.id"><i class="fa fa-3x fa-fw fa-trash"></i></a>
</div>
{% endif %}-->
<div class="show-article-container p-3 mt-4">
<div class="show-article-title-container d-inline-block pl-3 align-middle">
<h2>{{ project.name }}</h2>
</div>
<div>
Source: <b-link
:to="project.url"
target="_blank"
>
{{ project.url }}
</b-link>&nbsp
<i
class="fa fa-external-link"
aria-hidden="true"
/>
</div>
<div class="row mt-5">
<div class="col-sm-12">
<div
class="article-text"
v-html="readmeToHtml"
>
{{ }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { marked } from 'marked';
import Author from '@/components/users/UserCard'
export default {
Name: 'ProjectDetails',
components: {
Author,
marked
},
data: () => ({
project: null,
readme: null,
isLoading: true
}),
computed: {
readmeToHtml() {
if (!this.isLoading) {
return marked(this.readme)
}
}
},
mounted() {
const { id } = this.$route.params
console.log(id)
axios
.get(`/api/projects/${id}`)
.then((response) => {
console.log(response)
this.project = response.data
console.log(this.project);
axios
.get(`${this.project.url}/raw/branch/master/README.md`)
.then((response) => {
this.readme = response.data
this.isLoading = false;
console.log(response)
})
.catch((error) => {
console.log(error)
})
})
.catch((error) => {
console.log(error)
})
},
methods: {
getProjects() {
}
}
};
</script>

105
assets/js/components/projects/index.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<div
v-if="isLoading"
class="circle"
>
<i class="fa fa-spinner fa-spin fa-3x fa-fw" />
<span class="sr-only">Loading …</span>
</div>
<div
v-else
class="container-fluid"
>
<div class="row">
<h2 class="mt-2">
This is an overview of my current public (and open source) projects.
</h2>
<!-- projects List -->
<div class="col-sm-12">
<b-col
v-for="project in projects"
:key="project.id"
>
<div class="project-container bg-dark my-4">
<div class="row">
<div class="col-sm-3">
<b-link :to="'/projects/' + project.id">
<img
v-if="project.teaserImage"
class="blog-img"
:src="'/uploads/projects/' + project.teaserImage"
alt="Teaser"
>
<img
v-else
class="blog-img"
src="/build/images/24unix/24_logo_bg_96x96.png"
alt="Teaser"
>
</b-link>
<br>
<div>
<b-col
v-for="developer in project.developer"
:key="developer"
>
<author :author-iri="developer" />
</b-col>
</div>
</div>
<div class="col-sm-8 mt-2">
<b-link :to="'/projects/' + project.id">
<div class="article-title d-inline-block pl-3 align-middle">
<h2 v-html="project.name" />
</div>
</b-link>
<br>
<div class="blog-teaser mb-2 pb-2 text-xl-start">
<span v-html="project.description" />
<br>
<br>
started: <span v-html="project.createdAt" />
</div>
</div>
</div>
</div>
</b-col>
</div>
<div class="text-xl-start">
<b-link to="/add">
<i class="fa fa-plus-circle" />
</b-link>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import Author from '@/components/users/UserCard';
export default {
name: 'ProjectsList',
components: {
Author
},
data: () => ({
projects: null,
isLoading: true
}),
mounted() {
this.getProjects();
},
methods: {
getProjects() {
axios
.get('/api/projects')
.then((response) => (this.projects = response.data['hydra:member']));
this.isLoading = false;
console.log(this.projects);
}
}
};
</script>