Browse Source

Configuration overhaul

wip-firestore
Atridad Lahiji 1 year ago
parent
commit
0601a53893
  1. 7
      assets/README.md
  2. 10
      components/BarGraph.vue
  3. 27
      components/PollList.vue
  4. 7
      components/README.md
  5. 10
      components/dialog/AddPollDialog.vue
  6. 10
      components/dialog/AddQuestionDialog.vue
  7. 75
      components/dialog/EditPollDialog.vue
  8. 10
      components/dialog/EditQuestionDialog.vue
  9. 9
      components/session/Question.vue
  10. 8
      components/workflow/FinalResultsView.vue
  11. 8
      components/workflow/LiveResultsView.vue
  12. 11
      components/workflow/LoginForm.vue
  13. 8
      components/workflow/StudentPollView.vue
  14. 12
      config.js
  15. 14
      layouts/default.vue
  16. 8
      middleware/README.md
  17. 2
      package.json
  18. 7
      plugins/README.md
  19. 11
      static/README.md
  20. 10
      store/README.md

7
assets/README.md

@ -1,7 +0,0 @@
# ASSETS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

10
components/BarGraph.vue

@ -1,11 +1,11 @@
<template>
<v-layout v-bind:style="{ '--graphColors': graphColors }">
<v-layout v-bind:style="{ '--graphColors': graphTheme }">
<v-flex>
<vue-frappe
id="resp"
:labels="options"
:height="300"
:colors="['blue']"
:colors="[graphColor]"
:dataSets="[
{
name: 'Responses', type: 'bar',
@ -21,6 +21,7 @@
<script>
import { mapGetters } from 'vuex'
import { config } from '~/config.js'
export default {
components: {
@ -43,11 +44,14 @@ export default {
...mapGetters([
'GET_DARK_THEME'
]),
graphColors () {
graphTheme () {
if (this.GET_DARK_THEME) {
return 'white'
}
return 'black'
},
graphColor () {
return config.graphColor
}
}
}

27
components/PollList.vue

@ -7,10 +7,12 @@
<v-btn
@click="$emit('create-poll')"
color="primary"
:color="mainColor"
class="ma-2"
>
<v-icon>
<v-icon
color="white"
>
mdi-plus
</v-icon>
</v-btn>
@ -22,21 +24,25 @@
<template v-slot:item.options="{ item }">
<v-btn
v-on:click="$emit('edit-poll', { pollid: item.pollid, pollobj: item.pollobj })"
:color="mainColor"
small
color="primary"
class="mx-1"
>
<v-icon>
<v-icon
color="white"
>
mdi-square-edit-outline
</v-icon>
</v-btn>
<v-btn
v-on:click="$emit('delete-poll', { pollid: item.pollid })"
:color="stopColor"
small
color="error"
class="mx-1"
>
<v-icon>
<v-icon
color="white"
>
mdi-delete-outline
</v-icon>
</v-btn>
@ -47,6 +53,7 @@
<script>
import { auth, database } from 'firebase/app'
import { config } from '~/config.js'
export default {
props: {
@ -76,6 +83,14 @@ export default {
pollKeys: []
}
},
computed: {
mainColor () {
return config.mainColor
},
stopColor () {
return config.stopColor
}
},
mounted () {
auth().onAuthStateChanged((user) => {
if (user) {

7
components/README.md

@ -1,7 +0,0 @@
# COMPONENTS
**This directory is not required, you can delete it if you don't want to use it.**
The components directory contains your Vue.js Components.
_Nuxt.js doesn't supercharge these components._

10
components/dialog/AddPollDialog.vue

@ -7,7 +7,9 @@
transition="dialog-bottom-transition"
>
<v-card>
<v-toolbar color="primary">
<v-toolbar
:color="mainColor"
>
<v-btn
@click="closeAddPollDialog()"
icon
@ -51,6 +53,7 @@
<script>
import { functions } from 'firebase/app'
import { config } from '~/config.js'
export default {
props: {
@ -69,6 +72,11 @@ export default {
]
}
},
computed: {
mainColor () {
return config.mainColor
}
},
methods: {
createPoll () {
if (this.addPollName.length > 0) {

10
components/dialog/AddQuestionDialog.vue

@ -7,7 +7,9 @@
transition="dialog-bottom-transition"
>
<v-card>
<v-toolbar color="primary">
<v-toolbar
:color="mainColor"
>
<v-btn
@click="closeAddQuestionDialog()"
icon
@ -82,6 +84,7 @@
<script>
import { functions } from 'firebase/app'
import { config } from '~/config.js'
export default {
props: {
@ -133,6 +136,11 @@ export default {
]
}
},
computed: {
mainColor () {
return config.mainColor
}
},
methods: {
addQuestion () {
if (this.qname.length > 0) {

75
components/dialog/EditPollDialog.vue

@ -7,7 +7,9 @@
transition="dialog-bottom-transition"
>
<v-card>
<v-toolbar color="primary">
<v-toolbar
:color="mainColor"
>
<v-btn
@click="closeEditPollDialog()"
icon
@ -54,10 +56,12 @@
<v-btn
@click="createSession()"
v-if="sessionID === ''"
color="success"
:color="startColor"
class="ma-2"
>
<v-icon>
<v-icon
color="white"
>
mdi-play
</v-icon>
</v-btn>
@ -65,20 +69,24 @@
<v-btn
@click="deleteSession()"
v-else
color="error"
:color="stopColor"
class="ma-2"
>
<v-icon>
<v-icon
color="white"
>
mdi-stop
</v-icon>
</v-btn>
<v-btn
@click="$emit('create-question')"
color="primary"
:color="mainColor"
class="ma-2"
>
<v-icon>
<v-icon
color="white"
>
mdi-plus
</v-icon>
</v-btn>
@ -92,41 +100,47 @@
<v-btn
@click="stopActiveQuestion(item.qid, pollEventObject.pollid, sessionID)"
v-if="activeQuestionID === item.qid && sessionID !== ''"
:color="stopColor"
small
color="error"
class="mx-1"
>
<v-icon>
<v-icon
color="white"
>
mdi-stop-circle-outline
</v-icon>
</v-btn>
<v-btn
@click="activateQuestion(item.qid, pollEventObject.pollid, sessionID)"
v-else-if="activeQuestionID !== item.qid && sessionID !== ''"
:color="startColor"
small
color="success"
class="mx-1"
>
<v-icon>
<v-icon
color="white"
>
mdi-play-circle-outline
</v-icon>
</v-btn>
<v-btn
v-on:click="$emit('edit-question', { pollid: pollEventObject.pollid, qid: item.qid, qobj: item.qobj })"
small
color="primary"
:color="mainColor"
class="mx-1"
small
>
<v-icon>
<v-icon
color="white"
>
mdi-square-edit-outline
</v-icon>
</v-btn>
<v-btn
v-on:click="$emit('newpage', { page: 'liveresultsview', id: sessionID })"
v-if="activeQuestionID === item.qid && sessionID !== ''"
small
color="blue"
:color="infoColor"
class="mx-1"
small
>
<v-icon
color="white"
@ -137,9 +151,9 @@
<v-btn
v-on:click="$emit('newpage', { page: 'finalresultsview', id: item.qid })"
v-else-if="activeQuestionID !== item.qid && item.qobj.hasOwnProperty('responses')"
small
color="blue"
:color="infoColor"
class="mx-1"
small
>
<v-icon
color="white"
@ -149,11 +163,13 @@
</v-btn>
<v-btn
v-on:click="$emit('delete-question', { qid: item.qid, pollid: pollEventObject.pollid })"
small
color="error"
:color="stopColor"
class="mx-1"
small
>
<v-icon>
<v-icon
color="white"
>
mdi-delete-outline
</v-icon>
</v-btn>
@ -166,6 +182,7 @@
<script>
import { auth, functions, database } from 'firebase/app'
import { config } from '~/config.js'
export default {
props: {
@ -207,6 +224,20 @@ export default {
activeQuestionID: ''
}
},
computed: {
mainColor () {
return config.mainColor
},
startColor () {
return config.startColor
},
stopColor () {
return config.stopColor
},
infoColor () {
return config.infoColor
}
},
watch: {
// Not using an arrow function because I need to refer to "this"
// eslint-disable-next-line
@ -252,8 +283,6 @@ export default {
}
}
},
mounted () {
},
methods: {
editPoll () {
if (this.editPollName.length > 0) {

10
components/dialog/EditQuestionDialog.vue

@ -7,7 +7,9 @@
transition="dialog-bottom-transition"
>
<v-card>
<v-toolbar color="primary">
<v-toolbar
:color="mainColor"
>
<v-btn
@click="closeEditQuestionDialog()"
icon
@ -82,6 +84,7 @@
<script>
import { functions } from 'firebase/app'
import { config } from '~/config.js'
export default {
props: {
@ -108,6 +111,11 @@ export default {
]
}
},
computed: {
mainColor () {
return config.mainColor
}
},
watch: {
// Not using an arrow function because I need to refer to "this"
// eslint-disable-next-line

9
components/session/Question.vue

@ -18,7 +18,7 @@
:key="qoption.option"
:label="qoption.text"
:value="qoption.option"
color="primary"
:color="mainColor"
/>
</v-radio-group>
</v-card-text>
@ -30,6 +30,8 @@
</template>
<script>
import { config } from '~/config.js'
export default {
components: {
},
@ -49,6 +51,11 @@ export default {
qSelectedResponse: ''
}
},
computed: {
mainColor () {
return config.mainColor
}
},
watch: {
qSelectedResponse (newResponse) {
this.$emit('sendresponse', { response: newResponse })

8
components/workflow/FinalResultsView.vue

@ -8,7 +8,7 @@
<v-btn
@click="$emit('newpage', { page: 'homescreen', sessionid: '' })"
color="primary"
:color="mainColor"
>
Leave Results
</v-btn>
@ -18,6 +18,7 @@
<script>
import { auth, database } from 'firebase/app'
import FinalResults from '~/components/session/FinalResults.vue'
import { config } from '~/config.js'
export default {
components: {
@ -34,6 +35,11 @@ export default {
qobj: {}
}
},
computed: {
mainColor () {
return config.mainColor
}
},
watch: {
},
mounted () {

8
components/workflow/LiveResultsView.vue

@ -8,7 +8,7 @@
<v-btn
@click="$emit('newpage', { page: 'homescreen', sessionid: '' })"
color="primary"
:color="mainColor"
>
Leave Results
</v-btn>
@ -18,6 +18,7 @@
<script>
import { auth, database } from 'firebase/app'
import LiveResults from '~/components/session/LiveResults.vue'
import { config } from '~/config.js'
export default {
components: {
@ -34,7 +35,10 @@ export default {
activeQuestion: {}
}
},
watch: {
computed: {
mainColor () {
return config.mainColor
}
},
mounted () {
auth().onAuthStateChanged((user) => {

11
components/workflow/LoginForm.vue

@ -4,7 +4,10 @@
width="500"
class="align-center mx-auto"
>
<v-toolbar flat color="primary">
<v-toolbar
:color="mainColor"
flat
>
<v-toolbar-title class="justify-center">
Login
</v-toolbar-title>
@ -12,7 +15,7 @@
<v-card-text class="text-center">
<v-btn
v-on:click="login()"
color="primary"
:color="mainColor"
class="ma-2"
>
<v-icon>
@ -25,11 +28,15 @@
<script>
import { auth } from 'firebase/app'
import { config } from '~/config.js'
export default {
data: () => ({
}),
computed: {
mainColor () {
return config.mainColor
}
},
mounted () {
auth().getRedirectResult()

8
components/workflow/StudentPollView.vue

@ -12,7 +12,7 @@
<v-btn
@click="$emit('newpage', { page: 'homescreen', sessionid: '' })"
color="primary"
:color="mainColor"
>
Leave Poll
</v-btn>
@ -22,6 +22,7 @@
<script>
import { auth, functions, database } from 'firebase/app'
import Question from '~/components/session/Question.vue'
import { config } from '~/config.js'
export default {
components: {
@ -38,6 +39,11 @@ export default {
activeQuestion: {}
}
},
computed: {
mainColor () {
return config.mainColor
}
},
watch: {
},
mounted () {

12
config.js

@ -0,0 +1,12 @@
/* eslint-disable*/
const config = {
logoName: 'logo.webp',
mainColor: '#cc7700',
startColor: '#228B22',
stopColor: '#dd2c00',
infoColor: '#2196F3',
graphColor: '#2196F3'
}
export { config }
/* eslint-enable */

14
layouts/default.vue

@ -1,13 +1,13 @@
<template>
<v-app>
<v-app-bar
:color="mainColor"
app
dense
color="primary"
>
<div>
<v-img
:src="require('~/assets/logo.webp')"
:src="require(`~/assets/${logoName}`)"
class="mx-1"
width="40"
height="40"
@ -60,6 +60,8 @@
<script>
import { mapGetters } from 'vuex'
import { auth } from 'firebase/app'
import { config } from '~/config.js'
export default {
data () {
return {
@ -71,7 +73,13 @@ export default {
'IS_AUTHENTICATED',
'GET_USER_PHOTO_URL',
'GET_DARK_THEME'
])
]),
logoName () {
return config.logoName
},
mainColor () {
return config.mainColor
}
},
mounted () {
this.$vuetify.theme.dark = this.GET_DARK_THEME

8
middleware/README.md

@ -1,8 +0,0 @@
# MIDDLEWARE
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your application middleware.
Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

2
package.json

@ -1,6 +1,6 @@
{
"name": "Pollo",
"version": "0.8.0",
"version": "0.8.1",
"description": "Open-source real-time polling!",
"author": "SyncED",
"private": true,

7
plugins/README.md

@ -1,7 +0,0 @@
# PLUGINS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).

11
static/README.md

@ -1,11 +0,0 @@
# STATIC
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your static files.
Each file inside this directory is mapped to `/`.
Thus you'd want to delete this README.md before deploying to production.
Example: `/static/robots.txt` is mapped as `/robots.txt`.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).

10
store/README.md

@ -1,10 +0,0 @@
# STORE
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your Vuex Store files.
Vuex Store option is implemented in the Nuxt.js framework.
Creating a file in this directory automatically activates the option in the framework.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).