CLASSROOMIO-T-4: Add deadline and show it was late or early

src/components/Course/components/Lesson/Exercise/EditMode.svelte

@@ -35,6 +35,7 @@
     QUESTION_TYPES,
   } from '../../../../Question/constants';
   import { filterOutDeleted } from './functions';
+  import Date from '../../../../Form/Date.svelte';
   // import EditContent from "../../../../EditContent/index.svelte";
   // import readme from "../../readme.js";
 
@@ -100,11 +101,12 @@
     />
     <DateTime
       label="Due by"
-      bind:value={$questionnaire.due_by}
-      placeholder="2021-03-25"
       className="w-50"
-      useTime={true}
-      onChange={() => ($questionnaire.is_due_by_dirty = true)}
+      value={$questionnaire.due_by}
+      onInput={(e) => {
+        $questionnaire.due_by = e.target.value;
+        $questionnaire.is_due_by_dirty = true;
+      }}
     />
     <EditContent
       writeLabel="Description"

src/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte

@@ -116,7 +116,22 @@
       <div
         class="hover:bg-gray-100 border-b border-t-0 border-l-0 border-r-0 border-gray-300 p-3"
       >
-        <p class="font-bold text-lg">Details</p>
+        <p class="font-bold text-lg">
+          Details
+          {#if data.isEarly}
+            <span
+              class="ml-2 text-sm badge rounded-sm px-2 bg-green-500 text-white"
+            >
+              early
+            </span>
+          {:else}
+            <span
+              class="ml-2 badge text-sm rounded-sm px-2 bg-red-500 text-white"
+            >
+              late
+            </span>
+          {/if}
+        </p>
       </div>
 
       <div class="flex items-center text-sm p-3">
@@ -148,3 +163,9 @@
     </div>
   </div>
 </Modal>
+
+<style>
+  .badge {
+    width: fit-content;
+  }
+</style>

src/components/Course/components/Lesson/Exercise/ViewMode.svelte

@@ -1,4 +1,5 @@
 <script>
+  import marked from 'marked';
   import { fly } from 'svelte/transition';
   import { group, course } from '../../../store';
   import { questionnaire } from '../store/exercise';
@@ -198,14 +199,23 @@
       </p>
       |
       <p class="mx-2">All required</p>
+      {#if $questionnaire.due_by}
+        |
+        <p class="mx-2">
+          <strong>Due by:</strong>
+          {new Date($questionnaire.due_by).toLocaleString()}
+        </p>
+      {/if}
     </div>
 
-    <p class="text-lg mt-3">{$questionnaire.description}</p>
+    <article class="preview prose prose-sm sm:prose p-2">
+      {@html marked($questionnaire.description || 'No desription')}
+    </article>
 
     <PrimaryButton
       onClick={handleStart}
       label="Start"
-      className="my-5"
+      className="my-5 float-right"
       type="button"
     />
   </div>