From d9389ef4ee9a9cd339ce7b82ec3cb9d23067b6fc Mon Sep 17 00:00:00 2001
From: CBenni <cbenni@streamelements.com>
Date: Sun, 6 Dec 2020 17:42:51 +0100
Subject: [PATCH] Added commentators feature

---
 backend/src/api/submissions.js                       | 6 +++---
 frontend/src/components/dashboard/SubmissionEdit.vue | 7 +++++++
 frontend/src/components/dashboard/admin/Events.vue   | 3 +++
 frontend/src/components/dashboard/admin/events.js    | 4 +++-
 frontend/src/components/dashboard/submissionedit.js  | 8 ++++++++
 5 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/backend/src/api/submissions.js b/backend/src/api/submissions.js
index c5d5468..34c4c5c 100644
--- a/backend/src/api/submissions.js
+++ b/backend/src/api/submissions.js
@@ -13,7 +13,7 @@ import { sendNotification } from '../notifications';
 export async function getUserSubmissions(req, res) {
   if (!req.jwt) return res.status(401).end('Not authenticated.');
   console.log('Getting user submissions with ID ', req.jwt.user.id);
-  return res.json(await models.Submission.find({ user: req.jwt.user.id }, 'event user game twitchGame leaderboards category platform estimate runType teams runners video comment status notes invitations incentives')
+  return res.json(await models.Submission.find({ user: req.jwt.user.id }, 'event user game twitchGame leaderboards category platform estimate runType teams runners video comment commentators status notes invitations incentives')
   .populate({ path: 'invitations', populate: { path: 'user', select: 'connections.twitch.displayName connections.twitch.id connections.twitch.logo' } })
   .populate({ path: 'teams.members', populate: { path: 'user', select: 'connections.twitch.displayName connections.twitch.id connections.twitch.logo' } }));
 }
@@ -30,7 +30,7 @@ export async function updateUserSubmission(req, res) {
   const user = await models.User.findById(req.jwt.user.id, 'roles connections.twitch.name connections.twitch.displayName').populate('roles.role').exec();
   // during the submissions period, all these values can be edited. Outside, only run editors can edit everything, otherwise just the alwaysEditable fields can be edited
   const fullyEditable = isInSubmissionsPeriod(event) || hasPermission(user, req.body.event, 'Edit Runs');
-  const validChanges = _.pick(req.body, fullyEditable ? ['game', 'twitchGame', 'leaderboards', 'category', 'platform', 'estimate', 'runType', 'teams', 'video', 'comment', 'invitations', 'incentives'] : event.alwaysEditable);
+  const validChanges = _.pick(req.body, fullyEditable ? ['game', 'twitchGame', 'leaderboards', 'category', 'platform', 'estimate', 'runType', 'teams', 'video', 'comment', 'commentators', 'invitations', 'incentives'] : event.alwaysEditable);
   if (['stub', 'saved', 'deleted'].includes(req.body.status) || (req.body.status && hasPermission(user, req.body.event, 'Edit Runs'))) validChanges.status = req.body.status;
 
   if (!req.body.event) return res.status(400).end('Invalid event ID');
@@ -121,7 +121,7 @@ export async function updateUserSubmission(req, res) {
 
 export async function getSubmission(req, res) {
   if (!req.params.id) return res.status(400).end('Missing query parameter id');
-  return res.json(await models.Submission.findById(req.params.id, 'event user game twitchGame leaderboards category platform estimate runType teams runners invitations video comment status incentives')
+  return res.json(await models.Submission.findById(req.params.id, 'event user game twitchGame leaderboards category platform estimate runType teams runners invitations video comment commentators status incentives')
   .populate('user', 'connections.twitch.name connections.twitch.displayName connections.twitch.logo connections.srdotcom.name')
   .populate({ path: 'teams.members', populate: { path: 'user', select: 'connections.twitch.displayName connections.twitch.id connections.twitch.logo' } })
   .populate({ path: 'invitations', populate: { path: 'user', select: 'connections.twitch.displayName connections.twitch.id connections.twitch.logo' } })
diff --git a/frontend/src/components/dashboard/SubmissionEdit.vue b/frontend/src/components/dashboard/SubmissionEdit.vue
index f7f76d2..e73ff00 100644
--- a/frontend/src/components/dashboard/SubmissionEdit.vue
+++ b/frontend/src/components/dashboard/SubmissionEdit.vue
@@ -97,6 +97,13 @@
               </div>
             </div>
           </div>
+          <div class="flex-100 layout-column" v-if="currentEvent.needsCommentators !== false">
+            <md-field class="large-field flex-none" :class="getValidationClass('commentators')">
+              <label for="commentators">Commentators</label>
+              <md-input name="commentators" id="commentators" v-model="selectedSubmission.commentators" :disabled="!editable('commentators')" />
+              <span class="md-error" v-if="!$v.selectedSubmission.commentators.required">At least one commentator is required</span>
+            </md-field>
+          </div>
           <md-field class="large-field flex-none" :class="getValidationClass('video')">
             <label for="video">Video url</label>
             <md-input name="video" id="video" v-model="selectedSubmission.video" :disabled="!editable('video')" />
diff --git a/frontend/src/components/dashboard/admin/Events.vue b/frontend/src/components/dashboard/admin/Events.vue
index dea6067..aaca9b8 100644
--- a/frontend/src/components/dashboard/admin/Events.vue
+++ b/frontend/src/components/dashboard/admin/Events.vue
@@ -40,6 +40,9 @@
                 <md-option v-for="role in roleList" :key="role._id" :value="role._id">{{role.name}}</md-option>
               </md-select>
             </md-field>
+            <md-checkbox name="role" id="role" v-model="selectedEvent.commentatorsNeeded">
+              Enable commentators
+            </md-checkbox>
 
             <div class="flex-100 layout-row">
               <md-datepicker class="medium-field" v-model="selectedEvent.startDate">
diff --git a/frontend/src/components/dashboard/admin/events.js b/frontend/src/components/dashboard/admin/events.js
index 6a9656a..0ef5e29 100644
--- a/frontend/src/components/dashboard/admin/events.js
+++ b/frontend/src/components/dashboard/admin/events.js
@@ -7,7 +7,7 @@ export default {
   data: () => ({
     selectedEvent: null,
     showDialog: false,
-    selectableFields: ['game', 'twitchGame', 'leaderboards', 'category', 'platform', 'estimate', 'runType', 'teams', 'video', 'comment', 'invitations', 'incentives'],
+    selectableFields: ['game', 'twitchGame', 'leaderboards', 'category', 'platform', 'estimate', 'runType', 'teams', 'video', 'comment', 'commentators', 'invitations', 'incentives'],
   }),
   computed: {
     ...mapState(['user', 'events', 'roles']),
@@ -33,6 +33,7 @@ export default {
         name: '',
         status: 'unpublished',
         volunteersNeeded: _.map(this.roleList, role => role._id),
+        commentatorsNeeded: false,
         selectableFields: [],
         meta: {
           theme: '',
@@ -56,6 +57,7 @@ export default {
     },
     selectEvent(event) {
       this.selectedEvent = _.merge({
+        commentatorsNeeded: false,
         meta: {
           theme: '',
           horaro: '',
diff --git a/frontend/src/components/dashboard/submissionedit.js b/frontend/src/components/dashboard/submissionedit.js
index ca3aa75..e275359 100644
--- a/frontend/src/components/dashboard/submissionedit.js
+++ b/frontend/src/components/dashboard/submissionedit.js
@@ -9,6 +9,7 @@ import {
   maxLength,
   helpers,
   between,
+  requiredIf,
 } from 'vuelidate/lib/validators';
 import Team from './Team.vue';
 import settings from '../../settings';
@@ -260,6 +261,13 @@ export default {
           },
         },
       },
+      commentators: {
+        required: requiredIf(() => {
+          return this.currentEvent.needsCommentators == true && this.selectedSubmission.runType === "race";
+        }),
+        minLength: minLength(3),
+        maxLength: maxLength(1000),
+      },
       incentives: {
         $each: {
           name: {