Feat: Add placeholders for badge generator

Chore: Save as dev dep.
This commit is contained in:
Nelson Chan 2023-06-29 06:50:55 +08:00
parent eaee55fc8f
commit 0e725569e5
5 changed files with 61 additions and 19 deletions

View File

@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import visualizer from "rollup-plugin-visualizer"; import visualizer from "rollup-plugin-visualizer";
import viteCompression from "vite-plugin-compression"; import viteCompression from "vite-plugin-compression";
import commonjs from "vite-plugin-commonjs";
const postCssScss = require("postcss-scss"); const postCssScss = require("postcss-scss");
const postcssRTLCSS = require("postcss-rtlcss"); const postcssRTLCSS = require("postcss-rtlcss");
@ -18,6 +19,7 @@ export default defineConfig({
"FRONTEND_VERSION": JSON.stringify(process.env.npm_package_version), "FRONTEND_VERSION": JSON.stringify(process.env.npm_package_version),
}, },
plugins: [ plugins: [
commonjs(),
vue(), vue(),
legacy({ legacy({
targets: [ "since 2015" ], targets: [ "since 2015" ],
@ -42,6 +44,9 @@ export default defineConfig({
} }
}, },
build: { build: {
commonjsOptions: {
include: [ /.js$/ ],
},
rollupOptions: { rollupOptions: {
output: { output: {
manualChunks(id, { getModuleInfo, getModuleIds }) { manualChunks(id, { getModuleInfo, getModuleIds }) {

29
package-lock.json generated
View File

@ -114,6 +114,7 @@
"typescript": "~4.4.4", "typescript": "~4.4.4",
"v-pagination-3": "~0.1.7", "v-pagination-3": "~0.1.7",
"vite": "~3.2.7", "vite": "~3.2.7",
"vite-plugin-commonjs": "^0.8.0",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vue": "~3.2.47", "vue": "~3.2.47",
"vue-chartjs": "~5.2.0", "vue-chartjs": "~5.2.0",
@ -8528,6 +8529,12 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/es-module-lexer": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz",
"integrity": "sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA==",
"dev": true
},
"node_modules/es-set-tostringtag": { "node_modules/es-set-tostringtag": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz", "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
@ -18687,6 +18694,17 @@
} }
} }
}, },
"node_modules/vite-plugin-commonjs": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/vite-plugin-commonjs/-/vite-plugin-commonjs-0.8.0.tgz",
"integrity": "sha512-55v9Gjp2MpZ0vaDLNRbztI9hiTXaw/aQ8QnqNhGz4lwH0nnYHGeEOjzRS3kTrRljB8m6GQUrgi59UWu6N9KjVQ==",
"dev": true,
"dependencies": {
"acorn": "^8.8.2",
"fast-glob": "^3.2.12",
"vite-plugin-dynamic-import": "^1.4.0"
}
},
"node_modules/vite-plugin-compression": { "node_modules/vite-plugin-compression": {
"version": "0.5.1", "version": "0.5.1",
"resolved": "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz", "resolved": "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz",
@ -18785,6 +18803,17 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/vite-plugin-dynamic-import": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.4.1.tgz",
"integrity": "sha512-DdAVMCXFK5/IyHLs/l3vciTVCQa5u+C+6mhLOtx82l7MDAPcBAsk36aPd1SLgqm1bCkc7kAC4S5Nqi0dyrlMnQ==",
"dev": true,
"dependencies": {
"acorn": "^8.8.2",
"es-module-lexer": "^1.2.1",
"fast-glob": "^3.2.12"
}
},
"node_modules/vue": { "node_modules/vue": {
"version": "3.2.47", "version": "3.2.47",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",

View File

@ -173,6 +173,7 @@
"typescript": "~4.4.4", "typescript": "~4.4.4",
"v-pagination-3": "~0.1.7", "v-pagination-3": "~0.1.7",
"vite": "~3.2.7", "vite": "~3.2.7",
"vite-plugin-commonjs": "^0.8.0",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vue": "~3.2.47", "vue": "~3.2.47",
"vue-chartjs": "~5.2.0", "vue-chartjs": "~5.2.0",

View File

@ -1,4 +1,5 @@
const args = require("args-parser")(process.argv); // Interop with browser
const args = (typeof process !== "undefined") ? require("args-parser")(process.argv) : {};
const demoMode = args["demo"] || false; const demoMode = args["demo"] || false;
const badgeConstants = { const badgeConstants = {

View File

@ -22,78 +22,78 @@
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('duration') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('duration') " class="mb-3">
<label for="duration" class="form-label">{{ $t("Badge Duration") }}</label> <label for="duration" class="form-label">{{ $t("Badge Duration") }} (h)</label>
<input id="duration" v-model="badge.duration" type="number" min="0" class="form-control" required> <input id="duration" v-model="badge.duration" type="number" min="0" placeholder="24" class="form-control">
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('label') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('label') " class="mb-3">
<label for="label" class="form-label">{{ $t("Badge Label") }}</label> <label for="label" class="form-label">{{ $t("Badge Label") }}</label>
<input id="label" v-model="badge.label" type="text" class="form-control" required> <input id="label" v-model="badge.label" type="text" class="form-control">
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('prefix') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('prefix') " class="mb-3">
<label for="prefix" class="form-label">{{ $t("Badge Prefix") }}</label> <label for="prefix" class="form-label">{{ $t("Badge Prefix") }}</label>
<input id="prefix" v-model="badge.prefix" type="text" class="form-control" required> <input id="prefix" v-model="badge.prefix" type="text" class="form-control">
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('suffix') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('suffix') " class="mb-3">
<label for="suffix" class="form-label">{{ $t("Badge Suffix") }}</label> <label for="suffix" class="form-label">{{ $t("Badge Suffix") }}</label>
<input id="suffix" v-model="badge.suffix" type="text" class="form-control" required> <input id="suffix" v-model="badge.suffix" type="text" placeholder="%" class="form-control">
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelColor') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelColor') " class="mb-3">
<label for="labelColor" class="form-label">{{ $t("Badge Label Color") }}</label> <label for="labelColor" class="form-label">{{ $t("Badge Label Color") }}</label>
<input id="labelColor" v-model="badge.labelColor" type="text" class="form-control" required> <input id="labelColor" v-model="badge.labelColor" type="text" placeholder="#555" class="form-control">
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('color') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('color') " class="mb-3">
<label for="color" class="form-label">{{ $t("Badge Color") }}</label> <label for="color" class="form-label">{{ $t("Badge Color") }}</label>
<input id="color" v-model="badge.color" type="text" class="form-control" required> <input id="color" v-model="badge.color" type="text" :placeholder="badgeConstants.defaultUpColor" class="form-control">
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelPrefix') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelPrefix') " class="mb-3">
<label for="labelPrefix" class="form-label">{{ $t("Badge Label Prefix") }}</label> <label for="labelPrefix" class="form-label">{{ $t("Badge Label Prefix") }}</label>
<input id="labelPrefix" v-model="badge.labelPrefix" type="text" class="form-control" required> <input id="labelPrefix" v-model="badge.labelPrefix" type="text" class="form-control">
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelSuffix') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelSuffix') " class="mb-3">
<label for="labelSuffix" class="form-label">{{ $t("Badge Label Suffix") }}</label> <label for="labelSuffix" class="form-label">{{ $t("Badge Label Suffix") }}</label>
<input id="labelSuffix" v-model="badge.labelSuffix" type="text" class="form-control" required> <input id="labelSuffix" v-model="badge.labelSuffix" type="text" placeholder="h" class="form-control">
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('upColor') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('upColor') " class="mb-3">
<label for="upColor" class="form-label">{{ $t("Badge Up Color") }}</label> <label for="upColor" class="form-label">{{ $t("Badge Up Color") }}</label>
<input id="upColor" v-model="badge.upColor" type="text" class="form-control" required> <input id="upColor" v-model="badge.upColor" type="text" class="form-control" :placeholder="badgeConstants.defaultUpColor">
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downColor') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downColor') " class="mb-3">
<label for="downColor" class="form-label">{{ $t("Badge Down Color") }}</label> <label for="downColor" class="form-label">{{ $t("Badge Down Color") }}</label>
<input id="downColor" v-model="badge.downColor" type="text" class="form-control" required> <input id="downColor" v-model="badge.downColor" type="text" class="form-control" :placeholder="badgeConstants.defaultDownColor">
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('pendingColor') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('pendingColor') " class="mb-3">
<label for="pendingColor" class="form-label">{{ $t("Badge Pending Color") }}</label> <label for="pendingColor" class="form-label">{{ $t("Badge Pending Color") }}</label>
<input id="pendingColor" v-model="badge.pendingColor" type="text" class="form-control" required> <input id="pendingColor" v-model="badge.pendingColor" type="text" class="form-control" :placeholder="badgeConstants.defaultPendingColor">
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('maintenanceColor') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('maintenanceColor') " class="mb-3">
<label for="maintenanceColor" class="form-label">{{ $t("Badge Maintenance Color") }}</label> <label for="maintenanceColor" class="form-label">{{ $t("Badge Maintenance Color") }}</label>
<input id="maintenanceColor" v-model="badge.maintenanceColor" type="text" class="form-control" required> <input id="maintenanceColor" v-model="badge.maintenanceColor" type="text" class="form-control" :placeholder="badgeConstants.defaultMaintenanceColor">
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnColor') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnColor') " class="mb-3">
<label for="warnColor" class="form-label">{{ $t("Badge Warn Color") }}</label> <label for="warnColor" class="form-label">{{ $t("Badge Warn Color") }}</label>
<input id="warnColor" v-model="badge.warnColor" type="number" min="0" class="form-control" required> <input id="warnColor" v-model="badge.warnColor" type="text" class="form-control" :placeholder="badgeConstants.defaultMaintenanceColor">
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnDays') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnDays') " class="mb-3">
<label for="warnDays" class="form-label">{{ $t("Badge Warn Days") }}</label> <label for="warnDays" class="form-label">{{ $t("Badge Warn Days") }}</label>
<input id="warnDays" v-model="badge.warnDays" type="number" min="0" class="form-control" required> <input id="warnDays" v-model="badge.warnDays" type="number" min="0" class="form-control" :placeholder="badgeConstants.defaultCertExpireWarnDays">
</div> </div>
<div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downDays') " class="mb-3"> <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downDays') " class="mb-3">
<label for="downDays" class="form-label">{{ $t("Badge Down Days") }}</label> <label for="downDays" class="form-label">{{ $t("Badge Down Days") }}</label>
<input id="downDays" v-model="badge.downDays" type="number" min="0" class="form-control" required> <input id="downDays" v-model="badge.downDays" type="number" min="0" class="form-control" :placeholder="badgeConstants.defaultCertExpireDownDays">
</div> </div>
<div class="mb-3"> <div class="mb-3">
@ -109,7 +109,11 @@
<div class="mb-3"> <div class="mb-3">
<label for="value" class="form-label">{{ $t("Badge value (For Testing only.)") }}</label> <label for="value" class="form-label">{{ $t("Badge value (For Testing only.)") }}</label>
<input id="value" v-model="badge.value" type="text" class="form-control" required> <input id="value" v-model="badge.value" type="text" class="form-control">
</div>
<div class="mb-3 pt-3 d-flex justify-content-center">
<img :src="badgeURL" alt="Badge Preview">
</div> </div>
<div class="my-3"> <div class="my-3">
@ -131,6 +135,7 @@
<script lang="ts"> <script lang="ts">
import { Modal } from "bootstrap"; import { Modal } from "bootstrap";
import CopyableInput from "./CopyableInput.vue"; import CopyableInput from "./CopyableInput.vue";
import { default as serverConfig } from "../../server/config.js";
export default { export default {
components: { components: {
@ -224,7 +229,8 @@ export default {
"color", "color",
"labelColor", "labelColor",
], ],
} },
badgeConstants: serverConfig.badgeConstants,
}; };
}, },