trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

change the notification detection to our own variables, and save the selected time

Browse Source
This commit is contained in:
Trent Larson
2024-11-20 19:55:51 -07:00
parent 5fa2f3eef6
commit 15e09c2d81
8 changed files with 286 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/views/AccountViewView.vue
View File

@@ -54,7 +54,10 @@
>
<button
@click="
() => $refs.userNameDialog.open((name) => (this.givenName = name))
() =>
(this.$refs.userNameDialog as UserNameDialog).open(
(name) => (this.givenName = name),
)
"
class="inline-block text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
>
@@ -178,19 +181,25 @@
>
<!-- label -->
<div class="mb-2 font-bold">Notifications</div>
<div
v-if="!notificationMaybeChanged"
class="flex items-center justify-between cursor-pointer"
@click="showNotificationChoice()"
>
<div class="flex items-center justify-between">
<!-- label -->
<div>App Notifications</div>
<div>
New Activity Notifications
<fa
icon="question-circle"
class="text-slate-400 fa-fw ml-2 cursor-pointer"
@click.stop="showNewActivityNotificationInfo"
/>
</div>
<!-- toggle -->
<div class="relative ml-2">
<div
class="relative ml-2 cursor-pointer"
@click="showNewActivityNotificationChoice()"
>
<!-- input -->
<input
type="checkbox"
v-model="isSubscribed"
v-model="notifyingNewActivity"
name="toggleNotificationsInput"
class="sr-only"
/>
@@ -202,9 +211,8 @@
></div>
</div>
</div>
<div v-else>
Notification status may have changed. Refresh this page to see the
latest setting.
<div v-if="notifyingNewActivityTime" class="w-full text-right">
{{ notifyingNewActivityTime }}
</div>
<router-link class="pl-4 text-sm text-blue-500" to="/help-notifications">
Troubleshoot your notification setup.
@@ -803,10 +811,10 @@ export default class AccountViewView extends Vue {
imageLimits: ImageRateLimits | null = null;
imageServer = "";
isRegistered = false;
isSubscribed = false;
limitsMessage = "";
loadingLimits = false;
notificationMaybeChanged = false;
notifyingNewActivity = false;
notifyingNewActivityTime = "";
passkeyExpirationDescription = "";
passkeyExpirationMinutes = DEFAULT_PASSKEY_EXPIRATION_MINUTES;
previousPasskeyExpirationMinutes = DEFAULT_PASSKEY_EXPIRATION_MINUTES;
@@ -849,7 +857,12 @@ export default class AccountViewView extends Vue {
*/
const registration = await navigator.serviceWorker?.ready;
this.subscription = await registration.pushManager.getSubscription();
this.isSubscribed = !!this.subscription;
if (!this.subscription) {
if (this.notifyingNewActivity) {
// the app thought there was a subscription but there isn't, so fix the settings
this.turnOffNotifyingFlags();
}
}
// console.log("Got to the end of 'mounted' call in AccountViewView.");
/**
* Beware! I've seen where we never get to this point because "ready" never resolves.
@@ -902,6 +915,8 @@ export default class AccountViewView extends Vue {
this.showContactGives = !!settings.showContactGivesInline;
this.hideRegisterPromptOnNewContact =
!!settings.hideRegisterPromptOnNewContact;
this.notifyingNewActivity = !!settings.notifyingNewActivity;
this.notifyingNewActivityTime = settings.notifyingNewActivityTime || "";
this.passkeyExpirationMinutes =
settings.passkeyExpirationMinutes ?? DEFAULT_PASSKEY_EXPIRATION_MINUTES;
this.previousPasskeyExpirationMinutes = this.passkeyExpirationMinutes;
@@ -921,29 +936,44 @@ export default class AccountViewView extends Vue {
.then(() => setTimeout(fn, 2000));
}
toggleShowContactAmounts() {
async toggleShowContactAmounts() {
this.showContactGives = !this.showContactGives;
this.updateShowContactAmounts();
await db.open();
await db.settings.update(MASTER_SETTINGS_KEY, {
showContactGivesInline: this.showContactGives,
});
}
toggleShowGeneralAdvanced() {
async toggleShowGeneralAdvanced() {
this.showGeneralAdvanced = !this.showGeneralAdvanced;
this.updateShowGeneralAdvanced();
await db.open();
await db.settings.update(MASTER_SETTINGS_KEY, {
showGeneralAdvanced: this.showGeneralAdvanced,
});
}
toggleProdWarning() {
async toggleProdWarning() {
this.warnIfProdServer = !this.warnIfProdServer;
this.updateWarnIfProdServer(this.warnIfProdServer);
await db.open();
await db.settings.update(MASTER_SETTINGS_KEY, {
warnIfProdServer: this.warnIfProdServer,
});
}
toggleTestWarning() {
async toggleTestWarning() {
this.warnIfTestServer = !this.warnIfTestServer;
this.updateWarnIfTestServer(this.warnIfTestServer);
await db.open();
await db.settings.update(MASTER_SETTINGS_KEY, {
warnIfTestServer: this.warnIfTestServer,
});
}
toggleShowShortcutBvc() {
async toggleShowShortcutBvc() {
this.showShortcutBvc = !this.showShortcutBvc;
this.updateShowShortcutBvc(this.showShortcutBvc);
await db.open();
await db.settings.update(MASTER_SETTINGS_KEY, {
showShortcutBvc: this.showShortcutBvc,
});
}
readableDate(timeStr: string) {
@@ -968,11 +998,39 @@ export default class AccountViewView extends Vue {
}
}
async showNotificationChoice() {
if (!this.subscription) {
async showNewActivityNotificationInfo() {
this.$notify(
{
group: "modal",
type: "confirm",
title: "New Activity Notification",
text: `
This will only notify you when there is new relevant activity for you personally.
Note that it runs on your device and many factors may affect delivery,
so if you want a reliable but simple daily notification then choose a 'Reminder'.
Do you want more details?
`,
onYes: async () => {
await (this.$router as Router).push({
name: "help-notification-types",
});
},
yesText: "tell me more.",
},
-1,
);
}
async showNewActivityNotificationChoice() {
if (!this.notifyingNewActivity) {
(
this.$refs.pushNotificationPermission as PushNotificationPermission
).open();
).open((success: boolean, time: string) => {
if (success) {
this.notifyingNewActivity = true;
this.notifyingNewActivityTime = time;
}
});
} else {
this.$notify(
{
@@ -980,55 +1038,16 @@ export default class AccountViewView extends Vue {
type: "notification-off",
title: "", // unused, only here to satisfy type check
text: "", // unused, only here to satisfy type check
callback: async (success) => {
if (success) {
this.notifyingNewActivity = false;
this.notifyingNewActivityTime = "";
}
},
},
-1,
);
}
this.notificationMaybeChanged = true;
}
public async updateShowContactAmounts() {
await db.open();
await db.settings.update(MASTER_SETTINGS_KEY, {
showContactGivesInline: this.showContactGives,
});
}
public async updateShowGeneralAdvanced() {
await db.open();
await db.settings.update(MASTER_SETTINGS_KEY, {
showGeneralAdvanced: this.showGeneralAdvanced,
});
}
public async updateWarnIfProdServer(newSetting: boolean) {
try {
await db.open();
await db.settings.update(MASTER_SETTINGS_KEY, {
warnIfProdServer: newSetting,
});
} catch (err) {
this.$notify(
{
group: "alert",
type: "danger",
title: "Error Updating Prod Warning",
text: "The setting may not have saved. Try again, maybe after restarting the app.",
},
-1,
);
console.error(
"Telling user to try again after prod-server-warning setting update because:",
err,
);
}
}
public async updateWarnIfTestServer(newSetting: boolean) {
await db.open();
await db.settings.update(MASTER_SETTINGS_KEY, {
warnIfTestServer: newSetting,
});
}
public async toggleHideRegisterPromptOnNewContact() {
@@ -1049,11 +1068,14 @@ export default class AccountViewView extends Vue {
this.passkeyExpirationDescription = tokenExpiryTimeDescription();
}
public async updateShowShortcutBvc(newSetting: boolean) {
public async turnOffNotifyingFlags() {
await db.open();
await db.settings.update(MASTER_SETTINGS_KEY, {
showShortcutBvc: newSetting,
notifyingNewActivity: false,
notifyingNewActivityTime: "",
});
this.notifyingNewActivity = false;
this.notifyingNewActivityTime = "";
}
/**