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

replace many of the javascript "confirm" calls with the nicer UX version

Trent Larson 7 months ago
parent
6ce3a0703c
commit
421b4c1719
3 changed files with 246 additions and 188 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 21
      src/App.vue
  2. 1
      src/constants/app.ts
  3. 116
      src/views/ContactsView.vue

21
src/App.vue
View File

@ -129,7 +129,10 @@
</div>
</NotificationGroup>
<!-- These are general-purpose messages - except there are some for turning app notifications on and off. -->
<!--
This "group" of "modal" is the prompt for an answer.
Set "type" as follows: "confirm" for yes/no, and "notification" ones: "-permission", "-mute", "-off"
-->
<NotificationGroup group="modal">
<div class="fixed z-[100] top-0 inset-x-0 w-full">
<Notification
@ -158,9 +161,8 @@
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
>
<div class="w-full px-6 py-6 text-slate-900 text-center">
<p class="text-lg mb-4">
{{ notification.title }}
</p>
<span class="font-semibold text-lg">{{ notification.title }}</span>
<p class="text-sm mb-2">{{ notification.text }}</p>
<button
v-if="notification.onYes"
@ -173,6 +175,17 @@
Yes
</button>
<button
v-if="notification.onNo"
@click="
notification.onNo();
close(notification.id);
"
class="block w-full text-center text-md font-bold uppercase bg-yellow-600 text-white px-2 py-2 rounded-md mb-2"
>
No
</button>
<button
@click="close(notification.id)"
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"

1
src/constants/app.ts
View File

@ -39,5 +39,6 @@ export interface NotificationIface {
type: string; // "toast" | "info" | "success" | "warning" | "danger"
title: string;
text: string;
onNo?: () => Promise<void>;
onYes?: () => Promise<void>;
}

116
src/views/ContactsView.vue
View File

@ -139,7 +139,7 @@
<button
v-if="contact.seesMe"
class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
@click="setVisibility(contact, false, true)"
@click="promptSetVisibility(contact, false)"
title="They can see you"
>
<fa icon="eye" class="fa-fw" />
@ -147,7 +147,7 @@
<button
v-else
class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
@click="setVisibility(contact, true, true)"
@click="promptSetVisibility(contact, true)"
title="They cannot see you"
>
<fa icon="eye-slash" class="fa-fw" />
@ -161,7 +161,7 @@
<fa icon="rotate" class="fa-fw" />
</button>
<button
@click="register(contact)"
@click="promptRegister(contact)"
class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-6 px-2 py-1.5 rounded-md"
v-if="activeDid"
title="Registration"
@ -176,7 +176,7 @@
</div>
<button
@click="deleteContact(contact)"
@click="promptDeleteContact(contact)"
class="text-sm uppercase bg-gradient-to-b from-rose-500 to-rose-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-6 px-2 py-1.5 rounded-md"
title="Delete"
>
@ -189,7 +189,7 @@
>
<button
class="text-sm 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-2 py-1.5 rounded-l-md"
@click="showGiftedDialog(activeDid, contact.did)"
@click="promptShowGiftedDialog(activeDid, contact.did)"
:title="givenByMeDescriptions[contact.did] || ''"
>
To:
@ -210,7 +210,7 @@
<button
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
@click="showGiftedDialog(contact.did, this.activeDid)"
@click="promptShowGiftedDialog(contact.did, this.activeDid)"
:title="givenToMeDescriptions[contact.did] || ''"
>
From:
@ -781,35 +781,56 @@ export default class ContactsView extends Vue {
});
}
async deleteContact(contact: Contact) {
if (
confirm(
"You should first make sure that your activity is no longer visible to them." +
" Note that this only deletes them from your contacts on this device." +
" \n\nAre you sure you want to remove " +
// prompt with confirmation if they want to delete a contact
promptDeleteContact(contact: Contact) {
this.$notify(
{
group: "modal",
type: "confirm",
title: "Delete",
text:
"Are you sure you want to remove " +
this.nameForDid(this.contacts, contact.did) +
" with DID " +
contact.did +
" from your contact list?",
)
) {
onYes: async () => {
await this.deleteContact(contact);
},
},
-1,
);
}
async deleteContact(contact: Contact) {
await db.open();
await db.contacts.delete(contact.did);
this.contacts = R.without([contact], this.contacts);
}
}
async register(contact: Contact) {
if (
confirm(
// prompt to register a new contact
async promptRegister(contact: Contact) {
this.$notify(
{
group: "modal",
type: "confirm",
title: "Register",
text:
"Are you sure you want to register " +
this.nameForDid(this.contacts, contact.did) +
(contact.registered
? " -- especially since they are already marked as registered"
: "") +
"?",
)
) {
onYes: async () => {
await this.register(contact);
},
},
-1,
);
}
async register(contact: Contact) {
this.$notify(
{
group: "alert",
@ -915,6 +936,23 @@ export default class ContactsView extends Vue {
}
}
}
async promptSetVisibility(contact: Contact, visibility: boolean) {
const visibilityPrompt = visibility
? "Are you sure you want to make your activity visible to them?"
: "Are you sure you want to hide all your activity from them?";
this.$notify(
{
group: "modal",
type: "confirm",
title: "Set Visibility",
text: visibilityPrompt,
onYes: async () => {
await this.setVisibility(contact, visibility, true);
},
},
-1,
);
}
async setVisibility(
@ -922,12 +960,6 @@ export default class ContactsView extends Vue {
visibility: boolean,
showSuccessAlert: boolean,
) {
const visibilityPrompt =
showSuccessAlert &&
(visibility
? "Are you sure you want to make your activity visible to them?"
: "Are you sure you want to hide all your activity from them?");
if (!visibilityPrompt || confirm(visibilityPrompt)) {
const url =
this.apiServer +
"/api/report/" +
@ -987,7 +1019,6 @@ export default class ContactsView extends Vue {
);
}
}
}
async checkVisibility(contact: Contact) {
const url =
@ -1058,16 +1089,15 @@ export default class ContactsView extends Vue {
);
}
private showGiftedDialog(giverDid: string, recipientDid: string) {
// if they have unconfirmed amounts, ask to confirm those first
promptShowGiftedDialog(giverDid: string, recipientDid: string) {
// if they have unconfirmed amounts, ask to confirm those
if (
recipientDid == this.activeDid &&
recipientDid === this.activeDid &&
this.givenToMeUnconfirmed[giverDid] > 0
) {
const isAre = this.givenToMeUnconfirmed[giverDid] == 1 ? "is" : "are";
const hours = this.givenToMeUnconfirmed[giverDid] == 1 ? "hour" : "hours";
if (
confirm(
const message =
"There " +
isAre +
" " +
@ -1075,17 +1105,31 @@ export default class ContactsView extends Vue {
" unconfirmed " +
hours +
" from them." +
" Would you like to confirm some of those hours?",
)
) {
" Would you like to confirm some of those hours?";
this.$notify(
{
group: "modal",
type: "confirm",
title: "Delete",
text: message,
onNo: async () => {
this.showGiftedDialog(giverDid, recipientDid);
},
onYes: async () => {
this.$router.push({
name: "contact-amounts",
query: { contactDid: giverDid },
});
return;
},
},
-1,
);
} else {
this.showGiftedDialog(giverDid, recipientDid);
}
}
private showGiftedDialog(giverDid: string, recipientDid: string) {
let giver: GiverReceiverInputInfo, receiver: GiverReceiverInputInfo;
if (giverDid) {
giver = {

Write Preview
Loading…
Cancel
Save