opentechschool-leipzig/poll_app

A Vue WebApp for creating polls or surveys for workshop evaluation

poll_app's Issues

Rework Question Details

When you click on a question list item, it will expand and show some details.
Right now the component has only minimal styling and is not showing all information.
This should be reworked!

Thanks to the work of @nycuma we now got all the information at hand 😊

What is left to do is work on improving the design of the question list and the display of information in this list

[Design] Create a simple logo

[Feature] Save Evaluation Results as PDF

Now that we created some charts as results, we should also allow the admins to download them for further usage.

jsPDF seems to be the standard way for creating PDFs on the frontend.

https://stackoverflow.com/questions/47668546/generate-pdf-with-jspdf-and-vue-js
https://parall.ax/products/jspdf

I prepared a first, really basic implementation, but the document doesn't have any styling yet and the charts are missing.

Improve Enduser View

This is the most importent Issue for the deployement of a first test version for the upcoming django girls workshop:

The view for a single Poll has to be improved so that it can be used for the workshops evaluation. This includes adjustments to the AnswerPoll.vue view and the PollQuestion.vue component.

---

Tasks for the PollQuestion.vue component

• Create reusable components for each input type
• Restyle the questions to be more userfriendly and accessible
• Make them responsive
• Improve styling

Tasks for the AnswerPoll.vue component

• Warn users if they try to submit unanswered questions (you could use the confirmation modal here)
• Redirect to a success view ( #35 ) when answers got submited...
• ...show an errormessage if it fails
• hide navigation on that view (only if poll is active)
• enable route guard for all polls that are not active (only admins should be able to see draft and closed polls)
• improve styling

As the issue is a little bigger it would of course be fine if you just want to work on one or two parts of it. 😊

[Discussion] Find a name!

Following the thought of #38, I'd like to give the app a nice and not to generic name.
So I'd like to collect idea's in this issue and maybe we could do a poll afterwards to select the most favored option.

If you like to, you could take the main purpose of the app - to collect feedback - as a starting point for naming ideas, but this clearly isn't required. All ideas are welcomend! 😊

Interface: Fragen anlegen

Editor View um Fragen anzulegen

Disallow poll dates in the past on poll creation

We could validate the date on "Create Poll" and at least warn about creating a poll with a date in the past. I think this would be a good first issue for new contributors, too.

Add Search and Filter for Question List

Testfragen anlegen

Testfragen in Firebase anlegen, um diese in generisches Formular zu laden.

Success View

Create a nice and rewarding success view for the "End User Flow" as roughly described in #34.

On the View should be displayed a "Thank You" message and the title and date of the related workshop. It has to be responsive of course.

Poll Preview: Drag & Drop für question order

• Which library is best suited?
• How to handle touch input?

Performance: Route level code splitting and lazy loaded components

How could we maintain the best performance for the app?
We might use route level code splitting to seperate the view for the participiants from the admin views. But since the different admin views have a lot of shared components, it might not be the best solution to implement code splitting for every route. Can we improve this with nested routing?

Are there any components where we can make use lazy loading and prefetching?

I would be thankful for any advise! 😊

Here is a great instruction to that topic

Interface: Umfragenübersicht

Listen mit:

• Umfragen
• Templates / Vorlagen

Features

• Umfragen aktiv schalten / schließen
• Filter und Suchfunktion
• Grobe Infos: Anzahl der Fragen, Status
• bei geschlossenen Fragen -> link zu statistik
• bei Templates -> link zur Poll Erstellung mit ausgewähltem Template (Vuex)
• Templates löschen

Check for answered questions does not work for multiple choice

Answering all questions except the ones with type "multiple choice" does not trigger the confirmation / warning on sending the answers.

Interface: User View (main functionality)

• Dynamic Routes for every "active" Poll

https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

• generate poll from data

• send answers to firebase

[Firebase] Active Poll Data for Enduser

The Problem

There is one big challange that is yet to solve before the app can be tested publicly: right now I blocked all requests to firebase for unauthenticated users. But the people that should answer the survey shouldn't have to sign up to see and answer their polls.

Solution Ideas

I guess that an easy and secure way to set this up, would be to create a new collection especially for the active polls, that only admins can write to but everybody is allowed to read. I imagine it to be written automatically whenever an admin changes a poll's status to 'active'. It should also contain all related questions data (not just the id's as it is stored now) and idealy all admin related data (creator, timestamps) should be removed. Once the poll's status is changed to closed, the poll should be removed from the active polls collection,

Although this could be set up in the frontend, I guess this would be a good use case for cloud functions. What do you think?

I hope to be able to start working on this tomorow. But I'd like to hear if anyone has a better idea to solve this challange.

---

Update

I managed to create a cloudFunction that writes the desired document 😊 As I am not really an expert with promises, there might be cleaner and more efficient ways to set this function up and any improvement ideas are most welcome! Besides that the following tasks remain:

To Do

