Skip to content

Commit

Permalink
Add message edit functionality (#13)
Browse files Browse the repository at this point in the history 
* add html for edit form

* update id naming convention to put form type first

* create and wire in edit-handler.js

* move redundant methods to webhook-handler.js

* convert ConditionalInput to class to separate instances
previously instances were pointing to same object and interfering with each other

* disable jscpd for HTML files
opened #15 to come back to this in the future
  • Loading branch information
@thewildmage
thewildmage committed Feb 25, 2022
1 parent 2d15264 commit 10dbe91
Show file tree
Hide file tree
Showing 8 changed files with 302 additions and 147 deletions.
11 changes: 11 additions & 0 deletions .github/linters/.jscpd.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"absolute": true,
"ignore": [
"**/__snapshots__/**",
"**/*.html"
],
"reporters": [
"consoleFull"
],
"threshold": 0
}
169 changes: 140 additions & 29 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,28 +37,28 @@ <h1>Huningto</h1>
<article>
<h2 id="send">Send Message</h2>

<form class="numbered" id="form-send" method="POST">
<form class="numbered" id="send-form">
<section class="flow">
<h3 class="numbered__item">Destination</h3>

<p>
<label for="webhook-url-send">Webhook URL</label>
<label for="send-webhook-url">Webhook URL</label>
<input
id="webhook-url-send"
id="send-webhook-url"
name="action"
type="url"
required
/>
</p>

<p>
<label for="thread-id-send">Thread ID</label>
<span id="thread-id-send-explain"
<label for="send-thread-id">Thread ID</label>
<span id="send-thread-id-explain"
>Leave blank for main channel</span
>
<input
aria-describedby="thread-id-send-explain"
id="thread-id-send"
aria-describedby="send-thread-id-explain"
id="send-thread-id"
name="thread_id"
type="number"
/>
Expand All @@ -73,32 +73,34 @@ <h3 class="numbered__item">Content</h3>

<input
class="js-conditional"
id="from-scratch"
id="send-from-scratch"
name="buildFrom"
type="radio"
value="scratch"
checked
required
/>
<label for="from-scratch">...from scratch.</label>
<label for="send-from-scratch"
>...from scratch.</label
>

<input
class="js-conditional"
id="from-json"
id="send-from-json"
name="buildFrom"
type="radio"
value="json"
required
/>
<label for="from-json"
<label for="send-from-json"
>...from JSON I already have.</label
>
</fieldset>

<p class="js-conditional" data-build-from="scratch">
<label for="message">Message</label>
<label for="send-message">Message</label>
<textarea
id="message"
id="send-message"
maxlength="2000"
name="content"
rows="5"
Expand All @@ -107,9 +109,9 @@ <h3 class="numbered__item">Content</h3>
</p>

<p class="js-conditional" data-build-from="json">
<label for="payload-json">Message JSON</label>
<label for="send-payload-json">Message JSON</label>
<textarea
id="payload-json"
id="send-payload-json"
name="payload_json"
rows="5"
required
Expand All @@ -125,8 +127,8 @@ <h3 class="numbered__item">Finish</h3>
</p>

<p>
<label for="output-send">Server Response</label>
<output id="output-send">(None yet)</output>
<label for="send-output">Server Response</label>
<output id="send-output">(None yet)</output>
</p>
</section>
</form>
Expand All @@ -135,37 +137,37 @@ <h3 class="numbered__item">Finish</h3>
<article>
<h2 id="get">Get Message Content</h2>

<form class="numbered" id="form-get" method="GET">
<form class="numbered" id="get-form">
<section class="flow">
<h3 class="numbered__item">Source</h3>

<p>
<label for="webhook-url-get">Webhook URL</label>
<label for="get-webhook-url">Webhook URL</label>
<input
id="webhook-url-get"
id="get-webhook-url"
name="action"
type="url"
required
/>
</p>

<p>
<label for="thread-id-get">Thread ID</label>
<span id="thread-id-get-explain"
<label for="get-thread-id">Thread ID</label>
<span id="get-thread-id-explain"
>Leave blank for main channel</span
>
<input
aria-describedby="thread-id-get-explain"
id="thread-id-get"
aria-describedby="get-thread-id-explain"
id="get-thread-id"
name="thread_id"
type="number"
/>
</p>

