timeline icon colors for ticket

\according to state

web/src/components/Timeline.vue

@@ -8,8 +8,8 @@
             <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'comment'">
                 <font-awesome-icon icon="comment"/>
             </span>
-            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'state'">
-                <font-awesome-icon icon="check"/>
+            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'state'" :class="'bg-' + colorLookup(item.state)">
+                <font-awesome-icon :icon="iconLookup(item.state)"/>
             </span>
             <span class="timeline-item-icon faded-icon" v-else>
                 <font-awesome-icon icon="pen"/>
@@ -58,8 +58,30 @@ export default {
         sendMail() {
             this.$emit('sendMail', this.newMail);
             this.newMail = "";
+        },
+        iconLookup: function (state) {
+            if (state.startsWith('closed_')) {
+                return 'check';
+            } else if (state.startsWith('pending_')) {
+                return 'exclamation';
+            } else if (state.startsWith('waiting_')) {
+                return 'hourglass';
+            } else {
+                return 'exclamation';
             }
+        },
+        colorLookup: function (state) {
+            if (state.startsWith('closed_')) {
+                return 'secondary';
+            } else if (state.startsWith('pending_')) {
+                return 'warning';
+            } else if (state.startsWith('waiting_')) {
+                return 'primary';
+            } else {
+                return 'danger';
             }
+        },
+    },
 };
 </script>
 

web/src/main.js

@@ -36,7 +36,7 @@ import {
     faUser,
     faComments,
     faArchive,
-    faMinus,
+    faMinus, faHourglass, faExclamation,
 } from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 
@@ -44,7 +44,7 @@ import vueDebounce from 'vue-debounce';
 
 library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList,
     faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave, faEye, faComment, faUser, faComments, faEnvelope,
-    faArchive, faMinus);
+    faArchive, faMinus, faExclamation, faHourglass);
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 sync(store, router);