• cloud function that creates activePolls (active)
• Remove "admin Data" from activePolls
• cloud function that removes activePolls (closed)
• Bonus: cf that blocks changes back to draft => this belongs to another task
• Set Firebase Rules for activePolls Collection
• use activePolls data in fronted
• create specific view for draft and closed polls

Admin Dashboard: Basic Statistics

We are now able to store the participants answers to the poll but don't use this data yet.
For each Poll there should be a statistics view, which shows detailed information about the related answers.

basic information

• Date and Title of the workshop
• Total number of participiants.

detailed information per question

• open question => list of all answers
• multiple choice => absolute and relative frequency
• scale question => median and mean value

Update (17.11.19)

The poll and answer data is now available on the statistics view. So you could go right ahead and do calculations and charts based on that! 😊

Update (23.11.19)

I installed ApexCharts and played around with different Chart types and set up some basic statistics for Multiple Choice and Scale Questions. There is still a lot of room for improvements - and we could also explore different aproaches. If you want to work on this feel free to join me! 😊

---

ToDo

• populate polldata with answerdata
• add statistics view
• add poll selection
• select poll data from route => link from the dashboard
• choose a library for charts
• do statistic calculations per questions..
• display data
• create beautiful charts

---

Chart Libraries

I think that chart.js or apexcharts.js might be good options. There are vue wrappers around for both libarieres, while on the first glance I think that the apexcharts wrapper is more convenient to use. apexcharts also seems to have the better documentation, while on the other charts.js has a bigger comunity and it's bundle size is half of apex'.

What do you think?

Globale SASS Variablen und Mixins

Da bin ich gerade drüber gestolpert:
https://vueschool.io/articles/vuejs-tutorials/globally-load-sass-into-your-vue-js-applications/

ziemlich easy! :)

Deploy Demo on Netlify (Bugfix!)

• Add a button to signIn without credentials for the demo
• remove cload functions for demo
• fix broken Question List!

Design: develop a coherrent concept

Hier könnte sich jemand design technisch noch völlig austoben! ;)

Interface: Templates anlegen, bearbeiten und laden

Vorlagen für die Umfragen müssen sich speichern, laden und bearbeiten lassen.

Bonus: Highligthing nötiger Anpassungen (Titel + Datum)

[Feature] Load & Edit "draft" Polls

• Add functionality to load and update polls as long as they aren't active or closed. (This should work analogous to the templates)

• Is it posible to protect active/closed polls from mutation via firebase rules? => it is: https://firebase.google.com/docs/rules/data-validation?authuser=0#use_existing_data_in

• disable the option to change state back to draft once there are answers.

Interface: Navigation

I'd like to have a more native app feeling for the app and would therefore replace the navbar with an interesting menu. I had something like this in mind: https://codepen.io/james_zedd/pen/ZKVZWp
but you're absolutly free to propose other ideas!

Requirements:

• it should be hidden by default (only show a toggle button)
• shouldn't be an allways shown navbar
• only show routes the user has access to
• add a smooth transition

Progress

• Move Navigation to its own component
• hide links the user has no access to
• add smooth transitions
• finish styling

Design: Icon Set

choose Icons from font-awesome

Icons:

• add
• remove
• save
• load
• delete
• menu
• arrow
• copy
• close
• login

Interface: Workshop anlegen

• Titel angeben
• Fragen auswählen
• Fragen erstellen
• Datum angeben (Moment.js)
• (Template speichern)

Generisches Formular anlegen

Formular aus einem Array von Question-IDs generieren

Improve Router

Ideas

• nested routes for admin views => show navbar only for admins
• fix and rework navigation guard (it has gotten a little to complex)

[Refactor] improve structure to make style adjustments easier

Guidline

• Provide global variables and mixins for reused values and properties
• move duplicate code to reusable components to get all styling at one place
• if style hast to be repeated in multiple components provide global classes

---

Tasks

• create gloable classes for poll input
• make use of bulma columns for organizing UI Elements
• setup a container component for all displayed list (header, body-slot, controls-slot)
• use container component for all sections
• finish #62 ...
• to finalize the rework of the add question component

Add questions Transitions (Vue Transition-Group)

• Add vue TransitionGroup to Questionlist and PollPreview
• Make sure transition runs smooth
• Add Transitions to Poll List (for filter and sorting mainly)

Add explanation Text option to scale questions

currently we only can add the additional text field for exlanations and comments on multiple choice questions. This option should also be available for scale queustions, which shouldn't require a lot of changes.

[Refactor] Globally registered Base Components

Register base components globally:

https://vuejs.org/v2/guide/components-registration.html

• setup automated registration
• remove unnecessary component registration

PWA: Configure Manifest and Service Worker

Set up the manifest and Service worker.

How to update data? How to delay db requests? How to send notifications? What other configurations are needed?

[Improvement] Create components for basic input elements

Input types used so far (besides the questionInpus)

• text/email/password input
• Input with Icon
• Input with Button
• number input
• select
• checkbox

Add later:

• radio

Add Tooltips

