Init (#1)

frontend/src/components/StackListItem.vue

@@ -0,0 +1,154 @@
+<template>
+    <router-link :to="`/compose/${stack.name}`" :class="{ 'dim' : !stack.isManagedByDockge }" class="item">
+        <Uptime :stack="stack" :fixed-width="true" class="me-2" />
+        <span class="title">{{ stackName }}</span>
+    </router-link>
+</template>
+
+<script>
+
+import Uptime from "./Uptime.vue";
+
+export default {
+    components: {
+        Uptime
+    },
+    props: {
+        /** Stack this represents */
+        stack: {
+            type: Object,
+            default: null,
+        },
+        /** If the user is in select mode */
+        isSelectMode: {
+            type: Boolean,
+            default: false,
+        },
+        /** How many ancestors are above this stack */
+        depth: {
+            type: Number,
+            default: 0,
+        },
+        /** Callback to determine if stack is selected */
+        isSelected: {
+            type: Function,
+            default: () => {}
+        },
+        /** Callback fired when stack is selected */
+        select: {
+            type: Function,
+            default: () => {}
+        },
+        /** Callback fired when stack is deselected */
+        deselect: {
+            type: Function,
+            default: () => {}
+        },
+    },
+    data() {
+        return {
+            isCollapsed: true,
+        };
+    },
+    computed: {
+        depthMargin() {
+            return {
+                marginLeft: `${31 * this.depth}px`,
+            };
+        },
+        stackName() {
+            return this.stack.name;
+        }
+    },
+    watch: {
+        isSelectMode() {
+            // TODO: Resize the heartbeat bar, but too slow
+            // this.$refs.heartbeatBar.resize();
+        }
+    },
+    beforeMount() {
+
+    },
+    methods: {
+        /**
+         * Changes the collapsed value of the current stack and saves
+         * it to local storage
+         * @returns {void}
+         */
+        changeCollapsed() {
+            this.isCollapsed = !this.isCollapsed;
+
+            // Save collapsed value into local storage
+            let storage = window.localStorage.getItem("stackCollapsed");
+            let storageObject = {};
+            if (storage !== null) {
+                storageObject = JSON.parse(storage);
+            }
+            storageObject[`stack_${this.stack.id}`] = this.isCollapsed;
+
+            window.localStorage.setItem("stackCollapsed", JSON.stringify(storageObject));
+        },
+
+        /**
+         * Toggle selection of stack
+         * @returns {void}
+         */
+        toggleSelection() {
+            if (this.isSelected(this.stack.id)) {
+                this.deselect(this.stack.id);
+            } else {
+                this.select(this.stack.id);
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/vars.scss";
+
+.small-padding {
+    padding-left: 5px !important;
+    padding-right: 5px !important;
+}
+
+.collapse-padding {
+    padding-left: 8px !important;
+    padding-right: 2px !important;
+}
+
+// .stack-item {
+//     width: 100%;
+// }
+
+.tags {
+    margin-top: 4px;
+    padding-left: 67px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+}
+
+.collapsed {
+    transform: rotate(-90deg);
+}
+
+.animated {
+    transition: all 0.2s $easing-in;
+}
+
+.select-input-wrapper {
+    float: left;
+    margin-top: 15px;
+    margin-left: 3px;
+    margin-right: 10px;
+    padding-left: 4px;
+    position: relative;
+    z-index: 15;
+}
+
+.dim {
+    opacity: 0.5;
+}
+
+</style>