Skip to content

Commit

Permalink
update to we-applet 0.14 and update attachments
Browse files Browse the repository at this point in the history
zippy committed Jan 19, 2024
1 parent 44dbc46 commit a390593
Showing 25 changed files with 714 additions and 264 deletions.
44 changes: 8 additions & 36 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 1 addition & 3 deletions ui/package.json
Original file line number Diff line number Diff line change
@@ -14,12 +14,11 @@
"@holochain-open-dev/stores": "^0.8.5",
"@holochain-open-dev/utils": "^0.16.4",
"@holochain-syn/core": "^0.12.1",
"@lightningrodlabs/we-applet": "^0.14.0",
"@holochain/client": "^0.16.7",
"@mdi/js": "^7.1.96",
"@ts-stack/markdown": "^1.4.0",
"lodash": "^4.17.21",
"svelte-fa": "^3.0.3",
"@fortawesome/free-solid-svg-icons": "^6.3.0",
"svelte-materialify": "^0.3.11",
"svelte-multiselect": "^8.2.0",
"uuid": "^8.3.2",
@@ -30,7 +29,6 @@
"emoji-picker-element": "1.21.0",
"javascript-time-ago": "2.3.7",
"@types/javascript-time-ago": "^2.0.3",
"@lightningrodlabs/we-applet": "^0.12.2",
"svelte-bricks": "0.2.1"
},
"devDependencies": {
17 changes: 8 additions & 9 deletions ui/src/AboutDialog.svelte
Original file line number Diff line number Diff line change
@@ -2,8 +2,7 @@
import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
import { getContext } from 'svelte';
import type { TalkingStickiesStore } from './store';
import Fa from 'svelte-fa';
import { faClone, faFileExport, faFileImport, faSpinner } from '@fortawesome/free-solid-svg-icons';
import SvgIcon from './SvgIcon.svelte';
import {asyncDerived, toPromise} from '@holochain-open-dev/stores'
import type { Board, BoardEphemeralState, BoardState } from './board';
import { BoardType } from './boardList';
@@ -71,7 +70,7 @@
</script>


<sl-dialog label="TalkingStickies!: UI v0.8.0 for DNA v0.7.0" bind:this={dialog} width={600} >
<sl-dialog label="TalkingStickies!: UI v0.8.1 for DNA v0.7.0" bind:this={dialog} width={600} >
<div class="about">
<p>TalkingStickies! is a demonstration Holochain app built by the Holochain Foundation.</p>
<p> <b>Developers:</b>
@@ -83,26 +82,26 @@

{#if importing}
<div class="export-import" title="Import Boards">
<div class="spinning" style="margin:auto"><Fa icon={faSpinner} color="#fff"/></div>
<div class="spinning" style="margin:auto"><SvgIcon icon=faSpinner color="#fff"/></div>
</div>
{:else}
<div class="export-import" on:click={()=>{fileinput.click();}} title="Import Boards">
<Fa color="#fff" icon={faFileImport} size=20px style="margin-left: 15px;"/><span>Import Boards </span>
<SvgIcon color="#fff" icon=faFileImport size=20px style="margin-left: 15px;"/><span>Import Boards </span>
</div>
{/if}
{#if exporting}
<div class="export-import" title="Import Boards">
<div class="spinning" style="margin:auto"><Fa icon={faSpinner} color="#fff"/></div>
<div class="spinning" style="margin:auto"><SvgIcon icon=faSpinner color="#fff"/></div>
</div>
{:else}
<div class="export-import" on:click={()=>{exportAllBoards()}} title="Export All Boards"><Fa color="#fff" icon={faFileExport} size=20px style="margin-left: 15px;"/><span>Export All Boards</span></div>
<div class="export-import" on:click={()=>{exportAllBoards()}} title="Export All Boards"><SvgIcon color="#fff" icon=faFileExport size=20px style="margin-left: 15px;"/><span>Export All Boards</span></div>
{/if}

{#if $allBoards.status == "pending"}
<div class="spinning" ><Fa icon={faSpinner} color="#fff"></Fa></div>
<div class="spinning" ><SvgIcon icon=faSpinner color="#fff" /></div>
{:else if $allBoards.status == "complete"}
<sl-dropdown skidding=15>
<sl-button slot="trigger" caret><Fa icon={faClone} size=20px style="margin-right: 10px"/><span>Clone Board From </span></sl-button>
<sl-button slot="trigger" caret><SvgIcon icon=faClone size=20px style="margin-right: 10px"/><span>Clone Board From </span></sl-button>
<sl-menu>
{#each Array.from($allBoards.value.entries()) as [key,board]}
<sl-menu-item on:click={()=>{
77 changes: 70 additions & 7 deletions ui/src/App.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts">
import Controller from './Controller.svelte'
import ControllerBoard from './ControllerBoard.svelte'
import { AppAgentWebsocket, AdminWebsocket } from '@holochain/client';
import '@shoelace-style/shoelace/dist/themes/light.css';
import { WeClient, isWeContext, initializeHotReload } from '@lightningrodlabs/we-applet';
@@ -10,6 +11,14 @@
import TSLogoIcon from "./icons/TSLogoIcon.svelte";
import { appletServices } from './we';
enum RenderType {
App,
Board,
BlockActiveBoards
}
let renderType = RenderType.App
let hrlWithContext
const appId = import.meta.env.VITE_APP_ID ? import.meta.env.VITE_APP_ID : 'talking-stickies'
const roleName = 'talking-stickies'
const appPort = import.meta.env.VITE_APP_PORT ? import.meta.env.VITE_APP_PORT : 8888
@@ -22,7 +31,6 @@
let connected = false
initialize()
async function initialize() : Promise<void> {
let profilesClient
if ((import.meta as any).env.DEV) {
@@ -49,11 +57,63 @@
else {
weClient = await WeClient.connect(appletServices);
if (
!(weClient.renderInfo.type === "applet-view")
&& !(weClient.renderInfo.view.type === "main")
) throw new Error("This Applet only implements the applet main view.");
switch (weClient.renderInfo.type) {
case "applet-view":
switch (weClient.renderInfo.view.type) {
case "main":
// here comes your rendering logic for the main view
break;
case "block":
switch(weClient.renderInfo.view.block) {
case "active_boards":
renderType = RenderType.BlockActiveBoards
break;
default:
throw new Error("Unknown applet-view block type:"+weClient.renderInfo.view.block);
}
break;
case "attachable":
switch (weClient.renderInfo.view.roleName) {
case "talking-stickies":
switch (weClient.renderInfo.view.integrityZomeName) {
case "syn_integrity":
switch (weClient.renderInfo.view.entryType) {
case "document":
renderType = RenderType.Board
hrlWithContext = weClient.renderInfo.view.hrlWithContext
break;
default:
throw new Error("Unknown entry type:"+weClient.renderInfo.view.entryType);
}
break;
default:
throw new Error("Unknown integrity zome:"+weClient.renderInfo.view.integrityZomeName);
}
break;
default:
throw new Error("Unknown role name:"+weClient.renderInfo.view.roleName);
}
break;
default:
throw new Error("Unsupported applet-view type");
}
break;
case "cross-applet-view":
switch (this.weClient.renderInfo.view.type) {
case "main":
// here comes your rendering logic for the cross-applet main view
//break;
case "block":
//
//break;
default:
throw new Error("Unknown cross-applet-view render type.")
}
break;
default:
throw new Error("Unknown render view type");
}
//@ts-ignore
client = weClient.renderInfo.appletClient;
//@ts-ignore
@@ -80,9 +140,12 @@
></create-profile>
</div>
{:else}
<Controller client={client} weClient={weClient} profilesStore={profilesStore} roleName={roleName}></Controller>
{#if renderType== RenderType.App}
<Controller client={client} weClient={weClient} profilesStore={profilesStore} roleName={roleName}></Controller>
{:else if renderType== RenderType.Board}
<ControllerBoard board={hrlWithContext.hrl[1]} client={client} weClient={weClient} profilesStore={profilesStore} roleName={roleName}></ControllerBoard>
{/if}
{/if}

</profiles-context>
{:else}
<div class="loading"><div class="loader"></div></div>
54 changes: 54 additions & 0 deletions ui/src/AttachmentsBind.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<script lang="ts">
import "@shoelace-style/shoelace/dist/components/skeleton/skeleton.js";
import { createEventDispatcher, getContext } from "svelte";
import type { TalkingStickiesStore } from "./store";
import type { Board } from "./board";
import SvgIcon from "./SvgIcon.svelte";
import { StoreSubscriber } from "@holochain-open-dev/stores";
import { WeClient } from "@lightningrodlabs/we-applet";
export let activeBoard: Board
const dispatch = createEventDispatcher()
const { getStore } :any = getContext("store");
let store: TalkingStickiesStore = getStore();
let attachmentTypes = Array.from(store.weClient.attachmentTypes.entries())
export const refresh = () => {
attachmentTypes = Array.from(store.weClient.attachmentTypes.entries())
}
</script>

<div>
<h3>Create Bound Item:</h3>
{#each attachmentTypes as [hash, record]}
<div>
{#await store.weClient.appletInfo(hash)}
...
{:then appletInfo}
{#each appletInfo.groupsIds as groupHash}
{#await store.weClient.groupProfile(groupHash)}...
{:then profile}
<sl-icon src={profile.logo_src}></sl-icon> <strong>{profile.name}</strong>
{:catch error}
{error}
{/await}
{/each}

{appletInfo.appletName}:
{:catch error}
{error}
{/await}
{#each Object.values(record) as aType}
<sl-icon src={aType.icon_src}></sl-icon>{aType.label}
<button class="control" on:click={async ()=>{
const hrl = await aType.create({hrl:[store.dnaHash,activeBoard.hash],context:""})
dispatch("add-binding",hrl)
}} >
<SvgIcon icon=faPlus size=12/>
</button>
{/each}
</div>
{/each}
</div>
<style>
</style>
Loading

0 comments on commit a390593

Please sign in to comment.