Frontend: Show challenge start date in submit tab & disable submission when start date is in future(Cloud-CV#2032)

Author: RishabhJain2018

frontend/src/views/web/challenge/submission.html

@@ -38,16 +38,21 @@
                                 <ul>
                                     <b>Select Phase:</b>
                                     <li ng-repeat="item in challenge.phases.results">
-                                        <input ng-if="challenge.currentDate < item.end_date" type="radio" name="selectPhase" class="with-gap selectPhase" id="{{item.id}}" value="{{item.id}}" ng-model="challenge.phaseId" ng-click="challenge.showRemainingSubmissions(item.id)">
-                                        <input ng-if="challenge.currentDate >= item.end_date" type="radio" name="selectPhase" class="with-gap selectPhase" id="{{item.id}}" value="{{item.id}}" ng-model="challenge.phaseId" ng-click="challenge.showRemainingSubmissions(item.id)" disabled="true">
+                                        <input ng-disabled="challenge.currentDate < item.start_date || challenge.currentDate >= item.end_date" type="radio" name="selectPhase" class="with-gap selectPhase" id="{{item.id}}" value="{{item.id}}" ng-model="challenge.phaseId" ng-click="challenge.showRemainingSubmissions(item.id)">
                                         <label for="{{item.id}}"></label>
                                         <div class="show-member-title pointer" ng-if="!item.showPrivate"><strong class="text-med-black">Phase: </strong>{{item.name}}
                                             <br>
-                                            <strong class="text-med-black">End Date: </strong>{{item.end_date | date:'medium'}}</div>
+                                            <strong class="text-med-black">Start Date: </strong>{{item.start_date | date:'medium'}}
+                                            <br>
+                                            <strong class="text-med-black">End Date: </strong>{{item.end_date | date:'medium'}}
+                                        </div>
                                         <div class="show-member-title pointer" ng-if="item.showPrivate"><strong class="text-highlight">Phase: </strong> <span class="text-highlight">
                                             {{item.name}}</span>
                                             <br>
-                                            <strong class="text-highlight">End Date: </strong><span class="text-highlight">{{item.end_date | date:'medium'}}</span></div>
+                                            <strong class="text-highlight">Start Date: </strong><span class="text-highlight">{{item.start_date | date:'medium'}}</span>
+                                            <br>
+                                            <strong class="text-highlight">End Date: </strong><span class="text-highlight">{{item.end_date | date:'medium'}}</span>
+                                        </div>
                                         <div class="clearfix"></div>
                                     </li>
                                     <div class="row">