Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Task 5 (NEW) by agustina #1504

Open
wants to merge 1 commit into
base: task5
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Task 5 (NEW) by agustina
  • Loading branch information
kazturi302 authored Apr 6, 2023
commit f49ac96032cba47e0fad0d133b7e4c98c219a8b8
38 changes: 38 additions & 0 deletions agustina/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# Test Live Demo
https://agustina.vercel.app/

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

### Install NPM packages

```bash
cd agustina/
```

```bash
npm install
```

## Developing

Once you've change a directory and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Compiles and minifies for production

To create a production version of your app:

```bash
npm run build
```

### Lints and fixes files
```
npm run lint
```
38 changes: 38 additions & 0 deletions agustina/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"name": "agustina",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"@sveltejs/adapter-auto": "^1.0.0",
"@sveltejs/kit": "^1.0.0",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^4.0.0",
"postcss": "^8.4.21",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-check": "^2.9.2",
"tailwindcss": "^3.2.4",
"tslib": "^2.4.1",
"typescript": "^4.9.3",
"vite": "^4.0.0",
"ineryjs": "github:inery-blockchain/ineryjs"
},
"type": "module",
"dependencies": {
"daisyui": "^2.46.1"
}
}
6 changes: 6 additions & 0 deletions agustina/postcss.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
15 changes: 15 additions & 0 deletions agustina/src/app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@tailwind base;
@tailwind components;
@tailwind utilities;


.body {
background-color:#1abc9c;
}
.container {

margin: 0 auto;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
9 changes: 9 additions & 0 deletions agustina/src/app.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
// and what to do when importing types
declare namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface Platform {}
}
18 changes: 18 additions & 0 deletions agustina/src/app.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dapp Transaction</title>
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
<link rel="stylesheet" href="app.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<body class="bg-slate-800" data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
17 changes: 17 additions & 0 deletions agustina/src/lib/components/Modal.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<script lang="ts">
export let modal_id:string
export let modal_title: string
export let action_button_class: string = "btn btn-accent"
</script>
<input type="checkbox" id="{modal_id}" class="modal-toggle" />
<div class="modal modal-bottom sm:modal-middle">
<div class="modal-box relative">

<label for="{modal_id}" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
<h3 class="font-bold text-lg mb-4">{modal_title}</h3>
<slot name="body"></slot>
<div class="modal-action">
<label on:click for="{modal_id}" class="{action_button_class}">Send Transaction</label>
</div>
</div>
</div>
14 changes: 14 additions & 0 deletions agustina/src/lib/config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Api, JsonRpc, JsSignatureProvider } from 'ineryjs/dist/index.js';

const url = 'https://tas.blockchain-servers.world';

const json_rpc = new JsonRpc(url);
const private_key = '5Hxv.....'; // You can use with your own private key
export const actor = 'agustina'; // You can change with your own account
export const account = 'agustina'; // same as above
const signature = new JsSignatureProvider([private_key]);

export const api = new Api({
rpc: json_rpc,
signatureProvider: signature
});
6 changes: 6 additions & 0 deletions agustina/src/lib/store.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { writable } from "svelte/store";
import type { Writable } from "svelte/store";
import type { TransactResult } from "ineryjs/dist/ineryjs-api-interfaces";
import type { PushTransactionArgs, ReadOnlyTransactResult } from "ineryjs/dist/ineryjs-rpc-interfaces";

export const api_store: Writable<Promise<TransactResult | PushTransactionArgs | ReadOnlyTransactResult>> = writable("Transaction details will appear here")
5 changes: 5 additions & 0 deletions agustina/src/routes/+layout.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<script>
import "../app.css";
</script>

<slot />
144 changes: 144 additions & 0 deletions agustina/src/routes/+page.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
<script lang="ts">
import { goto } from "$app/navigation";
import Modal from "$lib/components/Modal.svelte";
import { api_store } from "$lib/store";
let api_result: {} = {res: "Please click button above"}
let create_id: number
let create_data: string
let read_id: number
let update_id: number
let update_data: string
let destroy_id: number
async function create(){

api_store.set(
fetch("/api/create", {
method: "POST",
body: JSON.stringify({
id: create_id,
user: "agustina",
data: create_data
}),
headers:{
'content-type': 'application/json'
}
}).then((res) => {
return res.json()
})
)
}
async function read(){
api_store.set(
fetch("/api/read", {
method: "POST",
body: JSON.stringify({
id: read_id,
}),
headers:{
'content-type': 'application/json'
}
}).then((res) => {
return res.json()
})
)
}
async function update(){
api_store.set(
fetch("/api/update", {
method: "POST",
body: JSON.stringify({
id: update_id,
data: update_data
}),
headers:{
'content-type': 'application/json'
}
}).then((res) => {
return res.json()
})
)
}
async function destroy(){
api_store.set(
fetch("/api/destroy", {
method: "POST",
body: JSON.stringify({
id: destroy_id,
}),
headers:{
'content-type': 'application/json'
}
}).then((res) => {
return res.json()
})
)
}
</script>

