apply datepicker also to webarchives by crawl (#372)

medialab · Sep 8, 2021 · d3c194a · d3c194a
1 parent c2a36df
commit d3c194a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/hyphe_frontend/app/partials/webentitystartpagesmodal.html b/hyphe_frontend/app/partials/webentitystartpagesmodal.html
@@ -184,7 +184,7 @@ <h3 class="md-title" md-colors="{'color':'default-warn'}">
 
           </div>
         </md-tab>
-        <md-tab label="Advanced crawl options" ng-disabled="newStartPagesStack.length>0">
+        <md-tab label="Advanced crawl options" ng-disabled="newStartPagesStack.length>0" md-on-select="initDatePicker()">
           <div layout="column" md-colors="{background: 'default-background-50'}" class="crawl_advanced">
             <span style="margin: 8px"><md-icon class="material-icons" role="img" aria-label="history">ads_click</md-icon> Crawl depth</span>
             <div md-colors="{background: 'default-primary-50'}" style="padding: 8px">
@@ -205,18 +205,17 @@ <h3 class="md-title" md-colors="{'color':'default-warn'}">
                   </div>
                 </md-radio-group>
                 <div layout="column" ng-style="{'opacity': webentity.webarchives.option ? 1 : 0, 'width': '257px'}">
-                  <!-- TODO: DATE PICKER -->
                   <label><small>Date to try to approach:</small></label>
                   <div style="display: flex; justify-content: space-between; flex-wrap: nowrap">
-                    <md-input-container style="margin: 0px; height: 28px; width: 40%; padding-bottom: 22px">
-                      <input ng-model="webentity.webarchives.date" ng-change="setArchivesMinMaxDate()" aria-label="date to approach">
+                    <md-input-container style="margin: 0px; height: 28px; width: 60%; padding-bottom: 22px">
+                      <input id="datepicker" type="date" ng-model="datepicker_date" ng-change="setArchivesMinMaxDate()" aria-label="date to approach">
                     </md-input-container>
                     <small style="color: red; width: 55%" ng-show="date_error">{{ date_error }}</small>
                   </div>
 
                   <label><small>Delay to consider before and after the date</small></label>
                   <div layout="row" style="display: flex; justify-content: flex-start">
-                    <md-input-container style="margin: 0px; height: 28px; width: 40%; text-align: center">
+                    <md-input-container style="margin: 0px; height: 28px; width: 60%; text-align: center">
                       <md-select ng-model="ed_webarchive_daysrange_choice" ng-change="setArchivesMinMaxDate()" aria-label="days to consider before and after the date">
                         <md-option ng-repeat="(key, value) in webarchives_periods" value="{{ key }}">{{ value }}</md-option>
                       </md-select>

diff --git a/hyphe_frontend/app/views/prepareCrawls.js b/hyphe_frontend/app/views/prepareCrawls.js
@@ -670,6 +670,15 @@ angular.module('hyphe.preparecrawlsController', [])
       $scope.cookies_error = ""
       $scope.date_error = ""
       $scope.webarchives_options = webarchives_options
+      $scope.datepicker_date = $scope.webentity.webarchives.date
+
+      $scope.initDatePicker = function() {
+        var dp = document.getElementById('datepicker')
+        if (dp && (!dp.value || dp.value === "")) {
+          dp.value = $scope.webentity.webarchives.date
+          dp.parentNode.classList.add("md-input-has-value")
+        }
+      }
 
       $scope.webarchives_periods = {
         0: "Only that date",
@@ -690,6 +699,7 @@ angular.module('hyphe.preparecrawlsController', [])
         if (!$scope.webentity.webarchives.option) {
           return
         }
+        $scope.initDatePicker()
 
         if ($scope.ed_webarchive_daysrange_custom === undefined || $scope.ed_webarchive_daysrange_choice === undefined) {
           if ($scope.webentity.webarchives.days_range === $scope.infinityRange || $scope.webentity.webarchives.days_range === 'infinity') {
@@ -721,6 +731,9 @@ angular.module('hyphe.preparecrawlsController', [])
           $scope.webarchives_days_range_display = $scope.webarchives_periods[$scope.webentity.webarchives.days_range_choice]
         }
 
+        if (document.getElementById('datepicker')) {
+          $scope.webentity.webarchives.date = document.getElementById('datepicker').value
+        }
         try {
           if (!/^\d{4}-\d{2}-\d{2}$/.test($scope.webentity.webarchives.date)) {
             $scope.date_error = "This is not a valid date, the format should be YYYY-MM-DD."

diff --git a/hyphe_frontend/app/views/settings.html b/hyphe_frontend/app/views/settings.html
@@ -198,7 +198,6 @@ <h3 style="margin:0px">CRAWL WEB ARCHIVES (experimental)</h3>
                   </md-radio-group>
 
                   <div ng-hide="ed_webarchive_option === ''">
-                  <!-- TODO: DATE PICKER -->
                     <dt>Date to try to approach</dt>
                     <div style="display: flex; justify-content: space-between; flex-wrap: nowrap">
                       <md-input-container style="margin: 0px; height: 28px; width: 50%">