<p>
<label for="message-id-get">Message ID</label>
<label for="get-message-id">Message ID</label>
<input
id="message-id-get"
id="get-message-id"
name="message_id"
type="number"
required
Expand All @@ -181,8 +183,8 @@ <h3 class="numbered__item">Finish</h3>
</p>

<p>
<label for="output-get">Server Response</label>
<output id="output-get">(None yet)</output>
<label for="get-output">Server Response</label>
<output id="get-output">(None yet)</output>
</p>
</section>
</form>
Expand All @@ -191,7 +193,116 @@ <h3 class="numbered__item">Finish</h3>
<article>
<h2 id="edit">Edit Message</h2>

<p>Placeholder for work in progress. Stay tuned.</p>
<form class="numbered" id="edit-form">
<section class="flow">
<h3 class="numbered__item">Source</h3>

<p>
<label for="edit-webhook-url">Webhook URL</label>
<span id="edit-webhook-url-explain"
>Must be the same webhook that was used to send
the message originally</span
>
<input
aria-describedby="edit-webhook-url-explain"
id="edit-webhook-url"
name="action"
type="url"
required
/>
</p>

<p>
<label for="edit-thread-id">Thread ID</label>
<span id="edit-thread-id-explain"
>Leave blank for main channel</span
>
<input
aria-describedby="edit-thread-id-explain"
id="edit-thread-id"
name="thread_id"
type="number"
/>
</p>

<p>
<label for="edit-message-id">Message ID</label>
<input
id="edit-message-id"
name="message_id"
type="number"
required
/>
</p>
</section>

<section class="flow">
<h3 class="numbered__item">Content</h3>

<fieldset>
<legend>I want to build my message...</legend>

<input
class="js-conditional"
id="edit-from-scratch"
name="buildFrom"
type="radio"
value="scratch"
checked
required
/>
<label for="edit-from-scratch"
>...from scratch.</label
>

<input
class="js-conditional"
id="edit-from-json"
name="buildFrom"
type="radio"
value="json"
required
/>
<label for="edit-from-json"
>...from JSON I already have.</label
>
</fieldset>

<p class="js-conditional" data-build-from="scratch">
<label for="edit-message">Message</label>
<textarea
id="edit-message"
maxlength="2000"
name="content"
rows="5"
required
></textarea>
</p>

<p class="js-conditional" data-build-from="json">
<label for="edit-payload-json">Message JSON</label>
<textarea
id="edit-payload-json"
name="payload_json"
rows="5"
required
></textarea>
</p>
</section>

<section class="flow">
<h3 class="numbered__item">Finish</h3>

<p>
<button type="submit">Edit</button>
</p>

<p>
<label for="edit-output">Server Response</label>
<output id="edit-output">(None yet)</output>
</p>
</section>
</form>
</article>
</main>

Expand Down
25 changes: 19 additions & 6 deletions main.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,34 @@
import * as JsCheck from "./modules/js-check.js";
import { SendHandler } from "./modules/send-handler.js";
import * as ConditionalInput from "./modules/conditional-input.js";
import { GetHandler } from "./modules/get-handler.js";
import { EditHandler } from "./modules/edit-handler.js";
import { ConditionalInput } from "./modules/conditional-input.js";

JsCheck.setJsAvailable();

// set up send form
const sendForm = document.getElementById("form-send");
const sendOutput = document.getElementById("output-send");
const sendForm = document.getElementById("send-form");
const sendOutput = document.getElementById("send-output");

const sendHandler = new SendHandler(sendForm, sendOutput);
const sendConditional = new ConditionalInput(sendForm);

sendHandler.register();
ConditionalInput.initialize(sendForm);
sendConditional.register();

// set up get form
const getForm = document.getElementById("form-get");
const getOutput = document.getElementById("output-get");
const getForm = document.getElementById("get-form");
const getOutput = document.getElementById("get-output");
const getHandler = new GetHandler(getForm, getOutput);

getHandler.register();

// set up edit form
const editForm = document.getElementById("edit-form");
const editOutput = document.getElementById("edit-output");

const editHandler = new EditHandler(editForm, editOutput);
const editConditional = new ConditionalInput(editForm);

editHandler.register();
editConditional.register();
Loading

0 comments on commit 10dbe91

Please sign in to comment.