<svelte:head>
<title>agustina Crud Dapp</title>
</svelte:head>

<div class="container mx-auto min-h-screen px-20 pb-20 pt-20">
<div class="flex justify-center">
<div on:click={() => goto("https://github.com/kazturi302")} class="avatar relative cursor-pointer mb-4">
<div class="w-8 h-8 rounded-full absolute z-20 bottom-0 right-0">
<img src="https://i.ibb.co/WgxJrZh/icons8-github-94.png" />
</div>
<div class="w-24 mask mask-square bordered">
<img src="https://i.ibb.co/3h5SpQ5/125850502.jpg" />
</div>
</div>
</div>
<div class="mb-10 text-center">
<div class="text-4xl animate__animated animate__fadeIn animate__delay-1s text-green-100 font-bold ">
AGUSTINA CRUD DAPPS
</div>
<div class="mt-4 animate__animated animate__fadeIn animate__delay-1s text-yellow-300 ">Please use the button below </div>
</div>

<div class="grid animate__animated animate__fadeIn animate__delay-2s grid-rows-4 grid-flow-col gap-4">
<label for="modal-create" class="btn bg-black text-lime-300 btn-error">Build</label>
<label for="modal-read" class="btn bg-black text-lime-300 btn-error">View</label>
<label for="modal-update" class="btn bg-black text-lime-300 btn-error">Update</label>
<label for="modal-destroy" class="btn bg-black text-lime-300 btn-error">Destroy</label>
</div>

<div class="divider"></div>

<!-- detailed -->
<div class="mockup-code animate__animated animate__fadeIn animate__delay-3s">
{#await $api_store}
<pre data-prefix="$"><code>Please wait..</code></pre>
{:then api}
<pre data-prefix="$"><code>{JSON.stringify(api, null, 4)}</code></pre>
{/await}
</div>
</div>

<Modal modal_id="modal-create" modal_title="Build New Record on Inery" on:click={() => create()}>
<div slot="body" class="flex flex-col gap-4">
<input bind:value={create_id} type="text" placeholder="Type ID" class="input input-bordered w-full max-w-xs" />
<input type="text" placeholder="agustina" class="input input-bordered w-full max-w-xs" disabled />
<textarea bind:value={create_data} class="textarea textarea-bordered w-full" placeholder="Type the details"></textarea>
</div>
</Modal>

<Modal modal_id="modal-read" modal_title="View Record by ID" on:click={() => read()}>
<div slot="body" class="flex flex-col gap-4">
<input bind:value={read_id} type="text" placeholder="Type ID" class="input input-bordered w-full max-w-xs" />
</div>
</Modal>

<Modal modal_id="modal-update" modal_title="Update Record by ID" on:click={() => update()}>
<div slot="body" class="flex flex-col gap-4">
<input bind:value={update_id} type="text" placeholder="Type ID" class="input input-bordered w-full max-w-xs" />
<textarea bind:value={update_data} class="textarea textarea-bordered w-full" placeholder="Type the data..."></textarea>
</div>
</Modal>

<Modal modal_id="modal-destroy" modal_title="Delete Record by ID" on:click={() => destroy()}>
<div slot="body" class="flex flex-col gap-4">
<input bind:value={destroy_id} type="text" placeholder="Type ID" class="input input-bordered w-full max-w-xs" />
</div>
</Modal>
35 changes: 35 additions & 0 deletions agustina/src/routes/api/create/+server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import type { RequestHandler } from './$types';
import { json } from '@sveltejs/kit';
import { api, account, actor } from '$lib/config';

export const POST: RequestHandler = async ({ request }) => {
const { id, user, data } = await request.json();
try {
const tx = await api.transact(
{
actions: [
{
account,
name: 'create',
authorization: [
{
actor,
permission: 'active'
}
],
data: {
id,
user,
data
}
}
]
},
{ broadcast: true, sign: true }
);

return json(tx);
} catch (error) {
return json(error);
}
};
33 changes: 33 additions & 0 deletions agustina/src/routes/api/destroy/+server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import type { RequestHandler } from './$types';
import { json } from '@sveltejs/kit';
import { api, account, actor } from '$lib/config';

export const POST: RequestHandler = async ({ request }) => {
const { id } = await request.json();
try {
const tx = await api.transact(
{
actions: [
{
account,
name: 'destroy',
authorization: [
{
actor,
permission: 'active'
}
],
data: {
id
}
}
]
},
{ broadcast: true, sign: true }
);

return json(tx);
} catch (error) {
return json(error);
}
};
Loading