Verified Commit d3b43e90 authored by Agate's avatar Agate 💬

Basic interface in Vue.JS

parent 95fcfa44
.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"
]
}
<!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>
<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 source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment