Due Date Task improvements (#16)

src/components/lists/ShowList.vue

@@ -41,6 +41,7 @@
 							</div>
 							<span class="tasktext" :class="{ 'done': l.done}">
 								{{l.text}}
+							<i v-if="l.dueDate > 0" :class="{'overdue': (l.dueDate <= new Date())}"> - Due on {{new Date(l.dueDate).toLocaleString()}}</i>
 							</span>
 						</label>
 						<div @click="editTask(l.id)" class="icon settings">
@@ -521,6 +522,9 @@
 				}
 				return array
 			},
+			formatUnixDate(dateUnix) {
+				return (new Date(dateUnix)).toLocaleString()
+			},
             handleError(e) {
                 message.error(e, this)
             },

src/components/lists/ShowTasks.vue

@@ -21,7 +21,7 @@
 					</div>
 					<span class="tasktext">
 							{{l.text}}
-							<i v-if="l.dueDate > 0"> - Due on {{formatUnixDate(l.dueDate)}}</i>
+							<i v-if="l.dueDate > 0" :class="{'overdue': (new Date(l.dueDate * 1000) <= new Date())}"> - Due on {{formatUnixDate(l.dueDate)}}</i>
 						</span>
 				</label>
 			</div>

src/styles/tasks.scss

@@ -49,6 +49,10 @@
           text-decoration: line-through;
           color: $grey;
         }
+
+        .overdue{
+          color: $red;
+        }
       }
     }
 

todo.md

@@ -43,6 +43,8 @@
   * [x] Alles abgehakte ausblenden, mit btn zum wieder einblenden
 * [x] Wenn man den Namen einer Liste updated wird der Name in der List nicht upgedated
 * [x] Links an den Freigewordenen Platz Menüpunkte machen à la "Heute"/Morgen/Diese Woche etc. Da kommt dann alles rein was dann due ist.
+* [x] Wenn ein Task due ist das auch in der Übersicht anzeigen
+  * [x] Overdue rot anzeigen
 * [ ] Beim Team bearbeiten Nutzer suchen einbauen
   
 ## Funktionen aus der API