zhengyi
/
project-monika
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Change status to icon

This commit is contained in:
zhengyi59 2024-03-01 06:13:18 -05:00
parent 3da7773075
commit cd6d0e7add
5 changed files with 51 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
common/util-common.ts
View File

@ -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:

12
frontend/src/components/Uptime.vue
View File

@ -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;
}

3
frontend/src/icon.ts
View File

@ -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 };

8
package.json
View File

@ -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",

47
pnpm-lock.yaml
View File

@ -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