Make progress easier to follow

copanier/models.py

@@ -315,6 +315,7 @@ class Delivery(PersistedBase):
     NEED_PRICE_UPDATE = 1
     OPEN = 2
     ADJUSTMENT = 3
+    WAITING_PRODUCTS = 4
 
     name: str
     from_date: datetime_field
@@ -343,6 +344,9 @@ class Delivery(PersistedBase):
             return self.OPEN
         if self.needs_adjustment:
             return self.ADJUSTMENT
+        if self.is_waiting_products:
+            return self.WAITING_PRODUCTS
+        
         return self.CLOSED
 
     def products_need_price_update(self, products=None):
@@ -376,6 +380,15 @@ class Delivery(PersistedBase):
     def is_open(self):
         return datetime.now().date() <= self.order_before.date()
     
+    @property
+    def is_waiting_products(self):
+        return (
+            datetime.now().date() >= self.order_before.date()
+            and
+            datetime.now().date() <= self.from_date.date()
+        )
+
+
     @property
     def is_foreseen(self):
         return datetime.now().date() <= self.from_date.date()

copanier/static/app.css

@@ -729,3 +729,58 @@ small {
 .header {
   padding-bottom: 2em !important;
 }
+
+@media screen and (max-width: 1100px) {
+  .progressbar {
+    display: none !important;
+  }
+}
+
+.progressbar {
+  counter-reset: step;
+}
+.progressbar li {
+  list-style-type: none;
+  width: 13%;
+  float: left;
+  font-size: 12px;
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+  color: #7d7d7d;
+}
+.progressbar li:before {
+  width: 32px;
+  height: 32px;
+  content: counter(step);
+  counter-increment: step;
+  line-height: 30px;
+  border: 2px solid #7d7d7d;
+  display: block;
+  text-align: center;
+  margin: 0 auto 10px auto;
+  border-radius: 50%;
+  background-color: white;
+}
+.progressbar li:after {
+  width: 100%;
+  height: 2px;
+  content: '';
+  position: absolute;
+  background-color: #7d7d7d;
+  top: 15px;
+  left: -50%;
+  z-index: -1;
+}
+.progressbar li:first-child:after {
+  content: none;
+}
+.progressbar li.active {
+  color: green;
+}
+.progressbar li.active:before {
+  border-color: #55b776;
+}
+.progressbar li.active + li:after {
+  background-color: #55b776;
+}

copanier/templates/delivery/show_delivery.html

@@ -4,6 +4,8 @@
 
 <div class="header">
     <h1>{{ delivery.name }}</h1>
+    {% include "includes/delivery_progress.html" %}
+    
     <h4>{% if delivery.products %}
         {% include "includes/delivery_status.html" %}
         {% endif %}