Frontend+Backend: Add feature to close participation in the challenge…

… even when it is ongoing(#2351)

apps/challenges/admin.py

@@ -25,6 +25,7 @@ class ChallengeAdmin(ImportExportTimeStampedAdmin):
         "end_date",
         "creator",
         "published",
+        "is_registration_open",
         "enable_forum",
         "anonymous_leaderboard",
         "featured",
@@ -34,6 +35,7 @@ class ChallengeAdmin(ImportExportTimeStampedAdmin):
     )
     list_filter = (
         "published",
+        "is_registration_open",
         "enable_forum",
         "anonymous_leaderboard",
         "featured",

apps/challenges/migrations/0053_added_is_registration_open_field.py

@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.20 on 2019-05-31 00:53
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('challenges', '0052_add_error_bar'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='challenge',
+            name='is_registration_open',
+            field=models.BooleanField(default=True),
+        ),
+    ]

apps/challenges/models.py

@@ -56,6 +56,7 @@ def __init__(self, *args, **kwargs):
     published = models.BooleanField(
         default=False, verbose_name="Publicly Available", db_index=True
     )
+    is_registration_open = models.BooleanField(default=True)
     enable_forum = models.BooleanField(default=True)
     forum_url = models.URLField(max_length=100, blank=True, null=True)
     leaderboard_description = models.TextField(null=True, blank=True)

apps/challenges/serializers.py

@@ -43,6 +43,7 @@ class Meta:
             "end_date",
             "creator",
             "published",
+            "is_registration_open",
             "enable_forum",
             "anonymous_leaderboard",
             "is_active",
@@ -178,6 +179,7 @@ class Meta:
             "creator",
             "evaluation_details",
             "published",
+            "is_registration_open",
             "enable_forum",
             "anonymous_leaderboard",
             "leaderboard_description",

apps/challenges/views.py

@@ -234,6 +234,12 @@ def add_participant_team_to_challenge(
         response_data = {"error": "Challenge does not exist"}
         return Response(response_data, status=status.HTTP_406_NOT_ACCEPTABLE)
 
+    if not challenge.is_registration_open:
+        response_data = {
+            "error": "Registration is closed for this challenge!"
+        }
+        return Response(response_data, status=status.HTTP_406_NOT_ACCEPTABLE)
+
     if (
         challenge.end_date < timezone.now()
         or challenge.start_date > timezone.now()

frontend/src/css/modules/challenge.scss

@@ -186,3 +186,40 @@ md-select.md-default-theme .md-select-value span:first-child:after, md-select .m
 #option-text-color {
     color: #252833;
 }
+
+.btn-switch {
+    position: relative;
+    display: block;
+    width: 30px;
+    height: 15px;
+    cursor: pointer;
+    background-color: rgb(167, 163, 163);
+    border: 2px solid rgb(167, 163, 163);
+    border-radius: 40px;
+
+    .btn-switch-circle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: block;
+        height: 10px;
+        width: 10px;
+        background-color: #fff;
+        border-radius: 40px;
+    }
+}
+
+.btn-switch--on {
+    background-color: #ffaf4b;
+    border: 2px solid #ffaf4b;;
+
+    .btn-switch-circle--on {
+        left: auto;
+        right: 0;
+    }
+}
+
+.toggle-participation-text {
+    display: inline-block;
+    padding-left: 10px;
+}

frontend/src/js/controllers/challengeCtrl.js

@@ -81,6 +81,7 @@
                 vm.isForumEnabled = details.enable_forum;
                 vm.forumURL = details.forum_url;
                 vm.cliVersion = details.cli_version;
