Repository: louislam/uptime-kuma
File: src/pages/EditMonitor.vue (Vue)

Code before:

                    <div class="mb-3" v-if="monitor.type === 'keyword' ">
                        <label for="keyword" class="form-label">Keyword</label>
                        <input type="text" class="form-control" id="keyword" v-model="monitor.keyword" required>
                        <div class="form-text">Search keyword in plain html or JSON response and it is case-sensitive</div>
                    </div>

                    <div class="mb-3" v-if="monitor.type === 'port' || monitor.type === 'ping' ">
                        <label for="hostname" class="form-label">Hostname</label>
                        <input type="text" class="form-control" id="hostname" v-model="monitor.hostname" required>
                    </div>

                    <div class="mb-3" v-if="monitor.type === 'port' ">
                        <label for="port" class="form-label">Port</label>
                        <input type="number" class="form-control" id="port" v-model="monitor.port" required min="0" max="65535" step="1">
                    </div>

                    <div class="mb-3">
                        <label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label>
                        <input type="number" class="form-control" id="interval" v-model="monitor.interval" required min="20" step="1">
                    </div>

                      <div class="mb-3">
                        <label for="interval" class="form-label">Retry Pings</label>
                        <input type="number" class="form-control" id="interval" v-model="monitor.maxretries" required min="0" step="1">
                    </div>

                    <div>
                        <button class="btn btn-primary" type="submit" :disabled="processing">Save</button>
                    </div>

            </div>

            <div class="col-md-6">

                <div class="mt-3" v-if="$root.isMobile"></div>

                <h2>Notifications</h2>
                <p v-if="$root.notificationList.length === 0">Not available, please setup.</p>

                <div class="form-check form-switch mb-3" :key="notification.id" v-for="notification in $root.notificationList">
                    <input class="form-check-input" type="checkbox" :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]">

                    <label class="form-check-label" :for=" 'notification' + notification.id">
                        {{ notification.name }}
                        <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
                    </label>
                </div>

                <button class="btn btn-primary me-2" @click="$refs.notificationDialog.show()" type="button">Setup Notification</button>
            </div>

Review comment (suggestion):
Fix for indentation
```suggestion
                    <div class="mb-3">
                        <label for="interval" class="form-label">Retry Pings</label>
                        <input type="number" class="form-control" id="interval" v-model="monitor.maxretries" required min="0" step="1">
                    </div>
```

Code after:

                    <div class="mb-3" v-if="monitor.type === 'keyword' ">
                        <label for="keyword" class="form-label">Keyword</label>
                        <input type="text" class="form-control" id="keyword" v-model="monitor.keyword" required>
                        <div class="form-text">Search keyword in plain html or JSON response and it is case-sensitive</div>
                    </div>

                    <div class="mb-3" v-if="monitor.type === 'port' || monitor.type === 'ping' ">
                        <label for="hostname" class="form-label">Hostname</label>
                        <input type="text" class="form-control" id="hostname" v-model="monitor.hostname" required>
                    </div>

                    <div class="mb-3" v-if="monitor.type === 'port' ">
                        <label for="port" class="form-label">Port</label>
                        <input type="number" class="form-control" id="port" v-model="monitor.port" required min="0" max="65535" step="1">
                    </div>

                    <div class="mb-3">
                        <label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label>
                        <input type="number" class="form-control" id="interval" v-model="monitor.interval" required min="20" step="1">
                    </div>

                    <div class="mb-3">
                        <label for="maxRetries" class="form-label">Retries</label>
                        <input type="number" class="form-control" id="maxRetries" v-model="monitor.maxretries" required min="0" step="1">
                        <div class="form-text">Maximum retries before the service is marked as down and a notification is sent</div>
                    </div>

                    <div>
                        <button class="btn btn-primary" type="submit" :disabled="processing">Save</button>
                    </div>

            </div>

            <div class="col-md-6">

                <div class="mt-3" v-if="$root.isMobile"></div>

                <h2>Notifications</h2>
                <p v-if="$root.notificationList.length === 0">Not available, please setup.</p>

                <div class="form-check form-switch mb-3" :key="notification.id" v-for="notification in $root.notificationList">
                    <input class="form-check-input" type="checkbox" :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]">

                    <label class="form-check-label" :for=" 'notification' + notification.id">
                        {{ notification.name }}
                        <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
                    </label>
                </div>

                <button class="btn btn-primary me-2" @click="$refs.notificationDialog.show()" type="button">Setup Notification</button>