melvincarvalho/index.html

## index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <script
      src="https://solid.github.io/releases/solid.js/solid-client.min.js"
    ></script>
    <script type="module" src="./main.js"></script>
    <style>
li > input:checked ~ .child {display: none;}
    </style>
  </head>
  <body>
    <div>
      <p>
NOTE: WebID only works in https://databox.me/ ,
not on https://solid.community/ or https://solidtest.space/ .
      </p>
    </div>
    <h1>Paste bins app</h1>
    <div>
      <label>Your WebID
        <input id="webid" size="80"
               value="https://bellbind.databox.me/profile/card#me"
        />
      </label>
      <button id="login">check browser logged-in</button>
    </div>
    <div>
      <label>Bins URL
        <input id="bins" size="80"
               value="https://bellbind.databox.me/Inbox/"
        />
      </label>
      <button id="load">load</button>
    </div>
    <div><button id="append">append an empty bin</button></div>
    <ul id="list"></ul>
  </body>
</html>

## main.js

// Check login state of the WebID to its solid server
const checkLogin = ev => (async () => {
  const inputWebId = document.getElementById("webid").value.trim();
  //[TBD: how to use non databox.me WebIds?]
  //const endpoint = new URL(inputWebId);
  //endpoint.pathname = endpoint.hash = "";
  //console.log(endpoint.href);
  const webId = await SolidClient.login(inputWebId);
  //const webId = await SolidClient.login(inputWebId, {
  //  authEndpoint: endpoint.href});
  //const webId = await SolidClient.login(inputWebId, endpoint.href);
  console.log(`login WebID: ${webId}`);
  if (!webId) {// webId === ""
    alert(`FAIL: ${inputWebId} is not logged-in. go ${inputWebId} to login`);
    location.href = inputWebId;
  } else {// webId === inputWebId ?
    alert(`OK: ${webId} is already logged-in`);
  }
})().catch(console.error);
document.getElementById("login").addEventListener("click", checkLogin);

const appendBin = () => (async () => {
  const $rdf = SolidClient.rdflib;
  const ns = SolidClient.vocab;
  const graph = $rdf.graph();
  const self = $rdf.sym("");
  //[Warning] Relative URIs will fail in future versions
  graph.add(self, ns.dct("title"), "");
  graph.add(self, ns.sioc("content"), "");
  const data = new $rdf.Serializer(graph).toN3(graph);

  const binsUrl = document.getElementById("bins").value.trim();
  const meta = await SolidClient.web.post(binsUrl, data);
  console.log(meta);

  loadBins();
})().catch(error => {
  console.error(error);
  alert(`fail to append by ${error.message}, check logged-in status`);
});
document.getElementById("append").addEventListener("click", appendBin);

const loadBins = () => (async () => {
  const binsUrl = document.getElementById("bins").value.trim();
  const response = await SolidClient.web.get(binsUrl);
  console.log(response);
  console.log(response.raw());
  console.log(response.isContainer()); // why false??

  //WORKAROUND: access container elements via rdflib
  const $rdf = SolidClient.rdflib;
  const ns = SolidClient.vocab;
  const graph = response.parsedGraph();
  const me = $rdf.sym(response.url);
  const contains = graph.each(me, ns.ldp("contains"), undefined);

  const list = document.getElementById("list");
  for (const child of [...list.children]) child.remove();
  await Promise.all(contains.map(elem => loadContent(elem.uri)));
})().catch(error => {
  console.error(error);
  alert(`fail to load by ${error.message}, check logged-in status`);
});
document.getElementById("load").addEventListener("click", loadBins);

