ça fait presque peur !
Je ne suis pas programmeur et j’ai demandé de l’aide à ce chatGPT car je sais qu’en code, il est très fort, il a lu tous les manuels de programmation contrairement à moi.
Mon problème était le suivant avec Node-RED.
Dans un bloc code, je copie en msg
en msg1
et msg2
.
var msg1 = msg;
var msg2 = msg;
Ensuite, je modifie msg1
puis je modifie msg2
.
msg1.payload.value = index;
msg2.payload.value = index_reel;
Et ben, msg1
était aussi modifié et prenait la même valeur msg2
alors que les index étaient bien différents. Je me doutais un peu d’un problème de pointeur mais que faire ?
Après discussion avec le bot, il me sort une première solution.
var msg1 = Object.assign({}, msg);
var msg2 = Object.assign({}, msg);
Je lui explique que ça ne fonctionne pas, il me dit de vérifier plusieurs trucs. Je lui dis tout est ok. Puis, il me sort une solution de la dernière chance en me disant que si ce n’était pas ça, il ne pouvait plus m’aider.
var msg1 = JSON.parse(JSON.stringify(msg));
var msg2 = JSON.parse(JSON.stringify(msg));
Et là, c’était bon, alors je lui ai fait un calin pour le remercier . Il était content et moi aussi. ChatGPT m’a fait gagner un temps fou. Je n’aurais jamais trouvé une solution pareille !
Donc, ouais, je pense que ChatGPT pourrait aider pas mal de gens de ce forum sur les problèmes déjà rencontrés.
Sauf que le code est pas fou … et marchera pas toujours. Il vaut mieux utiliser clone …
Ça me fait penser aux vieux (dans le bon sens du terme) qui on lu et fait plein de choses mais te sortent des solutions pas très modernes …
Peut-être, mais quand tu connais pas, c’est révolutionnaire !
Je lui reposerai la question. D’ici là, il sera plus intelligent.
Et peut-être qu’il me donnera une solution plus « moderne »
La question est de savoir si l’on veux juste faire quelque chose qui fonctionne plus ou moins ou comprendre ce que l’on fait.
A mon avis, il est plus instructif et efficace de lire les docs. Mais ce genre d’outils peut tout de même être utille en te mettant sur une piste qui te permettra de faire une recherche plus approfondie dans les docs et tutoriels.
HA a tranché la question: Want to help others? Leave your AI at the door
après stackoverflow, bien sur (Why posting GPT and ChatGPT generated answers is not currently acceptable - Help Center - Stack Overflow)
je connais rien en programation je lui est demander de me faire une page web pour noté mes kilometres au fur et a mesure de la semaine et me faire un historique. aprés 1h de modif :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RexKM V3</title>
<link rel="stylesheet" href="kmv3.css">
</head>
<body>
<div class="toggle-btn" onclick="toggleDarkMode()">
<i class="toggle-icon">☀️</i>
<i class="toggle-icon dark-mode">🌙</i>
</div>
<h1>RexKM V3</h1>
<div class="table-container">
<table>
<thead>
<tr>
<th>Jour</th>
<th>Kilomètres</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lundi</td>
<td><input type="number" id="lundi"></td>
</tr>
<tr>
<td>Mardi</td>
<td><input type="number" id="mardi"></td>
</tr>
<tr>
<td>Mercredi</td>
<td><input type="number" id="mercredi"></td>
</tr>
<tr>
<td>Jeudi</td>
<td><input type="number" id="jeudi"></td>
</tr>
<tr>
<td>Vendredi</td>
<td><input type="number" id="vendredi"></td>
</tr>
<tr>
<td>Samedi</td>
<td><input type="number" id="samedi"></td>
</tr>
<tr>
<td>Dimanche</td>
<td><input type="number" id="dimanche"></td>
</tr>
</tbody>
</table>
</div>
<div class="buttons-container">
<button id="enregistrer">Enregistrer</button>
<button id="fin-semaine">Fin de semaine</button>
<button id="historique">Historique</button>
<button id="vider">Vider</button>
</div>
<table id="historique-table" style="display:none">
<thead>
<tr>
<th>Date</th>
<th>Lundi</th>
<th>Mardi</th>
<th>Mercredi</th>
<th>Jeudi</th>
<th>Vendredi</th>
<th>Samedi</th>
<th>Dimanche</th>
</tr>
</thead>
<tbody>
<!-- Les données de l'historique seront ajoutées ici par JavaScript -->
</tbody>
</table>
<script src="kmv3.js"></script>
</body>
</html>
un css demandé dans le style apple :
/* Thème par défaut */
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
background-color: #F2F2F2;
}
h1 {
text-align: center;
margin-top: 20px;
font-weight: bold;
font-size: 28px;
color: #000;
}
.table-container {
margin-top: 20px;
margin-left: 40px;
margin-right: 40px;
overflow-x: auto;
max-width: 100%;
}
table {
border-collapse: collapse;
width: 100%;
border-radius: 10px;
overflow: hidden;
}
th, td {
padding: 20px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #F7F7F7;
font-weight: bold;
color: #000;
}
input[type=number] {
width: 100%;
border: none;
text-align: center;
padding: 10px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.buttons-container {
margin-top: 20px;
text-align: center;
}
.button-row {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.button-row button {
background-color: #007AFF;
color: #fff;
padding: 14px 20px;
margin: 8px;
border: none;
cursor: pointer;
width: 100%;
max-width: 300px;
flex-grow: 1;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
}
button:hover {
opacity: 0.8;
}
/* Thème sombre */
body.dark-mode {
background-color: #000;
color: #fff;
}
.dark-mode h1 {
color: #fff;
}
.dark-mode th {
background-color: #111;
color: #fff;
}
.dark-mode input[type=number] {
background-color: #222;
color: #fff;
}
.dark-mode button {
background-color: #9E9E9E;
}
.dark-mode button:hover {
opacity: 0.8;
}
/* Bouton de bascule */
.toggle-btn {
position: fixed;
top: 20px;
right: 20px;
background-color: #fff;
border-radius: 50%;
height: 40px;
width: 40px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
}
.toggle-btn:hover {
opacity: 0.8;
}
.toggle-icon {
color: #007AFF;
font-size: 20px;
}
.toggle-icon.dark-mode {
color: #fff;
}
et un js :
let lundi = document.getElementById("lundi");
let mardi = document.getElementById("mardi");
let mercredi = document.getElementById("mercredi");
let jeudi = document.getElementById("jeudi");
let vendredi = document.getElementById("vendredi");
let samedi = document.getElementById("samedi");
let dimanche = document.getElementById("dimanche");
document.getElementById("enregistrer").addEventListener("click", function() {
localStorage.setItem("lundi", lundi.value);
localStorage.setItem("mardi", mardi.value);
localStorage.setItem("mercredi", mercredi.value);
localStorage.setItem("jeudi", jeudi.value);
localStorage.setItem("vendredi", vendredi.value);
localStorage.setItem("samedi", samedi.value);
localStorage.setItem("dimanche", dimanche.value);
alert("Enregistrement effectué")
});
function chargerKilometres() {
lundi.value = localStorage.getItem("lundi");
mardi.value = localStorage.getItem("mardi");
mercredi.value = localStorage.getItem("mercredi");
jeudi.value = localStorage.getItem("jeudi");
vendredi.value = localStorage.getItem("vendredi");
samedi.value = localStorage.getItem("samedi");
dimanche.value = localStorage.getItem("dimanche");
}
chargerKilometres();
document.getElementById('fin-semaine').addEventListener('click', () => {
const historiqueTable = document.getElementById('historique-table');
if (historiqueTable) {
// Récupération des données de la semaine courante
const lundiKm = localStorage.getItem("lundi");
const mardiKm = localStorage.getItem("mardi");
const mercrediKm = localStorage.getItem("mercredi");
const jeudiKm = localStorage.getItem("jeudi");
const vendrediKm = localStorage.getItem("vendredi");
const samediKm = localStorage.getItem("samedi");
const dimancheKm = localStorage.getItem("dimanche");
const currentDate = new Date().toLocaleDateString();
// Création d'un objet contenant les données de la semaine courante
const semaineCourante = {
date: currentDate,
lundi: lundiKm,
mardi: mardiKm,
mercredi: mercrediKm,
jeudi: jeudiKm,
vendredi: vendrediKm,
samedi: samediKm,
dimanche: dimancheKm,
};
// Récupération des données existantes de l'historique
let historique = JSON.parse(localStorage.getItem('historique')) || [];
// Ajout des données de la semaine courante à l'historique
historique.push(semaineCourante);
// Tri des données par date
historique.sort((a, b) => {
return new Date(b.date) - new Date(a.date);
});
// Stockage des données triées dans le local storage
localStorage.setItem('historique', JSON.stringify(historique));
// Affichage des données triées dans le tableau d'historique
let html = '';
for (const semaine of historique) {
html += '<tr>';
html += '<td>' + semaine.date + '</td>';
html += '<td>' + semaine.lundi + '</td>';
html += '<td>' + semaine.mardi + '</td>';
html += '<td>' + semaine.mercredi + '</td>';
html += '<td>' + semaine.jeudi + '</td>';
html += '<td>' + semaine.vendredi + '</td>';
html += '<td>' + semaine.samedi + '</td>';
html += '<td>' + semaine.dimanche + '</td>';
html += '</tr>';
}
historiqueTable.querySelector('tbody').innerHTML = html;
}
localStorage.removeItem("lundi");
localStorage.removeItem("mardi");
localStorage.removeItem("mercredi");
localStorage.removeItem("jeudi");
localStorage.removeItem("vendredi");
localStorage.removeItem("samedi");
localStorage.removeItem("dimanche");
alert("Enregistrement effectué")
location.reload();
});
document.getElementById('historique').addEventListener('click', () => {
const historiqueTable = document.getElementById('historique-table');
// Récupération des données existantes de l'historique
let historique = JSON.parse(localStorage.getItem('historique')) || [];
// Tri des données par date
historique.sort((a, b) => {
return new Date(b.date) - new Date(a.date);
});
// Stockage des données triées dans le local storage
localStorage.setItem('historique', JSON.stringify(historique));
// Affichage des données triées dans le tableau d'historique
let html = '';
for (const semaine of historique) {
html += '<tr>';
html += '<td>' + semaine.date + '</td>';
html += '<td>' + semaine.lundi + '</td>';
html += '<td>' + semaine.mardi + '</td>';
html += '<td>' + semaine.mercredi + '</td>';
html += '<td>' + semaine.jeudi + '</td>';
html += '<td>' + semaine.vendredi + '</td>';
html += '<td>' + semaine.samedi + '</td>';
html += '<td>' + semaine.dimanche + '</td>';
html += '</tr>';
}
historiqueTable.querySelector('tbody').innerHTML = html;
// Affichage ou masquage du tableau d'historique
if (historiqueTable.style.display === 'none') {
historiqueTable.style.display = 'table';
} else {
historiqueTable.style.display = 'none';
}
});
document.getElementById('vider').addEventListener('click', () => {
const historiqueTable = document.getElementById('historique-table');
if(confirm("Êtes-vous sûr de vouloir vider ?")) {
localStorage.clear();
location.reload();
}
});
document.addEventListener("DOMContentLoaded", function() {
chargerKilometres();
});
const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;
toggleButton.addEventListener('click', function() {
body.classList.toggle('dark-mode');
});
function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
}
function chargerHistorique() {
const historiqueTable = document.getElementById("historique-table");
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key.startsWith("historique-")) {
const value = localStorage.getItem(key);
const [dateStr, lundi, mardi, mercredi, jeudi, vendredi, samedi, dimanche] = value.split(",");
const row = historiqueTable.insertRow(-1);
const dateCell = row.insertCell(0);
const lundiCell = row.insertCell(1);
const mardiCell = row.insertCell(2);
const mercrediCell = row.insertCell(3);
const jeudiCell = row.insertCell(4);
const vendrediCell = row.insertCell(5);
const samediCell = row.insertCell(6);
const dimancheCell = row.insertCell(7);
dateCell.textContent = dateStr;
lundiCell.textContent = lundi;
mardiCell.textContent = mardi;
mercrediCell.textContent = mercredi;
jeudiCell.textContent = jeudi;
vendrediCell.textContent = vendredi;
samediCell.textContent = samedi;
dimancheCell.textContent = dimanche;
}
}
}
chargerHistorique();
le tout est fonctionnel
donc merci chatGPT
il a meme mis des commentaire pour comprendre ce qu’il fait et ppourquoi est ca c’est cool car j’apprend
Le problème c’est que le stockage est relativement éphémère. Un cache vidé et un changement de tel ou pc ou navigateur et tu n’auras plus tes données.
c’est volontaire le but etant que la page soit partager avec les colegues donc chacun ses kilometres. le stockage c’est une a deux semaine aprés on click sur vider ^^
aprés y’a moyen de stocker ailleur que dans le cache avec chacun sont kilometrage ?
desolé question surement naive mais je n’y connait vraiment rien de rien
Fichier json par exemple
Effectivement vu ton besoin ça suffit a faire le boulot. Après sinon c’est sauvegarde dans une base de données mais ça rajoute un peu de complexité surtout si tu partage la page ça fait de l’ajout d’authentification etc
ducoup avec un json c’est monoutilisateur et base de donnée il faut une authentification ect ce qui est nettement plus complex…
merci pour les info je me coucherai moins bete
Ha oui un Json sinon plus simple effectivement. Ça m’a échappé. Faudra juste le chargé et décharger manuellement.
voila ce que me dit chatGPT
Oui, vous pouvez stocker les données dans un fichier JSON à la place du stockage dans le cache du navigateur. Voici comment vous pouvez le faire:
- Créez un fichier JSON vide avec un nom de fichier approprié, par exemple « data.json ».
- Lorsque vous enregistrez les kilomètres dans votre application, créez un objet JSON avec les données et enregistrez-le dans le fichier JSON. Voici un exemple de code:
javascriptCopy code
let data = {
lundi: lundi.value,
mardi: mardi.value,
mercredi: mercredi.value,
jeudi: jeudi.value,
vendredi: vendredi.value,
samedi: samedi.value,
dimanche: dimanche.value
};
fs.writeFile('data.json', JSON.stringify(data), function (err) {
if (err) throw err;
console.log('Données enregistrées dans le fichier data.json');
});
- Lorsque vous chargez l’application, vous pouvez lire les données à partir du fichier JSON et les utiliser pour initialiser les champs de saisie. Voici un exemple de code:
javascriptCopy code
fs.readFile('data.json', function (err, data) {
if (err) throw err;
let jsonData = JSON.parse(data);
lundi.value = jsonData.lundi;
mardi.value = jsonData.mardi;
mercredi.value = jsonData.mercredi;
jeudi.value = jsonData.jeudi;
vendredi.value = jsonData.vendredi;
samedi.value = jsonData.samedi;
dimanche.value = jsonData.dimanche;
console.log('Données chargées depuis le fichier data.json');
});
Notez que pour utiliser le stockage de fichiers dans Node.js, vous devez inclure le module « fs » (file system) dans votre application.
Une fois détourné, il est génial ce chat gpt.
https://youtu.be/fhJK4Gjrj6k
Vivement le plugin pour jeedom😅