fix: address code review feedback

Use HiddenInput for webhook URL, replace button with ToggleSection, inline webhook variable, and move script to constant to avoid duplication
This commit is contained in:
Dharun Ashokkumar 2026-01-20 21:17:58 +05:30
parent 44923b0141
commit bcaf554896
2 changed files with 41 additions and 65 deletions

View File

@ -32,8 +32,6 @@ class GoogleSheets extends NotificationProvider {
}
// Send data to Google Apps Script webhook
const webhookUrl = notification.googleSheetsWebhookUrl;
const config = this.getAxiosConfigWithProxy({
headers: {
"Content-Type": "application/json"
@ -50,7 +48,7 @@ class GoogleSheets extends NotificationProvider {
statusCode
};
await axios.post(webhookUrl, data, config);
await axios.post(notification.googleSheetsWebhookUrl, data, config);
return okMsg;
} catch (error) {

View File

@ -1,13 +1,12 @@
<template>
<div class="mb-3">
<label for="google-sheets-webhook-url" class="form-label">{{ $t("Google Apps Script Webhook URL") }}</label>
<input
<HiddenInput
id="google-sheets-webhook-url"
v-model="$parent.notification.googleSheetsWebhookUrl"
type="text"
class="form-control"
required
:required="true"
placeholder="https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec"
autocomplete="off"
/>
<div class="form-text">
<p>{{ $t("Deploy a Google Apps Script as a web app and paste the URL here") }}</p>
@ -26,66 +25,32 @@
</ol>
</div>
<div class="mb-3">
<button
type="button"
class="btn btn-secondary btn-sm"
@click="showScript = !showScript"
>
{{ showScript ? $t("Hide Script Code") : $t("Show Script Code") }}
</button>
</div>
<div v-if="showScript" class="mb-3">
<label class="form-label">{{ $t("Google Apps Script Code") }}:</label>
<textarea
readonly
class="form-control"
rows="15"
style="font-family: monospace; font-size: 12px;"
>function doPost(e) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = JSON.parse(e.postData.contents);
// Add header row if sheet is empty
if (sheet.getLastRow() === 0) {
sheet.appendRow(['Timestamp', 'Status', 'Monitor Name', 'URL', 'Message', 'Response Time', 'Status Code']);
}
// Add data row
sheet.appendRow([
data.timestamp,
data.status,
data.monitorName,
data.monitorUrl,
data.message,
data.responseTime,
data.statusCode
]);
return ContentService.createTextOutput(JSON.stringify({result: 'success'}))
.setMimeType(ContentService.MimeType.JSON);
}</textarea>
<button
type="button"
class="btn btn-outline-secondary btn-sm mt-2"
@click="copyScript"
>
{{ $t("Copy to Clipboard") }}
</button>
</div>
<ToggleSection :heading="$t('Google Apps Script Code')">
<div class="mb-3">
<textarea
readonly
class="form-control"
rows="15"
style="font-family: monospace; font-size: 12px;"
:value="scriptCode"
/>
<button
type="button"
class="btn btn-outline-secondary btn-sm mt-2"
@click="copyScript"
>
{{ $t("Copy to Clipboard") }}
</button>
</div>
</ToggleSection>
</template>
<script>
export default {
data() {
return {
showScript: false
};
},
methods: {
copyScript() {
const scriptCode = `function doPost(e) {
import HiddenInput from "../HiddenInput.vue";
import ToggleSection from "../ToggleSection.vue";
// Google Apps Script code for logging to spreadsheet
const GOOGLE_APPS_SCRIPT_CODE = `function doPost(e) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = JSON.parse(e.postData.contents);
@ -108,8 +73,21 @@ export default {
return ContentService.createTextOutput(JSON.stringify({result: 'success'}))
.setMimeType(ContentService.MimeType.JSON);
}`;
export default {
components: {
HiddenInput,
ToggleSection,
},
computed: {
scriptCode() {
return GOOGLE_APPS_SCRIPT_CODE;
}
},
methods: {
copyScript() {
try {
navigator.clipboard.writeText(scriptCode);
navigator.clipboard.writeText(GOOGLE_APPS_SCRIPT_CODE);
alert(this.$t("Copied to clipboard!"));
} catch (error) {
alert(this.$t("Failed to copy to clipboard"));