forked from trent_larson/crowd-funder-for-time-pwa
fix: update Vue template syntax and improve Vite config
- Fix Vue template syntax in App.vue by using proper event handler format - Update Vite config to properly handle ESM imports and crypto modules - Add manual chunks for better code splitting - Improve environment variable handling in vite-env.d.ts - Fix TypeScript linting errors in App.vue
This commit is contained in:
Matthew Raymer
266
src/App.vue
266
src/App.vue
@@ -29,7 +29,9 @@
|
||||
>
|
||||
<div class="w-full px-4 py-3">
|
||||
<span class="font-semibold">{{ notification.title }}</span>
|
||||
<p class="text-sm">{{ notification.text }}</p>
|
||||
<p class="text-sm">
|
||||
{{ notification.text }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -40,21 +42,20 @@
|
||||
<div
|
||||
class="flex items-center justify-center w-12 bg-slate-600 text-slate-100"
|
||||
>
|
||||
<font-awesome
|
||||
icon="circle-info"
|
||||
class="fa-fw fa-xl"
|
||||
></font-awesome>
|
||||
<font-awesome icon="circle-info" class="fa-fw fa-xl" />
|
||||
</div>
|
||||
|
||||
<div class="relative w-full pl-4 pr-8 py-2 text-slate-900">
|
||||
<span class="font-semibold">{{ notification.title }}</span>
|
||||
<p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
|
||||
<p class="text-sm">
|
||||
{{ truncateLongWords(notification.text) }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-slate-200 text-slate-600"
|
||||
@click="close(notification.id)"
|
||||
>
|
||||
<font-awesome icon="xmark" class="fa-fw"></font-awesome>
|
||||
<font-awesome icon="xmark" class="fa-fw" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,21 +67,20 @@
|
||||
<div
|
||||
class="flex items-center justify-center w-12 bg-emerald-600 text-emerald-100"
|
||||
>
|
||||
<font-awesome
|
||||
icon="circle-info"
|
||||
class="fa-fw fa-xl"
|
||||
></font-awesome>
|
||||
<font-awesome icon="circle-info" class="fa-fw fa-xl" />
|
||||
</div>
|
||||
|
||||
<div class="relative w-full pl-4 pr-8 py-2 text-emerald-900">
|
||||
<span class="font-semibold">{{ notification.title }}</span>
|
||||
<p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
|
||||
<p class="text-sm">
|
||||
{{ truncateLongWords(notification.text) }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-emerald-200 text-emerald-600"
|
||||
@click="close(notification.id)"
|
||||
>
|
||||
<font-awesome icon="xmark" class="fa-fw"></font-awesome>
|
||||
<font-awesome icon="xmark" class="fa-fw" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -92,21 +92,20 @@
|
||||
<div
|
||||
class="flex items-center justify-center w-12 bg-amber-600 text-amber-100"
|
||||
>
|
||||
<font-awesome
|
||||
icon="triangle-exclamation"
|
||||
class="fa-fw fa-xl"
|
||||
></font-awesome>
|
||||
<font-awesome icon="triangle-exclamation" class="fa-fw fa-xl" />
|
||||
</div>
|
||||
|
||||
<div class="relative w-full pl-4 pr-8 py-2 text-amber-900">
|
||||
<span class="font-semibold">{{ notification.title }}</span>
|
||||
<p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
|
||||
<p class="text-sm">
|
||||
{{ truncateLongWords(notification.text) }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-amber-200 text-amber-600"
|
||||
@click="close(notification.id)"
|
||||
>
|
||||
<font-awesome icon="xmark" class="fa-fw"></font-awesome>
|
||||
<font-awesome icon="xmark" class="fa-fw" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -118,21 +117,20 @@
|
||||
<div
|
||||
class="flex items-center justify-center w-12 bg-rose-600 text-rose-100"
|
||||
>
|
||||
<font-awesome
|
||||
icon="triangle-exclamation"
|
||||
class="fa-fw fa-xl"
|
||||
></font-awesome>
|
||||
<font-awesome icon="triangle-exclamation" class="fa-fw fa-xl" />
|
||||
</div>
|
||||
|
||||
<div class="relative w-full pl-4 pr-8 py-2 text-rose-900">
|
||||
<span class="font-semibold">{{ notification.title }}</span>
|
||||
<p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
|
||||
<p class="text-sm">
|
||||
{{ truncateLongWords(notification.text) }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-rose-200 text-rose-600"
|
||||
@click="close(notification.id)"
|
||||
>
|
||||
<font-awesome icon="xmark" class="fa-fw"></font-awesome>
|
||||
<font-awesome icon="xmark" class="fa-fw" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -183,31 +181,33 @@
|
||||
<span class="font-semibold text-lg">
|
||||
{{ notification.title }}
|
||||
</span>
|
||||
<p class="text-sm mb-2">{{ notification.text }}</p>
|
||||
<p class="text-sm mb-2">
|
||||
{{ notification.text }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
v-if="notification.onYes"
|
||||
class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
|
||||
@click="
|
||||
@click="{
|
||||
notification.onYes();
|
||||
close(notification.id);
|
||||
"
|
||||
}"
|
||||
>
|
||||
Yes{{
|
||||
notification.yesText ? ", " + notification.yesText : ""
|
||||
notification.yesText ? ', ' + notification.yesText : ''
|
||||
}}
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="notification.onNo"
|
||||
class="block w-full text-center text-md font-bold uppercase bg-yellow-600 text-white px-2 py-2 rounded-md mb-2"
|
||||
@click="
|
||||
@click="{
|
||||
notification.onNo(stopAsking);
|
||||
close(notification.id);
|
||||
stopAsking = false; // reset value
|
||||
"
|
||||
}"
|
||||
>
|
||||
No{{ notification.noText ? ", " + notification.noText : "" }}
|
||||
No{{ notification.noText ? ', ' + notification.noText : '' }}
|
||||
</button>
|
||||
|
||||
<label
|
||||
@@ -228,25 +228,25 @@
|
||||
class="sr-only"
|
||||
/>
|
||||
<!-- line -->
|
||||
<div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
|
||||
<div class="block bg-slate-500 w-14 h-8 rounded-full" />
|
||||
<!-- dot -->
|
||||
<div
|
||||
class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<button
|
||||
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
|
||||
@click="
|
||||
@click="{
|
||||
notification.onCancel
|
||||
? notification.onCancel(stopAsking)
|
||||
: null;
|
||||
close(notification.id);
|
||||
stopAsking = false; // reset value for next time they open this modal
|
||||
"
|
||||
}"
|
||||
>
|
||||
{{ notification.onYes ? "Cancel" : "Close" }}
|
||||
{{ notification.onYes ? 'Cancel' : 'Close' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -306,10 +306,10 @@
|
||||
|
||||
<button
|
||||
class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md mb-2"
|
||||
@click="
|
||||
@click="{
|
||||
close(notification.id);
|
||||
turnOffNotifications(notification);
|
||||
"
|
||||
}"
|
||||
>
|
||||
Turn Off Notification
|
||||
</button>
|
||||
@@ -329,21 +329,21 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from "vue-facing-decorator";
|
||||
import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "./db/index";
|
||||
import { NotificationIface } from "./constants/app";
|
||||
import { logger } from "./utils/logger";
|
||||
import { Vue, Component } from 'vue-facing-decorator'
|
||||
import { logConsoleAndDb, retrieveSettingsForActiveAccount } from './db/index'
|
||||
import { NotificationIface } from './constants/app'
|
||||
import { logger } from './utils/logger'
|
||||
|
||||
interface Settings {
|
||||
notifyingNewActivityTime?: string;
|
||||
notifyingReminderTime?: string;
|
||||
notifyingNewActivityTime?: string
|
||||
notifyingReminderTime?: string
|
||||
}
|
||||
|
||||
@Component
|
||||
export default class App extends Vue {
|
||||
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
||||
$notify!: (notification: NotificationIface, timeout?: number) => void
|
||||
|
||||
stopAsking = false;
|
||||
stopAsking = false
|
||||
|
||||
// created() {
|
||||
// logger.log(
|
||||
@@ -382,158 +382,158 @@ export default class App extends Vue {
|
||||
|
||||
truncateLongWords(sentence: string) {
|
||||
return sentence
|
||||
.split(" ")
|
||||
.map((word) => (word.length > 30 ? word.slice(0, 30) + "..." : word))
|
||||
.join(" ");
|
||||
.split(' ')
|
||||
.map((word) => (word.length > 30 ? word.slice(0, 30) + '...' : word))
|
||||
.join(' ')
|
||||
}
|
||||
|
||||
async turnOffNotifications(
|
||||
notification: NotificationIface,
|
||||
notification: NotificationIface
|
||||
): Promise<boolean> {
|
||||
logger.log("Starting turnOffNotifications...");
|
||||
let subscription: PushSubscriptionJSON | null = null;
|
||||
let allGoingOff = false;
|
||||
logger.log('Starting turnOffNotifications...')
|
||||
let subscription: PushSubscriptionJSON | null = null
|
||||
let allGoingOff = false
|
||||
|
||||
try {
|
||||
logger.log("Retrieving settings for the active account...");
|
||||
const settings: Settings = await retrieveSettingsForActiveAccount();
|
||||
logger.log("Retrieved settings:", settings);
|
||||
logger.log('Retrieving settings for the active account...')
|
||||
const settings: Settings = await retrieveSettingsForActiveAccount()
|
||||
logger.log('Retrieved settings:', settings)
|
||||
|
||||
const notifyingNewActivity = !!settings?.notifyingNewActivityTime;
|
||||
const notifyingReminder = !!settings?.notifyingReminderTime;
|
||||
const notifyingNewActivity = !!settings?.notifyingNewActivityTime
|
||||
const notifyingReminder = !!settings?.notifyingReminderTime
|
||||
|
||||
if (!notifyingNewActivity || !notifyingReminder) {
|
||||
allGoingOff = true;
|
||||
logger.log("Both notifications are being turned off.");
|
||||
allGoingOff = true
|
||||
logger.log('Both notifications are being turned off.')
|
||||
}
|
||||
|
||||
logger.log("Checking service worker readiness...");
|
||||
logger.log('Checking service worker readiness...')
|
||||
await navigator.serviceWorker?.ready
|
||||
.then((registration) => {
|
||||
logger.log("Service worker is ready. Fetching subscription...");
|
||||
return registration.pushManager.getSubscription();
|
||||
logger.log('Service worker is ready. Fetching subscription...')
|
||||
return registration.pushManager.getSubscription()
|
||||
})
|
||||
.then(async (subscript: PushSubscription | null) => {
|
||||
if (subscript) {
|
||||
subscription = subscript.toJSON();
|
||||
logger.log("PushSubscription retrieved:", subscription);
|
||||
subscription = subscript.toJSON()
|
||||
logger.log('PushSubscription retrieved:', subscription)
|
||||
|
||||
if (allGoingOff) {
|
||||
logger.log("Unsubscribing from push notifications...");
|
||||
await subscript.unsubscribe();
|
||||
logger.log("Successfully unsubscribed.");
|
||||
logger.log('Unsubscribing from push notifications...')
|
||||
await subscript.unsubscribe()
|
||||
logger.log('Successfully unsubscribed.')
|
||||
}
|
||||
} else {
|
||||
logConsoleAndDb("Subscription object is not available.");
|
||||
logger.log("No subscription found.");
|
||||
logConsoleAndDb('Subscription object is not available.')
|
||||
logger.log('No subscription found.')
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
logConsoleAndDb(
|
||||
"Push provider server communication failed: " +
|
||||
'Push provider server communication failed: ' +
|
||||
JSON.stringify(error),
|
||||
true,
|
||||
);
|
||||
logger.error("Error during subscription fetch:", error);
|
||||
});
|
||||
true
|
||||
)
|
||||
logger.error('Error during subscription fetch:', error)
|
||||
})
|
||||
|
||||
if (!subscription) {
|
||||
logger.log("No subscription available. Notifying user...");
|
||||
logger.log('No subscription available. Notifying user...')
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "info",
|
||||
title: "Finished",
|
||||
text: "Notifications are off.",
|
||||
group: 'alert',
|
||||
type: 'info',
|
||||
title: 'Finished',
|
||||
text: 'Notifications are off.'
|
||||
},
|
||||
5000,
|
||||
);
|
||||
logger.log("Exiting as there is no subscription to process.");
|
||||
return true;
|
||||
5000
|
||||
)
|
||||
logger.log('Exiting as there is no subscription to process.')
|
||||
return true
|
||||
}
|
||||
|
||||
const serverSubscription = {
|
||||
...subscription,
|
||||
};
|
||||
...subscription
|
||||
}
|
||||
if (!allGoingOff) {
|
||||
serverSubscription["notifyType"] = notification.title;
|
||||
serverSubscription['notifyType'] = notification.title
|
||||
logger.log(
|
||||
`Server subscription updated with notifyType: ${notification.title}`,
|
||||
);
|
||||
`Server subscription updated with notifyType: ${notification.title}`
|
||||
)
|
||||
}
|
||||
|
||||
logger.log("Sending unsubscribe request to the server...");
|
||||
const pushServerSuccess = await fetch("/web-push/unsubscribe", {
|
||||
method: "POST",
|
||||
logger.log('Sending unsubscribe request to the server...')
|
||||
const pushServerSuccess = await fetch('/web-push/unsubscribe', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(serverSubscription),
|
||||
body: JSON.stringify(serverSubscription)
|
||||
})
|
||||
.then(async (response) => {
|
||||
if (!response.ok) {
|
||||
const errorBody = await response.text();
|
||||
const errorBody = await response.text()
|
||||
logConsoleAndDb(
|
||||
`Push server failed: ${response.status} ${errorBody}`,
|
||||
true,
|
||||
);
|
||||
logger.error("Push server error response:", errorBody);
|
||||
true
|
||||
)
|
||||
logger.error('Push server error response:', errorBody)
|
||||
}
|
||||
logger.log(`Server response status: ${response.status}`);
|
||||
return response.ok;
|
||||
logger.log(`Server response status: ${response.status}`)
|
||||
return response.ok
|
||||
})
|
||||
.catch((error) => {
|
||||
logConsoleAndDb(
|
||||
"Push server communication failed: " + JSON.stringify(error),
|
||||
true,
|
||||
);
|
||||
logger.error("Error during server communication:", error);
|
||||
return false;
|
||||
});
|
||||
'Push server communication failed: ' + JSON.stringify(error),
|
||||
true
|
||||
)
|
||||
logger.error('Error during server communication:', error)
|
||||
return false
|
||||
})
|
||||
|
||||
const message = pushServerSuccess
|
||||
? "Notification is off."
|
||||
: "Notification is still on. Try to turn it off again.";
|
||||
logger.log("Server response processed. Message:", message);
|
||||
? 'Notification is off.'
|
||||
: 'Notification is still on. Try to turn it off again.'
|
||||
logger.log('Server response processed. Message:', message)
|
||||
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "info",
|
||||
title: "Finished",
|
||||
text: message,
|
||||
group: 'alert',
|
||||
type: 'info',
|
||||
title: 'Finished',
|
||||
text: message
|
||||
},
|
||||
5000,
|
||||
);
|
||||
5000
|
||||
)
|
||||
|
||||
if (notification.callback) {
|
||||
logger.log("Executing notification callback...");
|
||||
notification.callback(pushServerSuccess);
|
||||
logger.log('Executing notification callback...')
|
||||
notification.callback(pushServerSuccess)
|
||||
}
|
||||
|
||||
logger.log(
|
||||
"Completed turnOffNotifications with success:",
|
||||
pushServerSuccess,
|
||||
);
|
||||
return pushServerSuccess;
|
||||
'Completed turnOffNotifications with success:',
|
||||
pushServerSuccess
|
||||
)
|
||||
return pushServerSuccess
|
||||
} catch (error) {
|
||||
logConsoleAndDb(
|
||||
"Error turning off notifications: " + JSON.stringify(error),
|
||||
true,
|
||||
);
|
||||
logger.error("Critical error in turnOffNotifications:", error);
|
||||
'Error turning off notifications: ' + JSON.stringify(error),
|
||||
true
|
||||
)
|
||||
logger.error('Critical error in turnOffNotifications:', error)
|
||||
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "error",
|
||||
title: "Error",
|
||||
text: "Failed to turn off notifications. Please try again.",
|
||||
group: 'alert',
|
||||
type: 'error',
|
||||
title: 'Error',
|
||||
text: 'Failed to turn off notifications. Please try again.'
|
||||
},
|
||||
5000,
|
||||
);
|
||||
5000
|
||||
)
|
||||
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user