Browse Source

add the other activity envisioned on the home page (though not sending data yet)

world-fix
Trent Larson 1 year ago
parent
commit
aa2f484a9f
  1. 5
      README.md
  2. 3
      project.task.yaml
  3. 0
      public/img/textures/green-forest-floor.png
  4. BIN
      public/img/textures/leafy-autumn-forest-floor.jpg
  5. 72
      src/components/GiftedDialog.vue
  6. 2
      src/components/World/components/objects/terrain.js
  7. 8
      src/views/HelpView.vue
  8. 59
      src/views/HomeView.vue

5
README.md

@ -188,6 +188,9 @@ export const createAndStoreIdentifier = async (mnemonicPassword) => {
## Kudos ## Kudos
Gifts make the world go 'round!
* [Máximo Fernández](https://medium.com/@maxfarenas) for the 3D [code](https://github.com/maxfer03/vue-three-ns) and [explanatory post](https://medium.com/nicasource/building-an-interactive-web-portfolio-with-vue-three-js-part-three-implementing-three-js-452cb375ef80) * [Máximo Fernández](https://medium.com/@maxfarenas) for the 3D [code](https://github.com/maxfer03/vue-three-ns) and [explanatory post](https://medium.com/nicasource/building-an-interactive-web-portfolio-with-vue-three-js-part-three-implementing-three-js-452cb375ef80)
* [Many libraries]() such as Veramo.io, Vuejs.org, threejs * [Many tools & libraries]() such as Nodejs.org, IntelliJ Idea, Veramo.io, Vuejs.org, threejs.org
* [Bush 3D model](https://sketchfab.com/3d-models/lupine-plant-bf30f1110c174d4baedda0ed63778439) * [Bush 3D model](https://sketchfab.com/3d-models/lupine-plant-bf30f1110c174d4baedda0ed63778439)
* [Forest floor image](https://www.goodfreephotos.com/albums/textures/leafy-autumn-forest-floor.jpg)

3
project.task.yaml

@ -31,8 +31,9 @@
- Ensure each action sent to the server has a confirmation. - Ensure each action sent to the server has a confirmation.
- Feed screen - Home Feed & Quick Give screen
- 01 save the feed-viewed status in settings storage ("afterQuery") - 01 save the feed-viewed status in settings storage ("afterQuery")
- 01 quick action - send action, maybe choose via canvas tool https://github.com/konvajs/vue-konva
- .5 customize favicon - .5 customize favicon
- .5 make advanced features harder to access; advanced build? - .5 make advanced features harder to access; advanced build?

0
public/img/textures/forest-floor.png → public/img/textures/green-forest-floor.png

Before

Width:  |  Height:  |  Size: 4.5 MiB

After

Width:  |  Height:  |  Size: 4.5 MiB

BIN
public/img/textures/leafy-autumn-forest-floor.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 705 KiB

72
src/components/GiftedDialog.vue

@ -0,0 +1,72 @@
<template>
<div v-if="visible" class="dialog-overlay">
<div class="dialog">
<h1>Received from {{ contact?.name || "nobody in particular" }}</h1>
<p>{{ message }}</p>
<input
type="text"
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
placeholder="What you received"
v-model="description"
/>
<button @click="confirm">Confirm</button>
&nbsp;
<button @click="cancel">Cancel</button>
</div>
</div>
</template>
<script>
export default {
props: ["message"],
data() {
return {
contact: null,
description: "",
visible: false,
};
},
methods: {
open(contact) {
this.contact = contact;
this.visible = true;
},
close() {
this.visible = false;
},
confirm() {
this.close();
this.$emit("dialog-result", {
action: "confirm",
contact: this.contact,
description: this.description,
});
},
cancel() {
this.close();
this.$emit("dialog-result", { action: "cancel" });
},
},
};
</script>
<style>
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.dialog {
background-color: white;
padding: 1rem;
border-radius: 0.5rem;
width: 50%;
}
</style>

2
src/components/World/components/objects/terrain.js

@ -2,7 +2,7 @@ import { PlaneGeometry, MeshLambertMaterial, Mesh, TextureLoader } from "three";
export function createTerrain(props) { export function createTerrain(props) {
const loader = new TextureLoader(); const loader = new TextureLoader();
const height = loader.load("img/textures/forest-floor.png"); const height = loader.load("img/textures/leafy-autumn-forest-floor.jpg");
// w h // w h
const geometry = new PlaneGeometry(props.width, props.height, 64, 64); const geometry = new PlaneGeometry(props.width, props.height, 64, 64);

8
src/views/HelpView.vue

@ -216,6 +216,14 @@
<p> <p>
{{ package.version }} {{ package.version }}
</p> </p>
<h2 class="text-xl font-semibold">
For any other questions, including remove your data:
</h2>
<p>
Contact us through
<a href="https://communitycred.org">CommunityCred.org</a>.
</p>
</div> </div>
</section> </section>
</template> </template>

59
src/views/HomeView.vue

@ -46,14 +46,37 @@
<!-- CONTENT --> <!-- CONTENT -->
<section id="Content" class="p-6 pb-24"> <section id="Content" class="p-6 pb-24">
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8"> <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
Feed Time Safari
</h1> </h1>
<span :class="{ hidden: isHiddenSpinner }">
<fa icon="spinner" class="fa-fw"></fa> <div>
Loading&hellip; <h1 class="text-2xl">Quick Action</h1>
</span> <p>Choose a contact to whom to show appreciation:</p>
<div class="px-4">
<button
v-for="contact in allContacts"
:key="contact.did"
@click="openDialog(contact)"
>
{{ contact.name }},&nbsp;
</button>
<button @click="openDialog()">or nobody in particular</button>
</div>
</div>
<GiftedDialog
ref="customDialog"
@dialog-result="handleDialogResult"
message="Confirm to publish to the world."
>
</GiftedDialog>
<div> <div>
<!-- Results List --> <h1 class="text-2xl">Latest Activity</h1>
<span :class="{ hidden: isHiddenSpinner }">
<fa icon="spinner" class="fa-fw"></fa>
Loading&hellip;
</span>
<ul class=""> <ul class="">
<li <li
class="border-b border-slate-300" class="border-b border-slate-300"
@ -80,18 +103,19 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import * as R from "ramda";
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
import GiftedDialog from "@/components/GiftedDialog.vue";
import { db, accountsDB } from "@/db"; import { db, accountsDB } from "@/db";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings"; import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { accessToken } from "@/libs/crypto"; import { accessToken } from "@/libs/crypto";
import { didInfo } from "@/libs/endorserServer"; import { didInfo } from "@/libs/endorserServer";
import { Account } from "@/db/tables/accounts"; import { Account } from "@/db/tables/accounts";
import { Contact } from "@/db/tables/contacts"; import { Contact } from "@/db/tables/contacts";
import * as R from "ramda";
@Options({ @Options({
components: {}, components: { GiftedDialog },
}) })
export default class HomeView extends Vue { export default class HomeView extends Vue {
activeDid = ""; activeDid = "";
@ -102,6 +126,7 @@ export default class HomeView extends Vue {
feedData = []; feedData = [];
feedPreviousOldestId = null; feedPreviousOldestId = null;
isHiddenSpinner = true; isHiddenSpinner = true;
showInput = false;
// 'created' hook runs when the Vue instance is first created // 'created' hook runs when the Vue instance is first created
async created() { async created() {
@ -215,6 +240,24 @@ export default class HomeView extends Vue {
return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode; return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
} }
recordGive(contact) {
console.log("recordGive", contact);
}
openDialog(contact) {
this.$refs.customDialog.open(contact);
}
handleDialogResult(result) {
if (result.action === "confirm") {
return new Promise((resolve) => {
console.log("Dialog confirmed: ", result.description);
resolve();
});
} else {
// action was "cancel"
}
}
// This same popup code is in many files. // This same popup code is in many files.
alertMessage = ""; alertMessage = "";
alertTitle = ""; alertTitle = "";

Loading…
Cancel
Save