async function loadContent(uri) {
  const list = document.getElementById("list");
  const id = encodeURIComponent(uri);

  const li = document.createElement("li");
  list.append(li);

  const checkbox = document.createElement("input");
  checkbox.id = id;
  checkbox.type = "checkbox";
  checkbox.checked = true;
  li.append(checkbox);

  const label = document.createElement("label");
  label.textContent = uri;
  label.setAttribute("for", id);
  li.append(label);

  // content data via rdflib
  const response = await SolidClient.web.get(uri);
  console.log(response);
  console.log(response.raw());
  const $rdf = SolidClient.rdflib;
  const ns = SolidClient.vocab;
  const graph = response.parsedGraph();
  const me = $rdf.sym(response.url);
  const title = graph.anyValue(me, ns.dct("title"));
  const content = graph.anyValue(me, ns.sioc("content"));

  const view = document.createElement("div");
  view.classList.add("child");
  li.append(view);
  const titleView = document.createElement("input");
  titleView.size = 80;
  titleView.value = title;
  const contentView = document.createElement("textarea");
  contentView.cols = 80;
  contentView.rows = 25;
  contentView.value = content;
  view.append(titleView);
  view.append(contentView);

  // modification-access buttons
  const buttons = document.createElement("div");
  view.append(buttons);
  const update = document.createElement("button");
  update.textContent = "modify";
  update.addEventListener("click", async ev => {
    const graph = $rdf.graph();
    const self = $rdf.sym("");
    //[Warning] Relative URIs will fail in future versions
    graph.add(self, ns.dct("title"), titleView.value);
    graph.add(self, ns.sioc("content"), contentView.value);
    const data = new $rdf.Serializer(graph).toN3(graph);
    const meta = await SolidClient.web.put(uri, data);
    console.log(meta);
    //loadBins();
  });
  buttons.append(update);

  const remove = document.createElement("button");
  remove.textContent = "remove";
  remove.addEventListener("click", async ev => {
    const meta = await SolidClient.web.del(uri);
    console.log(meta);
    loadBins();
  });
  buttons.append(remove);
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<script
	src="https://solid.github.io/releases/solid.js/solid-client.min.js"
	></script>
	<script type="module" src="./main.js"></script>
	<style>
	li > input:checked ~ .child {display: none;}
	</style>
	</head>
	<body>
	<div>
	<p>
	NOTE: WebID only works in https://databox.me/ ,
	not on https://solid.community/ or https://solidtest.space/ .
	</p>
	</div>
	<h1>Paste bins app</h1>
	<div>
	<label>Your WebID
	<input id="webid" size="80"
	value="https://bellbind.databox.me/profile/card#me"
	/>
	</label>
	<button id="login">check browser logged-in</button>
	</div>
	<div>
	<label>Bins URL
	<input id="bins" size="80"
	value="https://bellbind.databox.me/Inbox/"
	/>
	</label>
	<button id="load">load</button>
	</div>
	<div><button id="append">append an empty bin</button></div>
	<ul id="list"></ul>
	</body>
	</html>

	// Check login state of the WebID to its solid server
	const checkLogin = ev => (async () => {
	const inputWebId = document.getElementById("webid").value.trim();
	//[TBD: how to use non databox.me WebIds?]
	//const endpoint = new URL(inputWebId);
	//endpoint.pathname = endpoint.hash = "";
	//console.log(endpoint.href);
	const webId = await SolidClient.login(inputWebId);
	//const webId = await SolidClient.login(inputWebId, {
	// authEndpoint: endpoint.href});
	//const webId = await SolidClient.login(inputWebId, endpoint.href);
	console.log(`login WebID: ${webId}`);
	if (!webId) {// webId === ""
	alert(`FAIL: ${inputWebId} is not logged-in. go ${inputWebId} to login`);
	location.href = inputWebId;
	} else {// webId === inputWebId ?
	alert(`OK: ${webId} is already logged-in`);
	}
	})().catch(console.error);
	document.getElementById("login").addEventListener("click", checkLogin);

	const appendBin = () => (async () => {
	const $rdf = SolidClient.rdflib;
	const ns = SolidClient.vocab;
	const graph = $rdf.graph();
	const self = $rdf.sym("");
	//[Warning] Relative URIs will fail in future versions
	graph.add(self, ns.dct("title"), "");
	graph.add(self, ns.sioc("content"), "");
	const data = new $rdf.Serializer(graph).toN3(graph);

	const binsUrl = document.getElementById("bins").value.trim();
	const meta = await SolidClient.web.post(binsUrl, data);
	console.log(meta);

	loadBins();
	})().catch(error => {
	console.error(error);
	alert(`fail to append by ${error.message}, check logged-in status`);
	});
	document.getElementById("append").addEventListener("click", appendBin);

	const loadBins = () => (async () => {
	const binsUrl = document.getElementById("bins").value.trim();
	const response = await SolidClient.web.get(binsUrl);
	console.log(response);
	console.log(response.raw());
	console.log(response.isContainer()); // why false??

	//WORKAROUND: access container elements via rdflib
	const $rdf = SolidClient.rdflib;
	const ns = SolidClient.vocab;
	const graph = response.parsedGraph();
	const me = $rdf.sym(response.url);
	const contains = graph.each(me, ns.ldp("contains"), undefined);

	const list = document.getElementById("list");
	for (const child of [...list.children]) child.remove();
	await Promise.all(contains.map(elem => loadContent(elem.uri)));
	})().catch(error => {
	console.error(error);
	alert(`fail to load by ${error.message}, check logged-in status`);
	});
	document.getElementById("load").addEventListener("click", loadBins);

	async function loadContent(uri) {
	const list = document.getElementById("list");
	const id = encodeURIComponent(uri);

	const li = document.createElement("li");
	list.append(li);

	const checkbox = document.createElement("input");
	checkbox.id = id;
	checkbox.type = "checkbox";
	checkbox.checked = true;
	li.append(checkbox);

	const label = document.createElement("label");
	label.textContent = uri;
	label.setAttribute("for", id);
	li.append(label);

	// content data via rdflib
	const response = await SolidClient.web.get(uri);
	console.log(response);
	console.log(response.raw());
	const $rdf = SolidClient.rdflib;
	const ns = SolidClient.vocab;
	const graph = response.parsedGraph();
	const me = $rdf.sym(response.url);
	const title = graph.anyValue(me, ns.dct("title"));
	const content = graph.anyValue(me, ns.sioc("content"));

	const view = document.createElement("div");
	view.classList.add("child");
	li.append(view);
	const titleView = document.createElement("input");
	titleView.size = 80;
	titleView.value = title;
	const contentView = document.createElement("textarea");
	contentView.cols = 80;
	contentView.rows = 25;
	contentView.value = content;
	view.append(titleView);
	view.append(contentView);

	// modification-access buttons
	const buttons = document.createElement("div");
	view.append(buttons);
	const update = document.createElement("button");
	update.textContent = "modify";
	update.addEventListener("click", async ev => {
	const graph = $rdf.graph();
	const self = $rdf.sym("");
	//[Warning] Relative URIs will fail in future versions
	graph.add(self, ns.dct("title"), titleView.value);
	graph.add(self, ns.sioc("content"), contentView.value);
	const data = new $rdf.Serializer(graph).toN3(graph);
	const meta = await SolidClient.web.put(uri, data);
	console.log(meta);
	//loadBins();
	});
	buttons.append(update);

	const remove = document.createElement("button");
	remove.textContent = "remove";
	remove.addEventListener("click", async ev => {
	const meta = await SolidClient.web.del(uri);
	console.log(meta);
	loadBins();
	});
	buttons.append(remove);
	}