This is an automated email from the ASF dual-hosted git repository.
davsclaus pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-kamelets-examples.git
The following commit(s) were added to refs/heads/main by this push:
new f11f0d1 CAMEL-21110: Add html chat example
f11f0d1 is described below
commit f11f0d1c9ff978bf0d185f38853607e327976834
Author: Claus Ibsen <[email protected]>
AuthorDate: Mon Sep 2 16:20:12 2024 +0200
CAMEL-21110: Add html chat example
---
jbang/html-chat/README.adoc | 53 +++++++++++
jbang/html-chat/application.properties | 2 +
jbang/html-chat/index.html | 81 +++++++++++++++++
jbang/html-chat/server.xml | 20 +++++
jbang/html-chat/style.css | 156 +++++++++++++++++++++++++++++++++
5 files changed, 312 insertions(+)
diff --git a/jbang/html-chat/README.adoc b/jbang/html-chat/README.adoc
new file mode 100644
index 0000000..108c0d7
--- /dev/null
+++ b/jbang/html-chat/README.adoc
@@ -0,0 +1,53 @@
+== HTML Chat
+
+This example is a small chat web application.
+
+The web app is the index.html and style.css file that will show the chat
window.
+The Camel route is in the server.xml file, and will return a response to the
chat.
+
+The application.properties file is used to turn on serving the web application
+with the embedded HTTP server in Camel.
+
+=== Install JBang
+
+First install JBang according to https://www.jbang.dev
+
+When JBang is installed then you should be able to run from a shell:
+
+[source,sh]
+----
+$ jbang --version
+----
+
+This will output the version of JBang.
+
+To run this example you can either install Camel on JBang via:
+
+[source,sh]
+----
+$ jbang app install camel@apache/camel
+----
+
+Which allows to run CamelJBang with `camel` as shown below.
+
+=== How to run
+
+Then you can run this example using:
+
+[source,sh]
+----
+$ camel run *
+----
+
+Then you can browse: http://localhost:8080/ to chat with Camel.
+
+
+=== Help and contributions
+
+If you hit any problem using Camel or have some feedback, then please
+https://camel.apache.org/community/support/[let us know].
+
+We also love contributors, so
+https://camel.apache.org/community/contributing/[get involved] :-)
+
+The Camel riders!
diff --git a/jbang/html-chat/application.properties
b/jbang/html-chat/application.properties
new file mode 100644
index 0000000..23e3c1f
--- /dev/null
+++ b/jbang/html-chat/application.properties
@@ -0,0 +1,2 @@
+camel.server.enabled=true
+camel.server.staticEnabled=true
diff --git a/jbang/html-chat/index.html b/jbang/html-chat/index.html
new file mode 100644
index 0000000..659afaa
--- /dev/null
+++ b/jbang/html-chat/index.html
@@ -0,0 +1,81 @@
+<!--index.html file-->
+
+<!DOCTYPE html>
+<html>
+
+<head>
+ <title>Camel Chat Test</title>
+ <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+ <div class="container">
+ <h1 class="logo">Camel Chat Test</h1>
+ <div class="messageArea" id="messageArea"></div>
+ <form class="form" id="form">
+ <div class="input-container">
+ <input class="input" type="text" placeholder="Message"
id="message">
+ <button class="button">Send Message</button>
+ </div>
+ </form>
+ </div>
+
+ <script>
+
+ let idcounter = 0;
+
+ let form = document.getElementById('form');
+ let message = document.getElementById('message');
+ let messageArea = document.getElementById('messageArea');
+
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+
+ if (message.value) {
+ let name = document.createElement('p');
+ name.classList.add('message');
+ name.innerHTML = `<p><span class="username">You:
</span>${message.value}</p>
+ <div id="response${idcounter}">
+ <div style="margin-left:20px"
class="dot-pulse"></div>
+ </div>`;
+ messageArea.appendChild(name);
+ messageArea.scrollTop = messageArea.scrollHeight;
+
+ const xhr = new XMLHttpRequest();
+ xhr.open("POST", window.origin+"/camel/chat");
+ // const body = JSON.stringify({
+ // userId: 1,
+ // title: "Fix my bugs",
+ // completed: false
+ // });
+ xhr.onload = () => {
+ if (xhr.readyState == 4 && xhr.status == 200) {
+ console.log(xhr.responseText);
+ name = document.getElementById('response'+idcounter);
+ name.classList.add('message');
+ name.innerHTML = `<p><span class="username">Camel:
</span>${xhr.responseText}</>`;
+ messageArea.appendChild(name);
+ idcounter++;
+
+ messageArea.scrollTop = messageArea.scrollHeight;
+
+ } else {
+ console.log(`Error: ${xhr.status}`);
+
+ name = document.getElementById('response'+idcounter);
+ name.classList.add('message');
+ name.innerHTML = `<p><span class="username">Camel:
</span>Ups, something went wrong. Please try again.</>`;
+ messageArea.appendChild(name);
+ idcounter++;
+ }
+ };
+ xhr.send(message.value);
+ message.value = '';
+ }
+ });
+
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/jbang/html-chat/server.xml b/jbang/html-chat/server.xml
new file mode 100644
index 0000000..552a02f
--- /dev/null
+++ b/jbang/html-chat/server.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<camel xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance";
+ xmlns="http://camel.apache.org/schema/spring";
+ xsi:schemaLocation="
+ http://camel.apache.org/schema/spring
+ https://camel.apache.org/schema/spring/camel-spring.xsd";>
+
+ <!-- Main Camel Route as Server -->
+ <route>
+ <from uri="platform-http:/camel/chat"/>
+ <log message="Input: ${body}"/>
+ <delay>
+ <simple>${random(500,6000)}</simple>
+ </delay>
+ <setBody>
+ <simple>Hello ${body} I am Camel</simple>
+ </setBody>
+ </route>
+
+</camel>
diff --git a/jbang/html-chat/style.css b/jbang/html-chat/style.css
new file mode 100644
index 0000000..255db8d
--- /dev/null
+++ b/jbang/html-chat/style.css
@@ -0,0 +1,156 @@
+/* style.css */
+
+body {
+ background-color: #90EE90;
+ margin: 0;
+ padding: 0;
+ font-family: Arial, sans-serif;
+}
+
+.container {
+ /*max-width: 400px;*/
+ margin: 50px auto;
+ padding: 20px;
+ background-color: white;
+ border-radius: 10px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.logo {
+ text-align: center;
+ font-size: 24px;
+ font-weight: bold;
+ margin-bottom: 20px;
+ color: #008000;
+}
+
+.form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.input-container {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+}
+
+.input,.button {
+ margin: 20px auto;
+ /*border: 1px solid #ccc;*/
+ border-radius: 5px;
+ padding: 10px;
+ padding-right: 10px;
+ margin-bottom: 10px;
+
+ /*vertical-align: middle;*/
+ width: 80%;
+}
+
+.button {
+ background-color: #008000;
+ color: white;
+ border: none;
+ margin-left: 10px;
+ width: 20%;
+/* border-radius: 5px;
+ padding: 10px;
+ width: 20%;
+ cursor: pointer;
+ margin: 20px;
+*/
+ /*vertical-align: middle;*/
+}
+
+.messageArea {
+ margin-top: 20px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ padding: 10px;
+ height: 200px;
+ overflow-y: scroll;
+}
+
+.message {
+ margin-bottom: 5px;
+}
+
+.username {
+ font-weight: bold;
+ color: #008000;
+}
+
+/**
+ * ==============================================
+ * Dot Pulse
+ * ==============================================
+ */
+ .dot-pulse {
+ position: relative;
+ /* padding: 10px; */
+ left: -9999px;
+ width: 10px;
+ height: 10px;
+ border-radius: 5px;
+ background-color: #008000;
+ color: #008000;
+ box-shadow: 9999px 0 0 -5px;
+ animation: dot-pulse 1.5s infinite linear;
+ animation-delay: 0.25s;
+ }
+ .dot-pulse::before, .dot-pulse::after {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ width: 10px;
+ height: 10px;
+ border-radius: 5px;
+ background-color: #008000;
+ color: #008000;
+ }
+ .dot-pulse::before {
+ box-shadow: 9984px 0 0 -5px;
+ animation: dot-pulse-before 1.5s infinite linear;
+ animation-delay: 0s;
+ }
+ .dot-pulse::after {
+ box-shadow: 10014px 0 0 -5px;
+ animation: dot-pulse-after 1.5s infinite linear;
+ animation-delay: 0.5s;
+ }
+
+ @keyframes dot-pulse-before {
+ 0% {
+ box-shadow: 9984px 0 0 -5px;
+ }
+ 30% {
+ box-shadow: 9984px 0 0 2px;
+ }
+ 60%, 100% {
+ box-shadow: 9984px 0 0 -5px;
+ }
+ }
+ @keyframes dot-pulse {
+ 0% {
+ box-shadow: 9999px 0 0 -5px;
+ }
+ 30% {
+ box-shadow: 9999px 0 0 2px;
+ }
+ 60%, 100% {
+ box-shadow: 9999px 0 0 -5px;
+ }
+ }
+ @keyframes dot-pulse-after {
+ 0% {
+ box-shadow: 10014px 0 0 -5px;
+ }
+ 30% {
+ box-shadow: 10014px 0 0 2px;
+ }
+ 60%, 100% {
+ box-shadow: 10014px 0 0 -5px;
+ }
+ }
\ No newline at end of file
