89 lines
3.2 KiB
Vue
89 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
|
||
|
|
<div v-if="isLoading" class="circle">
|
||
|
|
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
|
||
|
|
<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.name">
|
||
|
|
<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"></author>
|
||
|
|
</b-col>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-8 mt-2">
|
||
|
|
<b-link to="project.name">
|
||
|
|
<div class="article-title d-inline-block pl-3 align-middle">
|
||
|
|
<h2 v-html="project.name"></h2>
|
||
|
|
</div>
|
||
|
|
</b-link>
|
||
|
|
<br>
|
||
|
|
<div class="blog-teaser mb-2 pb-2 text-xl-start">
|
||
|
|
<span v-html="project.description"></span>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
started: <span v-html="project.createdAt"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</b-col>
|
||
|
|
</div>
|
||
|
|
<div class="text-xl-start">
|
||
|
|
<b-link to="/add"><i class="fa fa-plus-circle"></i></b-link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import axios from "axios";
|
||
|
|
|
||
|
|
import Author from "@/components/Author";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "ProjectsList",
|
||
|
|
data: () => ({
|
||
|
|
projects: null,
|
||
|
|
isLoading: true
|
||
|
|
}),
|
||
|
|
mounted() {
|
||
|
|
this.getProjects();
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
Author
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getProjects() {
|
||
|
|
axios
|
||
|
|
.get("/api/projects")
|
||
|
|
.then(response => (this.projects = response.data["hydra:member"]));
|
||
|
|
this.isLoading = false;
|
||
|
|
console.log(this.projects);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|