Hi Im new to javascript and beggining with some early projects, I have a "ui.js" and an "app.js" file with some html and a json server. The ui.js deals with dynamically displaying different information depending on what the user clicks in the browser. When connections in the navbar is click, app.js request info from the json server and ui.js displays the data in a list of cards. Within each of the cards is an edit button, I need to know when the edit button is clicked, but no matter what i try, I can't get it to work, can anyone help to point me in the right direction to just know how to print edit click would be a great help? I have just lost a few hours of my life, and i think i have lost some of my hair :-(
app.js
const ui = new UI;
const http = new EasyHTTP;
const uiData = document.getElementById('data');
const editTanks = document.getElementById('params');
const editConnections = document.getElementById('connections');
const showTankView = document.getElementById('tanks');
// Function to load all event listeners
loadEventListeners();
//Load all events
function loadEventListeners(){
editConnections.addEventListener('click', (e) => {
http.get('http://localhost:3000/connections')
.then(data => ui.showConnections(data))
.catch(err => console.log(err));
e.preventDefault()
});
editTanks.addEventListener('click', (e) => {
ui.showTankParams();
});
showTankView.addEventListener('click', (e) => {
ui.showTanks();
});
}
ui.js
class UI {
constructor() {
this.profile = document.getElementById('data')
}
showConnections(connections) {
const params = document.getElementById('data')
console.log(`Printing incoming data ${connections}`)
const connectionOptionsHeader = `
<div class="container mt-3 mb-5">
<h3>Connections</h3>
<br>
<br>
<div class="row"></div>
<div class="div col-sm">
<button type="button" class="btn btn-success btn-lg btn-block mb-3" id="add-connection">ADD A NEW CONNECTION
<a href="#" class="">
<i class="add-item secondary-content fa fa-plus"></i>
</button>
</a>
</div>
</div>
<div class="container mt-3">
<ul class="connections list-group">`
let connectionOptions = ``
connections.forEach((connection) => {
console.log(connection)
connectionOptions += `
<li class="list-group-item list-group-item-dark mb-3 mt-3" id="${connection.ipAddress}">
<div class="card text-white text-left bg-secondary mb-3 mt-3">
<div class="card-header">${connection.connectionName}
<div class="card-body">
<p class="card-title" id="connection-name">Connection Name: ${connection.connectionName}</p>
<p class="card-text" id="connection-ipAddress">IP Address: ${connection.ipAddress}</p>
<p class="card-text" id="connection-port">Port: ${connection.port}</p>
<p class="card-text" id="connection-status">Network Status: ${connection.connectionStatus}
<i class="fa fa-circle" style="color:rgb(0, 255, 21);"></i>
</p>
<a href="#" class="edit-connection-btn btn btn-warning text-left" >Edit Settings
<i class="edit-item fa fa-pencil text-right"></i>
</a>
</div>
</div>
</div>
</li>`
})
const connectionOptionsFooter = `
</ul>
<br>
<br>
<br>
<h7>Tip: A list of all current connections setup on TFM. Connection status is listed by the LED icon. Green indicates a the device is connected and communicating level data.
Amber indicates the device can be reached but there are issues with level data transmission. Red indicates there is no connection to the device. </h7>
<br>
<br>
</div>`;
params.innerHTML = connectionOptionsHeader + connectionOptions + connectionOptionsFooter;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>Task List</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<div id="main" class="card">
<div class="card-content">
<span class="card-title">Task List</span>
<div class="row">
<form id="task-form">
<div class="input-field col12">
<input type="text" name="task" id="task">
<label for="task">New Task</label>
</div>
<input type="submit" value="Add Task" class="btn">
</form>
</div>
</div>
<div class="card-action">
<h5 id="task-title">Tasks</h5>
<div class="input-field col s12">
<input type="text" name="filter" id="filter">
<label for="filter">Filter Tasks</label>
</div>
<ul class="collection"></ul>
<a href="#" class="clear-tasks btn black">Clear Tasks</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src = "app.js"></script>
</body>
</html>
