Add warning label for less than 10 days

10 days is arbitary and we can set it to any number we want
hotosm · Nov 6, 2019 · e00e667 · e00e667
1 parent e8e9faa
commit e00e667
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 1 deletion.
diff --git a/flask_project/campaign_manager/styles/_campaigns.scss b/flask_project/campaign_manager/styles/_campaigns.scss
@@ -19,6 +19,9 @@
     &.panel {
       cursor: pointer;
     }
+    .label {
+      margin: 0 12px;
+    }
     a {
       font-weight: bold;
       color: $blue-dark;

diff --git a/flask_project/campaign_manager/styles/_labels.scss b/flask_project/campaign_manager/styles/_labels.scss
@@ -0,0 +1,14 @@
+.label {
+  font-family: 'Archivo', sans-serif;
+  font-size: 10px;
+  font-weight: normal;
+  padding: 7px 8px 6px 8px;
+  border: none;
+  svg {
+    vertical-align: text-bottom;
+  }
+  &-warning {
+    color: $black;
+    background: $red-light;
+  }
+}
diff --git a/flask_project/campaign_manager/styles/index.scss b/flask_project/campaign_manager/styles/index.scss
@@ -13,5 +13,6 @@
 @import "header";
 @import "footer";
 @import "buttons";
+@import "labels";
 @import "pages";
 @import "campaigns";
diff --git a/flask_project/campaign_manager/templates/campaign_index.html b/flask_project/campaign_manager/templates/campaign_index.html
@@ -417,12 +417,20 @@
     return hasStarted && !hasEnded;
   }
 
+  function getDaysLeft(campaign) {
+    var endDate = moment(campaign.end_date, 'YYYY-MM-DD', true);
+    var now = moment(new Date(), 'YYYY-MM-DD');
+    return endDate.diff(now, 'days');
+  }
+
   function buildCampaignCard(campaign, user) {
     var startDate = moment(campaign.start_date, 'YYYY-MM-DD', true).format('YYYY.MM.DD');
     var endDate = moment(campaign.end_date, 'YYYY-MM-DD', true).format('YYYY.MM.DD');
     var featureCount = Object.keys(campaign.types || {}).length;
     var completeness = campaignProgress(campaign);
     var isActive = campaignStatus(campaign);
+    var daysLeft = getDaysLeft(campaign);
+    var warning = daysLeft ? `${daysLeft} day${daysLeft > 1 ? 's' : ''} left!` : 'Finished'
     return `
     <li class="${!isActive ? 'in' : ''}active-campaign">
       <div class="campaign-card panel ${isActive ? 'active' : ''}" onclick="openCampaign(event, this, '${campaign.uuid}')">
@@ -438,7 +446,17 @@
         </div>
         <div class="row">
           <div class="col-xs-7">
-            <p class="campaign-date">${startDate}&mdash;${endDate}</p>
+            <p class="campaign-date">${startDate}&mdash;${endDate}
+              ${daysLeft <= 10 ? `<span class="label label-warning">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="11" height="12" viewBox="0 0 11 12">
+                    <g fill="#2C3038" fill-rule="nonzero">
+                      <path d="M0 6.533C0 3.723 2.174 1.415 4.944 1.2V.841h-.995a.416.416 0 0 1-.42-.42c0-.236.184-.421.42-.421h2.769c.236 0 .42.185.42.42 0 .236-.184.421-.42.421h-.933V1.2a5.298 5.298 0 0 1 2.738 1.015l.462-.461-.195-.195a.42.42 0 0 1 .595-.595l.974.974a.42.42 0 0 1-.595.595l-.195-.195-.42.421a5.335 5.335 0 0 1 1.559 3.774c0 2.954-2.4 5.354-5.354 5.354A5.358 5.358 0 0 1 0 6.533zm5.354-4.512A4.524 4.524 0 0 0 .83 6.544a4.53 4.53 0 0 0 4.523 4.523 4.53 4.53 0 0 0 4.523-4.523A4.53 4.53 0 0 0 5.354 2.02z"/>
+                      <path d="M5.354 6.882h1.795c.236 0 .42-.185.42-.42a.416.416 0 0 0-.42-.421H5.774V3.877a.416.416 0 0 0-.42-.42.416.416 0 0 0-.42.42v2.595c0 .225.184.41.42.41z"/>
+                    </g>
+                  </svg>
+                  ${warning}
+                </span>`: ''}
+            </p>
             <p><b>${completeness}%</b> Attributes completeness</p>
             <div class="campaign-progress-bar">
               <div class="progress" style="width:82%;float:left;">

diff --git a/flask_project/campaign_manager/templates/styleguide.html b/flask_project/campaign_manager/templates/styleguide.html
@@ -33,6 +33,18 @@ <h3>Special</h3>
         View
       </button>
     </div>
+    <div class="row">
+      <h2>Labels</h2>
+      <span class="label label-warning">
+        <svg xmlns="http://www.w3.org/2000/svg" width="11" height="12" viewBox="0 0 11 12">
+          <g fill="#2C3038" fill-rule="nonzero">
+            <path d="M0 6.533C0 3.723 2.174 1.415 4.944 1.2V.841h-.995a.416.416 0 0 1-.42-.42c0-.236.184-.421.42-.421h2.769c.236 0 .42.185.42.42 0 .236-.184.421-.42.421h-.933V1.2a5.298 5.298 0 0 1 2.738 1.015l.462-.461-.195-.195a.42.42 0 0 1 .595-.595l.974.974a.42.42 0 0 1-.595.595l-.195-.195-.42.421a5.335 5.335 0 0 1 1.559 3.774c0 2.954-2.4 5.354-5.354 5.354A5.358 5.358 0 0 1 0 6.533zm5.354-4.512A4.524 4.524 0 0 0 .83 6.544a4.53 4.53 0 0 0 4.523 4.523 4.53 4.53 0 0 0 4.523-4.523A4.53 4.53 0 0 0 5.354 2.02z" />
+            <path d="M5.354 6.882h1.795c.236 0 .42-.185.42-.42a.416.416 0 0 0-.42-.421H5.774V3.877a.416.416 0 0 0-.42-.42.416.416 0 0 0-.42.42v2.595c0 .225.184.41.42.41z" />
+          </g>
+        </svg>
+        x days left!
+      </span>
+    </div>
     <div class="row">
       <h2>Colors</h2>
       <div class="swatch red"></div>