Skip to content

Commit

Permalink
Update settings page
Browse files Browse the repository at this point in the history 
  - use module
  - use web component to render the form

Signed-off-by: yzamir <kobi.zamir@gmail.com>
  • Loading branch information
@yaacov
yaacov committed Sep 12, 2023
1 parent 530fef5 commit 53c301a
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 129 deletions.
73 changes: 73 additions & 0 deletions rose/server/web/settings-form.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
.form {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.form-group {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}

.label {
font-size: 1.2em;
}

.input-field {
flex-grow: 1;
margin-left: 10px;
padding: 10px;
font-size: 1em;
border-radius: 5px;
border: 1px solid #34495e;
background-color: #ecf0f1;
color: #2c3e50;
}

.submit-button {
background-color: #3498db;
color: #ecf0f1;
font-size: 1.2em;
padding: 15px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}

.submit-button:hover {
background-color: #2980b9;
}

.cancel-button {
background-color: #e74c3c; /* Red color for cancel */
color: #fff;
font-size: 1.2em;
padding: 15px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}

.cancel-button:hover {
background-color: #c0392b; /* Darker shade on hover */
}

.form-group {
display: flex;
justify-content: center; /* Adjust as needed; this will space the two buttons evenly apart */
}

/* Assuming you want some spacing between the two buttons */
.submit-button, .cancel-button {
margin: 0 5px; /* Adds 5px margin on both sides of each button */
}

.error-message {
color: red;
margin-top: 10px;
}
82 changes: 82 additions & 0 deletions rose/server/web/settings-form.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
class SettingsForm extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}

connectedCallback() {
this.render();
this.loadDrivers();
this.shadowRoot.querySelector('#submit-button').addEventListener('click', this.sendDrivers.bind(this));
this.shadowRoot.querySelector('#cancel-button').addEventListener('click', this.cancelSetting.bind(this));
}

render() {
this.shadowRoot.innerHTML = `
<link rel="stylesheet" href="./settings-form.css">
<form class="form">
<div class="form-group">
<label for="driver1" class="label">Driver 1:</label>
<input type="text" id="driver1" name="driver1" placeholder="http://driver.student.svc.cluster.local:8081" class="input-field">
</div>
<div class="form-group">
<label for="driver2" class="label">Driver 2:</label>
<input type="text" id="driver2" name="driver2" class="input-field">
</div>
<div class="form-group">
<button type="button" id="submit-button" class="submit-button">Send</button>
<button type="button" id="cancel-button" class="cancel-button">Cancel</button>
</div>
</form>
<div class="error-message" id="error-message"></div>
`;
}

displayError(message) {
const errorMessageElement = this.shadowRoot.getElementById('error-message');
errorMessageElement.textContent = message;
}

async loadDrivers() {
try {
const response = await fetch('/admin', { method: 'POST' });
const data = await response.json();

if (data.drivers && data.drivers.length > 0) {
this.shadowRoot.getElementById('driver1').value = data.drivers[0] ?? "";
this.shadowRoot.getElementById('driver2').value = data.drivers[1] ?? "";
}
} catch (error) {
this.displayError('Error loading drivers: ' + error.message);
}
}

async sendDrivers(event) {
event.preventDefault();

const driver1 = this.shadowRoot.getElementById('driver1').value;
const driver2 = this.shadowRoot.getElementById('driver2').value;

const params = new URLSearchParams();
params.append('drivers', `${driver1},${driver2}`);

try {
const response = await fetch(`/admin?${params}`, { method: 'POST' });

if (response.ok) {
window.location.href = "index.html";
} else {
this.displayError('Error sending drivers: ' + response.statusText);
}
} catch (error) {
this.displayError('Error sending drivers: ' + error.message);
}
}

cancelSetting(event) {
event.preventDefault();
window.location.href = "index.html";
}
}

customElements.define('settings-form', SettingsForm);
65 changes: 0 additions & 65 deletions rose/server/web/settings.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,69 +16,4 @@ body.dark-theme {

.form {
width: 60%;
display: flex;
flex-direction: column;
align-items: center;
}

.form-group {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}

.label {
font-size: 1.2em;
}

.input-field {
flex-grow: 1;
margin-left: 10px;
padding: 10px;
font-size: 1em;
border-radius: 5px;
border: 1px solid #34495e;
background-color: #ecf0f1;
color: #2c3e50;
}

.submit-button {
background-color: #3498db;
color: #ecf0f1;
font-size: 1.2em;
padding: 15px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}

.submit-button:hover {
background-color: #2980b9;
}

.cancel-button {
background-color: #e74c3c; /* Red color for cancel */
color: #fff;
font-size: 1.2em;
padding: 15px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}

.cancel-button:hover {
background-color: #c0392b; /* Darker shade on hover */
}

.form-group {
display: flex;
justify-content: center; /* Adjust as needed; this will space the two buttons evenly apart */
}

/* Assuming you want some spacing between the two buttons */
.submit-button, .cancel-button {
margin: 0 5px; /* Adds 5px margin on both sides of each button */
}
68 changes: 4 additions & 64 deletions rose/server/web/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,72 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Drivers</title>
<link rel="stylesheet" href="settings.css">
<script>
function loadDrivers() {
// Fetch data from the server
fetch('/admin', {
method: 'POST'
})
.then(response => response.json())
.then(data => {
// Check if the drivers field exists and has at least 2 entries
if (data.drivers && data.drivers.length > 0) {
document.getElementById('driver1').value = data.drivers[0] ?? "";
document.getElementById('driver2').value = data.drivers[1] ?? "";
}
})
.catch(error => {
console.error('Error:', error);
});
}

function cancelSetting() {
window.location.href = "index.html";
}

function sendDrivers(event) {
// Prevent the form from submitting in the traditional way
event.preventDefault();

const driver1 = document.getElementById('driver1').value;
const driver2 = document.getElementById('driver2').value;
const formattedData = `drivers=${driver1},${driver2}`;

// Send the formatted data to the server using an AJAX POST request
fetch(`/admin?${formattedData}`, {
method: 'POST'
})
.then(response => {
if(response.ok) {
// If the POST request was successful, redirect to index.html
window.location.href = "index.html";
} else {
console.error('Error:', response.statusText);
}
})
.catch(error => {
console.error('Error:', error);
});
}

document.addEventListener('DOMContentLoaded', loadDrivers);
</script>
</head>
<body class="dark-theme">
<h2 class="heading">Set Game Drivers</h2>
<form onsubmit="sendDrivers(event)" class="form">
<div class="form-group">
<label for="driver1" class="label">Driver 1:</label>
<input type="text" id="driver1" name="driver1" placeholder="http://127.0.0.1:8081" class="input-field">
</div>
<div class="form-group">
<label for="driver2" class="label">Driver 2:</label>
<input type="text" id="driver2" name="driver2" class="input-field">
</div>
<div class="form-group">
<button type="submit" class="submit-button">Send</button>
<button type="button" class="cancel-button" onclick="cancelSetting()">Cancel</button>
</div>
</form>
<settings-form class="form" />

<script type="module" src="./settings-form.js"></script>
</body>

</html>

0 comments on commit 53c301a

Please sign in to comment.