155 lines
3.3 KiB
Vue
155 lines
3.3 KiB
Vue
<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>
|