Elxis CMS Forum
Ελληνικό Forum => Πρόσθετα => Topic started by: Blacksoll on May 17, 2025, 13:55:48
-
Καλησπέρα !
Έχω βρεί έτοιμο σχεδόν ένα calculator απο το GitHub, το τροποποίησα & μετάφρασα κατά τις ανάγκες μου και προσπάθησα να το ενσωματώσω σε ένα άρθρο. Εκεί έγινε ο κακός χαμός. Το άρθρο απο το backend μετά δεν ήταν προσβάσιμο για edit. Έπαιξα με διάφορα στον κώδικα αλλά δεν έβγαλα άκρη. Αρχάριος βλέπεις.....
Το καθαρό html το έχω ανεβάσει εδώ (https://ktirioservice.gr/heatpumprunningcost.html).
Πώς μπορώ να το ενσωματώσω σε άρθρο ?
Ο κώδικας του html είναι ο παρακάτω:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Κόστος χρήσης λέβητα πετρελαίου vs αντλίας θερμότητος</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
min-height: 100vh;
display: flex;
align-items: center;
}
.narrow-input {
max-width: 150px; /* Adjust this value as needed */
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
<div class="card shadow">
<div class="card-body">
<h2 class="card-title text-center mb-2">Κόστος χρήσης λέβητα πετρελαίου σε σύγκριση με αντλία θερμότητος</h2>
<div class="mb-2">
<label for="oil" class="form-label">Κόστος λίτρου πετρελαίου (€)</label>
<input type="number" id="oil" class="form-control narrow-input" value="1.10" step="0.01">
</div>
<div class="mb-2">
<label for="eff" class="form-label">Βαθμός απόδοσης λέβητα % (Συμπύκνωσης 93% Συμβατικός 70%)</label>
<input type="number" id="eff" class="form-control narrow-input" value="70">
</div>
<div class="mb-2">
<label for="OilkW" class="form-label">Ενέργεια πετρελαίου ανά λίτρο (10.36 kW Google)</label>
<input type="number" id="OilkW" class="form-control narrow-input" value="10.36" step="0.01">
</div>
<div class="mb-2">
<label for="electric" class="form-label">Κόστος κιλοβατώρας (€ kWh)</label>
<input type="number" id="electric" class="form-control narrow-input" value="0.2486" step="0.001">
</div>
<div class="mb-2">
<label for="scop" class="form-label">Βαθμός απόδοσης αντλίας SCOP (3 - 5 Σύνηθες 3.6)</label>
<input type="number" id="scop" class="form-control narrow-input" value="3.6" step="0.01" min="1" max="10">
</div>
<div class="mt-2">
<p>Κόστος κιλοβατώρας θέρμανσης πετρελαίου: <b>€</b><span id="oilResult" class="fw-bold"></span></p>
<p>Κόστος κιλοβατώρας θέρμανσης αντλίας: <b>€</b><span id="heatPumpResult" class="fw-bold"></span></p>
<p>Υπολογισμός: Η αντλία θερμότητος έχει κόστος χρήσης <span id="result" class="fw-bold"></span><b>%</b> σε σχέση με τον λέβητα πετρελαίου.</p>
<p>Νικητής: <span id="winner" class="fw-bold"></span></p>
</div>
<div>
Ο παρών υπολογισμός αποτελεί ένα γρήγορο & ενδεικτικό οδηγό. Τα αποτελέσματα μπορούν να διαφέρουν ανάλογα με τις κλιματικές συνθήκες, την ποιότητα της μόνωσης του κτιρίου και τις πραγματικές ενεργειακές ανάγκες.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 JS (optional, only needed if you're using Bootstrap's JavaScript components) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
function calculate() {
const oil = parseFloat(document.getElementById('oil').value);
const eff = parseFloat(document.getElementById('eff').value);
const oilkW = parseFloat(document.getElementById('OilkW').value);
const electric = parseFloat(document.getElementById('electric').value);
const scop = parseFloat(document.getElementById('scop').value);
if (isNaN(oil) || isNaN(eff) || isNaN(oilkW) || isNaN(electric) || isNaN(scop)) {
document.getElementById('result').textContent = "Please enter valid numbers";
} else {
const oilResult = (oil / oilkW) / (eff / 100);
const heatPumpResult = (electric / scop);
document.getElementById('heatPumpResult').textContent = heatPumpResult.toFixed(3);
document.getElementById('oilResult').textContent = oilResult.toFixed(3);
document.getElementById('result').textContent = ((heatPumpResult / oilResult) * 100 -100).toFixed(2);
if (heatPumpResult < oilResult) {
document.getElementById('winner').textContent = "Αντλία θερμότητος"
}
else{
document.getElementById('winner').textContent = "Λέβητας πετρελαίου"
}
}
}
// Add event listeners to input fields
document.getElementById('oil').addEventListener('input', calculate);
document.getElementById('eff').addEventListener('input', calculate);
document.getElementById('OilkW').addEventListener('input', calculate);
document.getElementById('electric').addEventListener('input', calculate);
document.getElementById('scop').addEventListener('input', calculate);
// Call calculate when the page loads
window.addEventListener('load', calculate);
</script>
</body>
</html>
-
Ρε μάστορα τι έκανες εκεί; Έβαλες ολόκληρη html σελίδα, όχι απλά τον κώδικα που θες. Εννοείται θα καταστραφεί η html του site. Στον editor θα βάλεις μόνο τη βασική html. css και javascript πρέπει να φορτωθούν στο head του site μέσω του template σου. Το bootstrap δεν χρειάζεται, μπορείς να χρησιμοποιήσεις ενσωματωμένη στο elxis μορφοποίηση με τις γραμμές που κάνει το Elxis στις φόρμες. Οπότε στο head φορτώνεις μόνο το αρχείο javascript με τη συνάρτηση calculate.
Παράδειγμα:
<div class="elx5_formrow">
<label class="elx5_label" for="oil">Κόστος λίτρου πετρελαίου (€)</label>
<div class="elx5_labelside">
<input type="number" id="oil" class="elx5_text elx5_minitext" value="1.10" step="0.01" onchange="calculate();">
</div>
</div>
-
Ρε μάστορα τι έκανες εκεί; Έβαλες ολόκληρη html σελίδα, όχι απλά τον κώδικα που θες. Εννοείται θα καταστραφεί η html του site.
Χα, χα, χα !!! ;D ;D
Τώρα που το αναφέρεις, έχεις δίκιο αλλά όταν πάτησα το paste μου φάνηκε καλή ιδέα ! Που να δείς άλλα που έχω κάνει........Πού θα πάει, θα μάθω. Έχω κοπιάρει και τρέχω το site σε xampp offline και πρώτα κάνω τις δοκιμές εκεί πλέον γιατί κανά - δύο φορές όχι το Elxis, ούτε ο server δεν γλύτωσε ! :P :P :P
Γιατί νομίζεις ότι ζήτησα στα feature requests restore function ? Έτσι τυχαία ?
Θα το παλέψω να το φτιάξω σύμφωνα με το παράδειγμα !