Test v-tooltip plugin (https://github.com/Akryum/v-tooltip)

Add sort functionality for poll lists

I already implemented sorting options for the questionlist and created some helperfunctions. This could be easily adopted for the poll / template list.

But maybe you have a better idea for the sorting functionality =)

[Discussion] Naming Conventions

The Problem

I'm no expert on surveys (and also not a native english speaker) but I got the feeling, that that naming of the app and it's components is a little misleading regarding conventions for the words poll, survey and evaluation form.

Here is my impression for the conceptions of these terms:
I guess that the general expactation for a poll is that it only contains one question (and is embeded on a website/forum). While surveys are concieved to include multiple questions and are common tools for science (e.g. social sciences and psychology) and economy (e.g. market surveys). An evaluation form is more specialized and bound to a specific event and date.

The guiding idea behind the webapp was to provide a tool to evaluate workshops and track the feedback over multiple worshops or events. But we also wanted it to be more general and be usable for all kind of questionaires.

Having that in mind the name poll feels very missleading for the purpose of the application.

Solutions

Now I have to ideas working on that:

1. Generalze

Give the app a more general name like "feedback" and add options for three variants:

• poll: only one questions
• survey: multiple questions
• evaluation: multiple questions and fixed date

2. Specialize

Keeping our focus straight on event evaluation and adjust our namings regarding that.

---

As I'm actually not sure about these asumptions about polls and surveys I'd really appreciate your feedback and your ideas about how we should continue with the application!

Improve userlist

Right now the userlist has only minimal styling and doesn't deliver a good user experience.

It should show a button and use the confirmation modal

Add Notifications

Right now error or success messeges are only loged to the console but they need to be displayed for the user.

It might be smart to use vuex for managing the message content. I'd also like to use a transition group for smooth animations.

maybe kinda like this package:
https://www.npmjs.com/package/vue-notification

Thanks to @Twissi we now have a great basic solution for displaying notifications, with more improvements to follow😊 We now should used it for all error handling

Review new netlify policy and submit/add information

Netlify loves open source projects
We're delighted to give all open source projects a generous free tier of our services. Starting in March 2020, we'll have new terms of service for open source projects we sponsor, including new requirements for a code of conduct, an approved license and badge. If you're currently running an open source account on Netlify or have a future project, please review the new policy and submit the information about your project by March 9, 2020.

Interface: Admin Dashboard

• Workshop anlegen
• Liste aller Workshops
• Auswertung

[Testing] Updated Demo

Updated Demo

Please test the updated demo and comment if you find any bugs.
You can also comment on improvement ideas that aren't covered by existing issues yet.

Is there any problem that prevents from testing the app on sunday? Please let us know! 😊

Feature: Authentication with firebase

Herausforderungen

• Admin Tool nur für registrierte Admins freigeben. => Abfrage nach custom claims?

• FirebaseUI oder REST API?

• set rules for firestore?

• build Route Guard

• set custom claims? => admin SDK (with node.js server?)

• Create Login View / request access View

Optional

• Add team list
• set custom claims via cloudfunctions

Links

• firebase/firebaseui-web#99 (comment)
• https://firebase.google.com/docs/reference/rest/auth
• https://firebase.google.com/docs/reference/js/firebase.auth
• https://firebase.google.com/docs/rules/basics?authuser=0
• https://medium.com/@anas.mammeri/vue-2-firebase-how-to-build-a-vue-app-with-firebase-authentication-system-in-15-minutes-fdce6f289c3c
• https://medium.com/@oleg.agapov/basic-single-page-application-using-vue-js-and-firebase-part-2-143a3084266f

[Bug] Solve Redirection Problem

The redirection isn't working properly when a user token exists:

The route guard redirects the user before the token is evaluated. Then the auth Observer gets triggered before the route meta data for the new route exists and the logged in user finds himself on the login screen.

I think the ideal option is to make the route guard wait for the evaluation of the firebase token before it redirects.

Refactor: Improve Project Structure

Bisher sind die Components noch sehr unsortiert. Hier sollte besser gleich eine gute Struktur entstehen. :)

[Ideas] Bring your feature ideas to the app

Call for Ideas

As the app is mainly made for learning purposes, you're invited to add your own ideas to the project and work on those aspect you want to learn about! 😊

This Issue is meant to collect ideas for features to work on, that aren't covered by other issues yet.
You wan't to learn how to set up file upload with firebase? You could add a feature to upload avatar images for the team. You'd rather like to work on customization? Allow the admins to select a color schema for their surveys. You got some other ideas? Feel free to comment on all features you would like to see in the app!

Ideas so far

• add avatars for the admins (and a profile section, where they could change them)
• allow admins to add comments on surveys and questions to improve working as a team
• save a set of questions as building blocks for surveys (we could call it components #5 )
• build our own backend (maybe with rust @dkellner ?) instead of relying on firebase
• create a "living styleguide" with Storybook

Statemanagement mit Vuex implementieren

Globaler State für Fragen und Polls?