puria/index_wasm.html

## index_wasm.html
<!DOCTYPE html>
<html class="h-100">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
        .container {
            width: auto;
            max-width: 800px;
            padding: 0 15px;
        }

        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        #root__title,
        #root__description {
            display: none;
        }

        button[type="submit"] {
            margin-top: 20px;
        }

        #pr-verification {
            display: none;
        }

        span.required {
            color: #cd4200;
            font-weight: 600;
        }
    </style>
    <link href="" rel="stylesheet" />
</head>

<body id="pr-body" class="d-flex flex-column h-100">
    <script type="module">
        import { zencode_exec } from "https://jspm.dev/zenroom";

      window.verify = (keys, data) => {
        const contract = `Given nothing
Then print the data`;
        zencode_exec(contract, {data, keys}).then(({result}) => {
          const rel = document.getElementById('pr-verification-result');
          rel.innerHTML = result;
          rel.parentNode.style.display = 'block';
        })
      }
    </script>

    <main class="flex-shrink-0">
        <div class="container">
            <div id="hero" class="px-4 py-5 text-center">
                <img class="mx-auto mb-4 d-block" src="" alt="" height="72">
                <h1 class="display-5 fw-bold" id="pr-title">Some title</h1>
                <div class="mx-auto col-lg-6">
                    <p class="mb-4 lead" id="pr-description">Some description.</p>
                </div>
            </div>
            <div id="pr-form" class="py-4"></div>
            <div class="row">
                <div class="col">
                    <div class="alert d-flex align-items-center" role="alert">
                        <pre id="pr-result" class="g-5"></pre>
                    </div>
                </div>
            </div>

            <div id="pr-verification">
                <h3 id="pr-verification-title">Verification</h3>
                <pre id="pr-verification-result" readonly></pre>
            </div>
        </div>
    </main>

    <footer class="py-3 mt-auto footer bg-light">
        <div class="container">
            <span class="text-muted">Powered by <a href="https://dyne.org">Dyne.org</a></span>
        </div>
    </footer>

    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://cdn.jsdelivr.net/npm/react-jsonschema-form@1.8.1/dist/react-jsonschema-form.js" crossorigin></script>

    <script>
        'use strict';

        const Form = JSONSchemaForm.default;
        const schema = `{
  "title": "Some title",
  "description": "Some description.",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "title": "Put your name"
    }
  }
}`;
        const g = id => document.getElementById("pr-" + id);

        const log = (type) => console.log.bind(console, type);
        const e = React.createElement;

        ReactDOM.render(e(
            Form, {
                schema: JSON.parse(schema),
                onChange: () => {
                    log("changed")
                },
                onSubmit: (f) => {
                    fetch('https://apiroom.net/api/puria/standup', {
                            headers: {
                                'Accept': 'application/json',
                                'Content-Type': 'application/json'
                            },
                            method: "POST",
                            body: JSON.stringify({
                                data: f.formData
                            })
                        })
                        .then(response => response.json())
                        .then(json => {
                            const el = g("result");
                            if (json.zenroom_errors !== undefined) {
                                el.innerHTML = json.zenroom_errors.logs.replace(/\\n/g, "<br>");
                                el.parentElement.classList.add("alert-warning");
                                el.parentElement.classList.remove("alert-success");
                            } else {
                                g('result').innerHTML = JSON.stringify(json, null, 2);
                                el.parentElement.classList.remove("alert-warning");
                                el.parentElement.classList.add("alert-success");
                            }
                            return json
                        }).then((json) => {
                            verify(JSON.stringify(json), JSON.stringify(f.formData));
                        })
                },
                onError: () => {
                    log("errors")
                }
            }), g("form"));
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html class="h-100">

	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
	integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
	<style>
	.container {
	width: auto;
	max-width: 800px;
	padding: 0 15px;
	}

	pre {
	white-space: pre-wrap;
	word-wrap: break-word;
	}

	#root__title,
	#root__description {
	display: none;
	}

	button[type="submit"] {
	margin-top: 20px;
	}

	#pr-verification {
	display: none;
	}

	span.required {
	color: #cd4200;
	font-weight: 600;
	}
	</style>
	<link href="" rel="stylesheet" />
	</head>

	<body id="pr-body" class="d-flex flex-column h-100">
	<script type="module">
	import { zencode_exec } from "https://jspm.dev/zenroom";

	window.verify = (keys, data) => {
	const contract = `Given nothing
	Then print the data`;
	zencode_exec(contract, {data, keys}).then(({result}) => {
	const rel = document.getElementById('pr-verification-result');
	rel.innerHTML = result;
	rel.parentNode.style.display = 'block';
	})
	}
	</script>

	<main class="flex-shrink-0">
	<div class="container">
	<div id="hero" class="px-4 py-5 text-center">
	<img class="mx-auto mb-4 d-block" src="" alt="" height="72">
	<h1 class="display-5 fw-bold" id="pr-title">Some title</h1>
	<div class="mx-auto col-lg-6">
	<p class="mb-4 lead" id="pr-description">Some description.</p>
	</div>
	</div>
	<div id="pr-form" class="py-4"></div>
	<div class="row">
	<div class="col">
	<div class="alert d-flex align-items-center" role="alert">
	<pre id="pr-result" class="g-5"></pre>
	</div>
	</div>
	</div>

	<div id="pr-verification">
	<h3 id="pr-verification-title">Verification</h3>
	<pre id="pr-verification-result" readonly></pre>
	</div>
	</div>
	</main>

	<footer class="py-3 mt-auto footer bg-light">
	<div class="container">
	<span class="text-muted">Powered by <a href="https://dyne.org">Dyne.org</a></span>
	</div>
	</footer>

	<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
	<script src="https://cdn.jsdelivr.net/npm/react-jsonschema-form@1.8.1/dist/react-jsonschema-form.js" crossorigin></script>

	<script>
	'use strict';

	const Form = JSONSchemaForm.default;
	const schema = `{
	"title": "Some title",
	"description": "Some description.",
	"type": "object",
	"properties": {
	"name": {
	"type": "string",
	"title": "Put your name"
	}
	}
	}`;
	const g = id => document.getElementById("pr-" + id);

	const log = (type) => console.log.bind(console, type);
	const e = React.createElement;

	ReactDOM.render(e(
	Form, {
	schema: JSON.parse(schema),
	onChange: () => {
	log("changed")
	},
	onSubmit: (f) => {
	fetch('https://apiroom.net/api/puria/standup', {
	headers: {
	'Accept': 'application/json',
	'Content-Type': 'application/json'
	},
	method: "POST",
	body: JSON.stringify({
	data: f.formData
	})
	})
	.then(response => response.json())
	.then(json => {
	const el = g("result");
	if (json.zenroom_errors !== undefined) {
	el.innerHTML = json.zenroom_errors.logs.replace(/\\n/g, "<br>");
	el.parentElement.classList.add("alert-warning");
	el.parentElement.classList.remove("alert-success");
	} else {
	g('result').innerHTML = JSON.stringify(json, null, 2);
	el.parentElement.classList.remove("alert-warning");
	el.parentElement.classList.add("alert-success");
	}
	return json
	}).then((json) => {
	verify(JSON.stringify(json), JSON.stringify(f.formData));
	})
	},
	onError: () => {
	log("errors")
	}
	}), g("form"));
	</script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
	integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">
	</script>
	</body>

	</html>