114 lines
2.4 KiB
Vue
114 lines
2.4 KiB
Vue
<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">
|
|
<div
|
|
v-for="project in projects"
|
|
:key="project.id"
|
|
>
|
|
<div class="project-container bg-dark my-4">
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
<router-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"
|
|
>
|
|
</router-link>
|
|
<br>
|
|
<div>
|
|
<div
|
|
v-for="developer in project.developer"
|
|
:key="developer"
|
|
class="col"
|
|
>
|
|
<user-card :author-iri="developer"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8 mt-2">
|
|
<router-link :to="'/projects/' + project.id">
|
|
<div class="article-title d-inline-block pl-3 align-middle">
|
|
<h2 v-html="project.name"/>
|
|
</div>
|
|
</router-link>
|
|
<br>
|
|
<div class="blog-teaser mb-2 pb-2 text-xl-start">
|
|
<span v-html="project.description"/>
|
|
<br>
|
|
<br>
|
|
started: <span v-html="formatDate(project.createdAt)"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="text-xl-start">
|
|
<router-link to="/add">
|
|
<i class="fa fa-plus-circle"/>
|
|
</router-link>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import axios from 'axios'
|
|
|
|
import UserCard from '@/components/users/UserCard'
|
|
|
|
export default {
|
|
name: 'ProjectsList',
|
|
components: {
|
|
UserCard,
|
|
},
|
|
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)
|
|
},
|
|
formatDate(date) {
|
|
return new Date(date).toLocaleDateString('de-DE')
|
|
}
|
|
}
|
|
}
|
|
</script>
|