💄 Change status to icon
This commit is contained in:
parent
3da7773075
commit
cd6d0e7add
|
@ -82,6 +82,21 @@ export function statusNameShort(status : number) : string {
|
|||
}
|
||||
}
|
||||
|
||||
export function statusNameIcon(status : number) : string {
|
||||
switch (status) {
|
||||
case CREATED_FILE:
|
||||
return "gear";
|
||||
case CREATED_STACK:
|
||||
return "gear";
|
||||
case RUNNING:
|
||||
return "play";
|
||||
case EXITED:
|
||||
return "stop";
|
||||
default:
|
||||
return "question";
|
||||
}
|
||||
}
|
||||
|
||||
export function statusColor(status : number) : string {
|
||||
switch (status) {
|
||||
case CREATED_FILE:
|
||||
|
@ -89,7 +104,7 @@ export function statusColor(status : number) : string {
|
|||
case CREATED_STACK:
|
||||
return "dark";
|
||||
case RUNNING:
|
||||
return "primary";
|
||||
return "success";
|
||||
case EXITED:
|
||||
return "danger";
|
||||
default:
|
||||
|
|
|
@ -1,11 +1,13 @@
|
|||
<template>
|
||||
<span :class="className">{{ statusName }}</span>
|
||||
<span :class="className"><font-awesome-icon :icon="statusName" /></span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { statusColor, statusNameShort } from "../../../common/util-common";
|
||||
import { statusColor, statusNameIcon } from "../../../common/util-common";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
|
||||
export default {
|
||||
components: { FontAwesomeIcon },
|
||||
props: {
|
||||
stack: {
|
||||
type: Object,
|
||||
|
@ -27,7 +29,7 @@ export default {
|
|||
},
|
||||
|
||||
statusName() {
|
||||
return this.$t(statusNameShort(this.stack?.status));
|
||||
return statusNameIcon(this.stack?.status);
|
||||
},
|
||||
|
||||
className() {
|
||||
|
@ -44,12 +46,12 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.badge {
|
||||
min-width: 62px;
|
||||
min-width: 32px;
|
||||
|
||||
}
|
||||
|
||||
.fixed-width {
|
||||
width: 62px;
|
||||
width: 32px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
|
@ -53,7 +53,7 @@ import {
|
|||
faCertificate,
|
||||
faTerminal, faWarehouse, faHome, faRocket,
|
||||
faRotate,
|
||||
faCloudArrowDown, faArrowsRotate,
|
||||
faCloudArrowDown, faArrowsRotate, faQuestion,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
library.add(
|
||||
|
@ -109,6 +109,7 @@ library.add(
|
|||
faRotate,
|
||||
faCloudArrowDown,
|
||||
faArrowsRotate,
|
||||
faQuestion,
|
||||
);
|
||||
|
||||
export { FontAwesomeIcon };
|
||||
|
|
|
@ -60,10 +60,10 @@
|
|||
"devDependencies": {
|
||||
"@actions/github": "^6.0.0",
|
||||
"@fontsource/jetbrains-mono": "^5.0.18",
|
||||
"@fortawesome/fontawesome-svg-core": "6.4.2",
|
||||
"@fortawesome/free-regular-svg-icons": "6.4.2",
|
||||
"@fortawesome/free-solid-svg-icons": "6.4.2",
|
||||
"@fortawesome/vue-fontawesome": "3.0.3",
|
||||
"@fortawesome/fontawesome-svg-core": "6.5.1",
|
||||
"@fortawesome/free-regular-svg-icons": "6.5.1",
|
||||
"@fortawesome/free-solid-svg-icons": "6.5.1",
|
||||
"@fortawesome/vue-fontawesome": "3.0.6",
|
||||
"@types/bcryptjs": "^2.4.6",
|
||||
"@types/bootstrap": "~5.2.10",
|
||||
"@types/command-exists": "~1.2.3",
|
||||
|
|
|
@ -101,17 +101,17 @@ devDependencies:
|
|||
specifier: ^5.0.18
|
||||
version: 5.0.18
|
||||
'@fortawesome/fontawesome-svg-core':
|
||||
specifier: 6.4.2
|
||||
version: 6.4.2
|
||||
specifier: 6.5.1
|
||||
version: 6.5.1
|
||||
'@fortawesome/free-regular-svg-icons':
|
||||
specifier: 6.4.2
|
||||
version: 6.4.2
|
||||
specifier: 6.5.1
|
||||
version: 6.5.1
|
||||
'@fortawesome/free-solid-svg-icons':
|
||||
specifier: 6.4.2
|
||||
version: 6.4.2
|
||||
specifier: 6.5.1
|
||||
version: 6.5.1
|
||||
'@fortawesome/vue-fontawesome':
|
||||
specifier: 3.0.3
|
||||
version: 3.0.3(@fortawesome/fontawesome-svg-core@6.4.2)(vue@3.3.13)
|
||||
specifier: 3.0.6
|
||||
version: 3.0.6(@fortawesome/fontawesome-svg-core@6.5.1)(vue@3.3.13)
|
||||
'@types/bcryptjs':
|
||||
specifier: ^2.4.6
|
||||
version: 2.4.6
|
||||
|
@ -767,43 +767,43 @@ packages:
|
|||
resolution: {integrity: sha512-0+YDAaAnCdXjirHFO3NfHLUW8xtKCT5rlm23Q0qG3TpZp3QBrZh5r9ikUxh3ufHc2+fVnk4Y6GWNEnVIfB7u/g==}
|
||||
dev: true
|
||||
|
||||
/@fortawesome/fontawesome-common-types@6.4.2:
|
||||
resolution: {integrity: sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==}
|
||||
/@fortawesome/fontawesome-common-types@6.5.1:
|
||||
resolution: {integrity: sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==}
|
||||
engines: {node: '>=6'}
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
|
||||
/@fortawesome/fontawesome-svg-core@6.4.2:
|
||||
resolution: {integrity: sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==}
|
||||
/@fortawesome/fontawesome-svg-core@6.5.1:
|
||||
resolution: {integrity: sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==}
|
||||
engines: {node: '>=6'}
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
'@fortawesome/fontawesome-common-types': 6.4.2
|
||||
'@fortawesome/fontawesome-common-types': 6.5.1
|
||||
dev: true
|
||||
|
||||
/@fortawesome/free-regular-svg-icons@6.4.2:
|
||||
resolution: {integrity: sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==}
|
||||
/@fortawesome/free-regular-svg-icons@6.5.1:
|
||||
resolution: {integrity: sha512-m6ShXn+wvqEU69wSP84coxLbNl7sGVZb+Ca+XZq6k30SzuP3X4TfPqtycgUh9ASwlNh5OfQCd8pDIWxl+O+LlQ==}
|
||||
engines: {node: '>=6'}
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
'@fortawesome/fontawesome-common-types': 6.4.2
|
||||
'@fortawesome/fontawesome-common-types': 6.5.1
|
||||
dev: true
|
||||
|
||||
/@fortawesome/free-solid-svg-icons@6.4.2:
|
||||
resolution: {integrity: sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==}
|
||||
/@fortawesome/free-solid-svg-icons@6.5.1:
|
||||
resolution: {integrity: sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==}
|
||||
engines: {node: '>=6'}
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
'@fortawesome/fontawesome-common-types': 6.4.2
|
||||
'@fortawesome/fontawesome-common-types': 6.5.1
|
||||
dev: true
|
||||
|
||||
/@fortawesome/vue-fontawesome@3.0.3(@fortawesome/fontawesome-svg-core@6.4.2)(vue@3.3.13):
|
||||
resolution: {integrity: sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA==}
|
||||
/@fortawesome/vue-fontawesome@3.0.6(@fortawesome/fontawesome-svg-core@6.5.1)(vue@3.3.13):
|
||||
resolution: {integrity: sha512-akrL7lTroyNpPkoHtvK2UpsMzJr6jXdHaQ0YdcwqDsB8jdwlpNHZYijpOUd9KJsARr+VB3WXY4EyObepqJ4ytQ==}
|
||||
peerDependencies:
|
||||
'@fortawesome/fontawesome-svg-core': ~1 || ~6
|
||||
vue: '>= 3.0.0 < 4'
|
||||
dependencies:
|
||||
'@fortawesome/fontawesome-svg-core': 6.4.2
|
||||
'@fortawesome/fontawesome-svg-core': 6.5.1
|
||||
vue: 3.3.13(typescript@5.2.2)
|
||||
dev: true
|
||||
|
||||
|
@ -903,9 +903,6 @@ packages:
|
|||
/@louislam/sqlite3@15.1.6:
|
||||
resolution: {integrity: sha512-cVf7hcMrfywYnycatLvorngTFpL3BSWvEy7/NrEfcTyQX8xxj9fdeD553oCTv5fIAk85fluo6mzPq89V3YzrVA==}
|
||||
requiresBuild: true
|
||||
peerDependenciesMeta:
|
||||
node-gyp:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@mapbox/node-pre-gyp': 1.0.11
|
||||
node-addon-api: 4.3.0
|
||||
|
|
Loading…
Reference in New Issue