Beginning of editable timeline

src/components/base/BaseColorText.vue

@@ -7,12 +7,10 @@ export default {
   name: "BaseColorText",
   props: {
     text: {
-      required: true,
-      type: String
+      required: true
     },
     color: {
       required: false,
-      type: String,
       default: "transparent"
     }
   },

src/components/base/BaseSection.vue

@@ -0,0 +1,25 @@
+<template>
+  <section>
+    <BaseTitle v-if="title" center size="large">{{ title }}</BaseTitle>
+    <slot />
+  </section>
+</template>
+
+<script>
+import BaseTitle from "@/components/base/BaseTitle";
+
+export default {
+  name: "BaseSection",
+  components: {
+    BaseTitle
+  },
+  props: {
+    title: {
+      required: false,
+      default: ""
+    }
+  }
+};
+</script>
+
+<style></style>

src/components/juggl/JugglTimelineEditor.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <TimelineProjectPool :projects="projects" />
+  </div>
+</template>
+
+<script>
+import TimelineProjectPool from "@/components/timeline/TimelineProjectPool.vue";
+import store from "@/store";
+
+export default {
+  name: "JugglTimelineEditor",
+  components: {
+    TimelineProjectPool
+  },
+  props: {
+    projects: {
+      required: true
+    }
+  },
+  methods: {
+    submit: function() {
+      store.dispatch("loadTags");
+    }
+  }
+};
+</script>
+
+<style lang="sass" scoped></style>

src/components/timeline/TimelineProjectPool.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="project-pool">
+    <JugglProjectName
+      v-for="project in projects"
+      :key="project.project_id"
+      :project="project"
+      class="unselectable"
+    />
+  </div>
+</template>
+
+<script>
+import JugglProjectName from "@/components/juggl/JugglProjectName";
+
+export default {
+  name: "TimelineProjectPool",
+  components: {
+    JugglProjectName
+  },
+  props: {
+    projects: {
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="sass" scoped>
+@import '@/style/theme.sass'
+
+#project-pool
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: center
+  align-content: flex-start
+  padding: 5px
+
+  > *
+    border: 1px solid $grey
+    font-size: 16pt
+    margin: 5px
+    border-radius: 5px
+
+    &:hover
+      border-color: $primary !important
+      cursor: pointer
+
+.unselectable
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -khtml-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+</style>

src/views/Home.vue

@@ -1,11 +1,9 @@
 <template>
   <LayoutNavbarPrivate>
-    <section v-if="runningRecords.length > 0">
-      <h2 class="center bold">Tracking</h2>
+    <BaseSection v-if="runningRecords.length > 0" title="Tracking">
       <JugglRecordsList :records="runningRecords" running />
-    </section>
-    <section>
-      <h2 class="center bold">Projects</h2>
+    </BaseSection>
+    <BaseSection title="Projects">
       <div v-if="finishedProjects.length > 0">
         <JugglProjectsPanel :projects="finishedProjects" />
       </div>
@@ -15,33 +13,39 @@
           Manage projects
         </b-link>
       </div>
-    </section>
-    <section v-if="finishedRecords.length > 0">
-      <h2 class="center bold">History</h2>
+    </BaseSection>
+    <BaseSection title="Timeline">
+      <JugglTimelineEditor :projects="allProjects" />
+    </BaseSection>
+    <BaseSection v-if="finishedRecords.length > 0" title="History">
       <JugglRecordsList :records="finishedRecords" />
       <div class="center">
         <b-button to="/history" variant="outline-secondary" center
           >Show all</b-button
         >
       </div>
-    </section>
+    </BaseSection>
   </LayoutNavbarPrivate>
 </template>
 
 <script>
 import LayoutNavbarPrivate from "@/components/layout/LayoutNavbarPrivate";
+import JugglTimelineEditor from "@/components/juggl/JugglTimelineEditor";
 import JugglProjectsPanel from "@/components/juggl/JugglProjectsPanel";
 import JugglRecordsList from "@/components/juggl/JugglRecordsList";
 import FormProjectAdd from "@/components/forms/FormProjectAdd";
+import BaseSection from "@/components/base/BaseSection";
 import store from "@/store";
 
 export default {
   name: "Home",
   components: {
     LayoutNavbarPrivate,
+    JugglTimelineEditor,
     JugglProjectsPanel,
     JugglRecordsList,
-    FormProjectAdd
+    FormProjectAdd,
+    BaseSection
   },
   computed: {
     finishedProjects: () => {
@@ -52,6 +56,9 @@ export default {
     },
     runningRecords: () => {
       return store.getters.runningRecords;
+    },
+    allProjects: () => {
+      return store.getters.projects;
     }
   },
   created: () => {
@@ -70,9 +77,6 @@ export default {
 .bold
   font-weight: bold
 
-section
-  margin-bottom: 4rem
-
 #add-project-form
   margin-top: 1rem
   text-align: center

src/views/Manage.vue

@@ -1,7 +1,6 @@
 <template>
   <LayoutNavbarPrivate title="Manage structures">
-    <section id="projects">
-      <h1>Projects</h1>
+    <BaseSection id="projects" title="Projects">
       <FormProjectAdd class="bottom-space" />
       <b-table
         :items="allProjects"
@@ -45,9 +44,8 @@
           </b-card>
         </template>
       </b-table>
-    </section>
-    <section id="tags">
-      <h1>Tags</h1>
+    </BaseSection>
+    <BaseSection id="tags" title="Tags">
       <FormTagAdd class="bottom-space" />
       <b-table
         :items="allTags"
@@ -83,7 +81,7 @@
           </b-card>
         </template>
       </b-table>
-    </section>
+    </BaseSection>
   </LayoutNavbarPrivate>
 </template>
 
@@ -94,6 +92,7 @@ import JugglProjectName from "@/components/juggl/JugglProjectName";
 import FormProjectAdd from "@/components/forms/FormProjectAdd";
 import FormTagDetails from "@/components/forms/FormTagDetails";
 import { helperService } from "@/services/helper.service.js";
+import BaseSection from "@/components/base/BaseSection";
 import FormTagAdd from "@/components/forms/FormTagAdd";
 import store from "@/store";
 
@@ -105,6 +104,7 @@ export default {
     JugglProjectName,
     FormProjectAdd,
     FormTagDetails,
+    BaseSection,
     FormTagAdd
   },
   data: () => {