+                vm.isRegistrationOpen = details.is_registration_open;
 
                 if (vm.page.image === null) {
                     vm.page.image = "dist/images/logo.png";
@@ -269,6 +270,48 @@
 
         utilities.sendRequest(parameters);
 
+        vm.toggleParticipation = function (ev, isRegistrationOpen) {
+            // ev.stopPropagation();
+            var participationState;
+            if (isRegistrationOpen) {
+                participationState = 'Close';
+            } else {
+                participationState = 'Open';
+            }
+            var confirm = $mdDialog.confirm()
+                          .title(participationState + ' participation in the challenge?')
+                          .ariaLabel('')
+                          .targetEvent(ev)
+                          .ok('Yes, I\'m sure')
+                          .cancel('No');
+
+            $mdDialog.show(confirm).then(function () {
+                var challengeHostList = utilities.getData("challengeCreator");
+                for (var challenge in challengeHostList) {
+                    if (challenge == vm.challengeId) {
+                        vm.challengeHostId = challengeHostList[challenge];
+                        break;
+                    }
+                }
+                parameters.method = "PATCH";
+                parameters.url = "challenges/challenge_host_team/" + vm.challengeHostId + "/challenge/" + vm.challengeId;
+                parameters.data = {
+                    "is_registration_open": !isRegistrationOpen
+                };
+                parameters.callback = {
+                    onSuccess: function() {
+                        vm.isRegistrationOpen = !vm.isRegistrationOpen;
+                        $rootScope.notify('success', 'Participation is ' + participationState + 'ed successfully');
+                    },
+                    onError: function(response) {
+                        var details = response.data;
+                        $rootScope.notify('error', details.error);
+                    }
+                };
+                utilities.sendRequest(parameters);
+            }, function() {});
+        };
+
         vm.displayDockerSubmissionInstructions = function (isDockerBased, isParticipated) {
             // get remaining submission for docker based challenge
             if (isDockerBased && isParticipated == true) {

frontend/src/views/web/challenge/challenge-page.html

@@ -48,14 +48,22 @@
             <div class="col m3 l3 align-right">
                 <button class="waves-effect waves-dark btn ev-btn-dark w-300 fs-14" type="submit" ng-click="challenge.starChallenge()" ng-init="challenge.isStarred()"><i class="fa fa-star star"></i> {{challenge.data}}&nbsp;&nbsp;{{challenge.count}}</button>
             </div>
+            <div ng-if="challenge.isChallengeHost" style="padding-top: 30px;" class="col m3 l3 align-right">
+                <div style="display: inline-block;" ng-click="challenge.toggleParticipation($event, challenge.isRegistrationOpen)"
+                    class="btn-switch" ng-class="{'btn-switch--on':challenge.isRegistrationOpen}" ng-model="challenge.isRegistrationOpen">
+                    <div class="btn-switch-circle" ng-class="{'btn-switch-circle--on': challenge.isRegistrationOpen}"
+                    ng-model="challenge.isRegistrationOpen"></div>
+                </div>
+                <div class="toggle-participation-text"><strong style="font-size: 18px;">Toggle Participation</strong></div>
+            </div>
         </div>
         <div class="row rm-row-bot">
             <div class="col s12">
                 <ul class="inline-list rm-gut">
                     <li><a ui-sref=".overview" ui-sref-active="active-challenge" class="text-light-black w-500"><i class="fa fa-info"></i> Overview</a></li>
                     <li><a ui-sref=".evaluation" ui-sref-active="active-challenge" class="text-light-black w-500"><i class="fa fa-bar-chart-o"></i> Evaluation</a></li>
                     <li><a ui-sref=".phases" ui-sref-active="active-challenge" class="text-light-black w-500"><i class="fa fa-level-up"></i> Phases</a></li>
-                    <li ng-if="!challenge.isParticipated"><a ui-sref=".participate" ui-sref-active="active-challenge" class="text-light-black w-500"><i class="fa fa-free-code-camp"></i> Participate</a></li>
+                    <li ng-if="(challenge.isRegistrationOpen && challenge.isParticipated) || (!challenge.isParticipated && challenge.isRegistrationOpen)"><a ui-sref=".participate" ui-sref-active="active-challenge" class="text-light-black w-500"><i class="fa fa-free-code-camp"></i> Participate</a></li>
                     <li ng-if="challenge.isParticipated"><a ui-sref=".submission" ui-sref-active="active-challenge" class="text-light-black w-500"><i class="fa fa-upload"></i> Submit</a></li>
                     <li ng-if="challenge.isParticipated"><a ui-sref=".my-submission" ui-sref-active="active-challenge" class="text-light-black w-500"><i class="fa fa-eye"></i> My Submissions</a></li>
                     <li ng-if="challenge.isChallengeHost"><a ui-sref=".my-challenge-all-submission" ui-sref-active="active-challenge" class="text-light-black w-500"><i class="fa fa-eye"></i>View All Submissions</a></li>