Verified Commit 702cf088 authored by Agate's avatar Agate 💬

Added basic task suggestion / dsplay logic

parent 389b806f
......@@ -10,6 +10,7 @@
"dependencies": {
"axios": "^0.18.0",
"bulma": "^0.7.1",
"fork-awesome": "^1.1.5",
"moment": "^2.22.2",
"vue": "^2.5.17"
},
......
<template>
<div id="app">
<section class="section">
<div class="container contributions">
<div class="text container">
<img src="/logo-full.png" alt="Funkwhale logo">
<hr class="hidden">
<h1 class="title">How to contribute?</h1>
<p>Do you want to contribute but don't know where to start? Tell us how much time you can spend and we'll get you started!</p>
<hr class="hidden">
<div class="field">
<label class="label">I can spend</label>
<div class="control">
<label class="radio">
<input type="radio" name="time" :value="null" v-model="availableTime">
I don't know
</label>
<label class="radio">
<input type="radio" name="time" :value="5" v-model="availableTime">
5 minutes
</label>
<label class="radio">
<input type="radio" name="time" :value="15" v-model="availableTime">
15 minutes
</label>
<label class="radio">
<input type="radio" name="time" :value="30" v-model="availableTime">
30 minutes
</label>
<label class="radio">
<input type="radio" name="time" :value="60" v-model="availableTime">
1 hour
</label>
<label class="radio">
<input type="radio" name="time" :value="120" v-model="availableTime">
2 hours
</label>
<label class="radio">
<input type="radio" name="time" :value="9999" v-model="availableTime">
More
</label>
</div>
</div>
<hr class="hidden">
<div>
<h3 class="subtitle">Here is a list of suggestions</h3>
<div class="tasks">
<task v-for="t in suggestedTasks" :task="t" />
</div>
</div>
</div>
<div class="text container contributions" v-if="stats" >
<h1 class="title">Contribution logs</h1>
<div class="filters" v-if="stats">
<div class="filters">
<div class="field">
<label class="label">Type</label>
<div class="control">
......@@ -44,6 +91,7 @@
<script>
import axios from "axios";
import Task from "@/components/Task";
import ContributionItem from "@/components/ContributionItem";
import Issue from "@/components/Issue";
import Donation from "@/components/Donation";
......@@ -54,7 +102,8 @@ export default {
ContributionItem,
Donation,
Issue,
Modal
Modal,
Task
},
data() {
return {
......@@ -68,10 +117,115 @@ export default {
},
next: null,
stats: null,
availableTime: null,
typeOptions: [
{ value: null, label: "All" },
{ value: "donation", label: "Donations" },
{ value: "dev:issue", label: "Development/Issue" }
],
availableTasks: [
{
name: "Become a backer",
category: 5,
icon: "eur",
summary: "Support Funkwhale financially, on a one-time or recurring basis."
},
{
name: "Talk about Funkwhale",
category: 5,
icon: "share",
summary: "Increase the awareness of Funkwhale within your circle."
},
{
name: "Share your feedback",
category: 5,
icon: "comment",
summary: "How happy are you with the project? Let us know!"
},
{
name: "Join the discussion",
category: 15,
icon: "comment",
summary: "Help us shape the future of Funkwhale and go in the right direction."
},
{
name: "Translate Funkwhale",
category: 15,
icon: "language",
summary: "Help translate the project in other languages."
},
{
name: "Report a bug",
icon: "bug",
category: 15,
summary: "Report us typos, display issues, or other unexpected bebaviour so we can fix it."
},
{
name: "Review the documentation",
icon: "search",
category: 15,
summary: "Ensure our documentation is accurate, understandable and up-to-date."
},
{
name: "Publish audio content",
icon: "music",
category: 15,
summary: "Upload content with an open licence, or your own work, on the network."
},
{
name: "Submit patches for the documentation",
icon: "pencil",
category: 30,
summary: "Fix issues and improve the quality of our documentation."
},
{
name: "Request a feature",
icon: "question",
category: 30,
summary: "Is something missing in Funkwhale? Write a feature request and launch a discussion about it."
},
{
name: "Support other community members",
icon: "wrench",
category: 30,
summary: "Help other community members troubleshot and solve their issues while installing or using Funkwhale."
},
{
name: "Review submitted patches",
icon: "eye",
category: 30,
summary: "Review work submitted by other contributors to increase the software's quality."
},
{
name: "Write about Funkwhale",
icon: "pencil",
category: 60,
summary: "Do you own a blog or a site? Writing about Funkwhale is a great way to help the project grow and attract new users and contributors."
},
{
name: "Solve a small issue",
icon: "file-code-o",
category: 60,
summary: "Improve the project by fixing a reported bug or implementing a requested enhancement."
},
{
name: "Open a Funkwhale instance",
icon: "server",
category: 120,
summary: "Hosting your own Funkwhale and opening it to other people makes the network stronger and more attractive."
},
{
name: "Audit Funkwhale's security",
icon: "user-secret",
category: 120,
summary: "Investigate and report possible security issues, and help us solve them before they affect our users."
},
{
name: "Integrate Funkwhale with other projects",
icon: "file-code-o",
category: 9999,
summary: "Write an app, an alternative client for Funkwhale, or integrate Funkwhale with third-party projects."
},
]
};
},
......@@ -120,6 +274,21 @@ export default {
});
}
},
computed: {
suggestedTasks () {
let self = this
let tasks = this.availableTasks.filter(e => {
if (!self.availableTime) {
return true
}
return e.category === self.availableTime
})
tasks.sort((a, b) => {
return a.category - b.category
})
return tasks
}
},
watch: {
filters: {
handler() {
......@@ -132,11 +301,14 @@ export default {
</script>
<style>
.container.contributions {
.container.text {
max-width: 40em;
}
.button.is-fullwidth {
margin-top: 1em;
}
hr.hidden {
visibility: hidden;
}
</style>
<template>
<i :class="['fa', 'fa-' + name]" aria-hidden="true"></i>
</template>
<script>
require('fork-awesome/css/fork-awesome.min.css')
export default {
props: ['name']
}
</script>
<template>
<div class="box">
<article class="media">
<div class="media-left">
</div>
<div class="media-content">
<div class="content">
<h4>
<icon v-if="task.icon" :name="task.icon" class="right floated" />
{{ task.name }}
</h4>
<p>{{ task.summary }}</p>
</div>
<small>
<icon name="clock-o " />
<template v-if="task.category === 5">
5 minutes
</template>
<template v-else-if="task.category === 15">
15 minutes
</template>
<template v-else-if="task.category === 30">
30 minutes
</template>
<template v-else-if="task.category === 60">
One hour
</template>
<template v-else-if="task.category === 120">
2 hours
</template>
<template v-else-if="task.category === 9999">
More than two hours
</template>
</small>
<button class="right floated button is-link">Get started</button>
</div>
</article>
</div>
</template>
<script>
export default {
props: ["task"]
};
</script>
import Vue from "vue";
import Icon from "./Icon";
Vue.component('icon', Icon)
export default {}
import Vue from "vue";
import App from "./App.vue";
import moment from "moment";
require("bulma/css/bulma.css");
Vue.config.productionTip = false;
......@@ -15,3 +14,5 @@ Vue.filter("ago", ago);
new Vue({
render: h => h(App)
}).$mount("#app");
import _ from "./components/globals"
......@@ -2931,6 +2931,11 @@ forever-agent@~0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
fork-awesome@^1.1.5:
version "1.1.5"
resolved "https://registry.yarnpkg.com/fork-awesome/-/fork-awesome-1.1.5.tgz#09370221ad752a5396beb62bcb7bd11dab09a132"
integrity sha512-AcyPBje/cBkNjLAqxs301XjWSTLcXyktXjo0zhyrXDiEbTFi48HqBYbcPL0QBdtRHXrEdj+1rR5KublMQDwPwQ==
form-data@~2.3.2:
version "2.3.2"
resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.2.tgz#4970498be604c20c005d4f5c23aecd21d6b49099"
......
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