-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: creating and updating resources in a component (#67)
* chore: updated handlersjs version and tsconfig * feat: made changes to NodeHttpServer handler structure * feat: created input component with fetch put request
- Loading branch information
Arne Vandoorslaer
authored
May 3, 2021
1 parent
487e4e2
commit b8f5415
Showing
9 changed files
with
7,761 additions
and
7,636 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| /* eslint-disable no-console -- is a web component */ | ||
| import * as N3 from 'n3'; | ||
| import { LitElement, css, html, property } from 'lit-element'; | ||
| import type { Component } from '@digita-ai/semcom-core'; | ||
|
|
||
| export default class InputComponent extends LitElement implements Component { | ||
|
|
||
| data ( | ||
| entry: string, | ||
| customFetch?: (input: RequestInfo, init?: RequestInit) => Promise<Response>, | ||
| ): Promise<void> { | ||
|
|
||
| const myFetch = customFetch ? customFetch : fetch; | ||
| const parser = new N3.Parser(); | ||
| const store = new N3.Store(); | ||
|
|
||
| this.localFetch = myFetch; | ||
| this.localEntry = entry; | ||
|
|
||
| return myFetch(entry) | ||
| .then((response) => response.text()) | ||
| .then((text) => { | ||
| store.addQuads(parser.parse(text)); | ||
| }); | ||
|
|
||
| } | ||
|
|
||
| @property() localFetch?: (input: RequestInfo, init?: RequestInit) => Promise<Response>; | ||
| @property() localEntry?: string; | ||
|
|
||
| static get styles() { | ||
| return [ | ||
| css` | ||
| :host { | ||
| font-family: 'Roboto', sans-serif; | ||
| font-weight: 300; | ||
| } | ||
| .container { | ||
| width: 100%; | ||
| text-align: center; | ||
| padding: 40px 0; | ||
| } | ||
| input[type=text], select { | ||
| width: 100%; | ||
| padding: 12px 20px; | ||
| margin: 8px 0; | ||
| display: inline-block; | ||
| border: 1px solid #ccc; | ||
| border-radius: 4px; | ||
| box-sizing: border-box; | ||
| } | ||
| button { | ||
| width: 100%; | ||
| background-color: #4CAF50; | ||
| color: white; | ||
| padding: 14px 20px; | ||
| margin: 8px 0; | ||
| border: none; | ||
| border-radius: 4px; | ||
| cursor: pointer; | ||
| } | ||
| button[type=submit]:hover { | ||
| background-color: #45a049; | ||
| } | ||
| `, | ||
| ]; | ||
| } | ||
|
|
||
| fetcher = async () => { | ||
| if(this.localFetch && this.localEntry) { | ||
| const inputField = this.shadowRoot?.getElementById('inputField') as HTMLInputElement; | ||
| const uri = this.localEntry.split('/profile')[0] + '/inputTest'; | ||
| await this.localFetch(uri, { method: 'PUT', body: inputField.value, headers: {'content-type': 'text/plain'} }); | ||
| inputField.value = ''; | ||
| } | ||
| }; | ||
|
|
||
| render() { | ||
| return html` | ||
| <div class="container"> | ||
| <label for="name">Your Input:</label> | ||
| <br> | ||
| <input type="text" id="inputField"/> | ||
| <br> | ||
| <button @click="${this.fetcher}" type="submit">Submit</button> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| /* | ||
| * W3C Custom Element Specification (from MDN) | ||
| */ | ||
|
|
||
| // Invoked each time the element is appended into a DOM (i.e. when node is added or moved). | ||
| connectedCallback() { | ||
| super.connectedCallback(); | ||
| console.info('[DGT-InputComponent] Element connected'); | ||
| } | ||
|
|
||
| // Invoked each time the element is disconnected from a DOM. | ||
| disconnectedCallback() { | ||
| super.disconnectedCallback(); | ||
| console.info('[DGT-InputComponent] Element disconnected'); | ||
| } | ||
| // Invoked each time the custom element is moved to a new DOM. | ||
| adoptedCallback() { | ||
| // super.adoptedCallback(); | ||
| console.info('[DGT-InputComponent] Element moved to other DOM'); | ||
| } | ||
|
|
||
| // Invoked each time one of the element's attributes specified in observedAttributes is changed. | ||
| attributeChangedCallback(name: string, oldValue: string, newValue: string) { | ||
| super.attributeChangedCallback(name, oldValue, newValue); | ||
| console.info(`[DGT-InputComponent] Changed ${name} attribute from "${oldValue}" to "${newValue}"`); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.