Skip to content
Snippets Groups Projects
Verified Commit d3b43e90 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Basic interface in Vue.JS

parent 95fcfa44
No related branches found
No related tags found
No related merge requests found
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
# front
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn run serve
```
### Compiles and minifies for production
```
yarn run build
```
### Lints and fixes files
```
yarn run lint
```
module.exports = {
presets: [
'@vue/app'
]
}
{
"name": "front",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.18.0",
"bulma": "^0.7.1",
"moment": "^2.22.2",
"vue": "^2.5.17"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0",
"@vue/cli-plugin-eslint": "^3.0.0",
"@vue/cli-service": "^3.0.0",
"css-loader": "^1.0.0",
"style-loader": "^0.23.0",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
front/public/favicon.ico

1.12 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>front</title>
</head>
<body>
<noscript>
<strong>We're sorry but front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div id="app">
<section class="section">
<div class="container contributions">
<h1 class="title">Contribution logs</h1>
<contribution-item
:key="contribution.key"
:contribution="contribution"
v-for="contribution in contributions"></contribution-item>
</div>
</section>
</div>
</template>
<script>
import axios from "axios";
import ContributionItem from "@/components/ContributionItem";
export default {
components: {
ContributionItem
},
data() {
return {
contributions: []
};
},
created() {
this.fetch();
},
methods: {
fetch() {
let self = this;
let url = "http://localhost:8000/api/contributions/";
axios.get(url).then(response => {
self.contributions = response.data.results;
});
}
}
};
</script>
<style>
.container.contributions {
max-width: 40em;
}
</style>
front/src/assets/logo.png

6.69 KiB

<template>
<div class="card">
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img :src="avatarUrl" alt="Placeholder image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">{{ contribution.contributor.name }}</p>
<p class="subtitle is-6">@{{ contribution.contributor.username }}</p>
</div>
</div>
<div class="content">
Opened ticket <a target="_blank" :href="contribution.url">#{{ contribution.metadata.id }}</a>
on repository <a target="_blank" :href="contribution.metadata.project_url">{{ contribution.metadata.project }}</a>
<a href="#">#css</a> <a href="#">#responsive</a>
<br>
<time :datetime="contribution.creation_date">{{ contribution.creation_date | ago }}</time>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["contribution"],
computed: {
avatarUrl() {
return this.contribution.contributor.metadata.gitlab.avatar_url;
}
}
};
</script>
<style>
.card {
text-align: left;
}
</style>
import Vue from "vue";
import App from "./App.vue";
import moment from "moment";
require("bulma/css/bulma.css");
Vue.config.productionTip = false;
export function ago(date) {
const m = moment(date);
return m.fromNow();
}
Vue.filter("ago", ago);
new Vue({
render: h => h(App)
}).$mount("#app");
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment