Repository: louislam/uptime-kuma
File: src/components/BadgeGeneratorDialog.vue (Vue)

Code before:
<template>
    <div ref="BadgeGeneratorModal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        {{ $t("Badge Generator", [monitor.name]) }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="type" class="form-label">{{ $t("Badge Type") }}</label>
                        <select id="type" v-model="badge.type" class="form-select">
                            <option value="status">status</option>
                            <option value="uptime">uptime</option>
                            <option value="ping">ping</option>
                            <option value="avg-response">avg-response</option>
                            <option value="cert-exp">cert-exp</option>
                            <option value="response">response</option>
                        </select>
                    </div>

                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('duration') " class="mb-3">
                        <label for="duration" class="form-label">{{ $t("Badge Duration") }} (h)</label>
                        <input id="duration" v-model="badge.duration" type="number" min="0" placeholder="24" class="form-control">
                    </div>

                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('label') " class="mb-3">
                        <label for="label" class="form-label">{{ $t("Badge Label") }}</label>
                        <input id="label" v-model="badge.label" type="text" class="form-control">
                    </div>

                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('prefix') " class="mb-3">
                        <label for="prefix" class="form-label">{{ $t("Badge Prefix") }}</label>
                        <input id="prefix" v-model="badge.prefix" type="text" class="form-control">
                    </div>

                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('suffix') " class="mb-3">
                        <label for="suffix" class="form-label">{{ $t("Badge Suffix") }}</label>
                        <input id="suffix" v-model="badge.suffix" type="text" placeholder="%" class="form-control">
                    </div>

                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelColor') " class="mb-3">
                        <label for="labelColor" class="form-label">{{ $t("Badge Label Color") }}</label>
                        <input id="labelColor" v-model="badge.labelColor" type="text" placeholder="#555" class="form-control">
                    </div>

                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('color') " class="mb-3">
                        <label for="color" class="form-label">{{ $t("Badge Color") }}</label>

Review comment (suggestion):
```suggestion
                        <label for="duration" class="form-label">{{ $t("Badge Duration (in hours)") }}</label>
```
I think like (plus adding to the required translation file) this translation would be simpler than a hardcoded `(h)`
Alternative would be the notation `Badge Duration [hours]`

Code after:
<template>
    <div ref="BadgeGeneratorModal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        {{ $t("Badge Generator", [monitor.name]) }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="type" class="form-label">{{ $t("Badge Type") }}</label>
                        <select id="type" v-model="badge.type" class="form-select">
                            <option value="status">status</option>
                            <option value="uptime">uptime</option>
                            <option value="ping">ping</option>
                            <option value="avg-response">avg-response</option>
                            <option value="cert-exp">cert-exp</option>
                            <option value="response">response</option>
                        </select>
                    </div>

                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('duration') " class="mb-3">
                        <label for="duration" class="form-label">{{ $t("Badge Duration (in hours)") }}</label>
                        <input id="duration" v-model="badge.duration" type="number" min="0" placeholder="24" class="form-control">
                    </div>

                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('label') " class="mb-3">
                        <label for="label" class="form-label">{{ $t("Badge Label") }}</label>
                        <input id="label" v-model="badge.label" type="text" class="form-control">
                    </div>

                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('prefix') " class="mb-3">
                        <label for="prefix" class="form-label">{{ $t("Badge Prefix") }}</label>
                        <input id="prefix" v-model="badge.prefix" type="text" class="form-control">
                    </div>

                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('suffix') " class="mb-3">
                        <label for="suffix" class="form-label">{{ $t("Badge Suffix") }}</label>
                        <input id="suffix" v-model="badge.suffix" type="text" placeholder="%" class="form-control">
                    </div>

                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelColor') " class="mb-3">
                        <label for="labelColor" class="form-label">{{ $t("Badge Label Color") }}</label>
                        <input id="labelColor" v-model="badge.labelColor" type="text" placeholder="#555" class="form-control">
                    </div>

                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('color') " class="mb-3">
                        <label for="color" class="form-label">{{ $t("Badge Color") }}</label>