<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yealink Keypad Toetsen</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<h1>Yealink Keypad Toetsen</h1>
<input type="file" id="file-input" accept=".xls,.xlsx" />
<button onclick="importKeys()">Importeer Toetsen</button>
<button onclick="generateConfig()">Genereer Configuratie</button></br>
<div class="container">
<div id="keypad-list" class="list-group">
<!-- Toetsen zullen hier worden weergegeven -->
</div>
<textarea rows="50" cols="80" id="config-output"></textarea>
</div>
<script src="https://unpkg.com/sortablejs@1.14.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script>
// Functie om toetsen te importeren vanuit een XLS-bestand
function importKeys() {
var fileInput = document.getElementById('file-input');
var keypadList = document.getElementById('keypad-list');
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = new Uint8Array(e.target.result);
var workbook = XLSX.read(data, {type: 'array'});
// Annuleer de vorige toetsen
keypadList.innerHTML = '';
// Itereer over elke sheet in de workbook
workbook.SheetNames.forEach(function(sheetName) {
var worksheet = workbook.Sheets[sheetName];
// Itereer over elke rij in het werkblad
XLSX.utils.sheet_to_json(worksheet, { header: 1 }).forEach(function(row, index) {
// Negeer lege rijen
if (typeof row[0] !== 'undefined') {
var key = row[0]; // Kolom 1 als sleutel
}else {
var key = ""; // Kolom 1 als sleutel
}
if (typeof row[1] !== 'undefined') {
var value = row[1]; // Kolom 1 als sleutel
}else {
var value = ""; // Kolom 1 als sleutel
}
const divContainer = document.createElement("div");
divContainer.classList.add("list-group-item");
//div1.appendChild(divContainer);
// 2 Divs in container
const divID = document.createElement("div");
const divKey = document.createElement("div");
const divVal = document.createElement("div");
const divDel = document.createElement("div");
divID.classList.add("id");
divID.setAttribute('data-id' ,index + 1);
divID.innerText = index + 1;
divKey.classList.add("key-item");
divKey.innerHTML = "<input class='key' value='" + key + "'>";
divVal.classList.add("val-item");
divVal.innerHTML = "<input class='value' value='" + value + "'>";
divDel.classList.add("action");
//divDel.innerHTML = "<span onclick='removeItem(this)'>del</span>";
divDel.innerHTML = '<button onclick="removeItem(this)">Remove</button>' +
'<button onclick="addItem(this)">Add</button>';
divContainer.appendChild(divID);
divContainer.appendChild(divKey);
divContainer.appendChild(divVal);
divContainer.appendChild(divDel);
keypadList.appendChild(divContainer);
// Voeg elke toets toe aan de lijst
});
});
// Maak de lijst sorteervaar met SortableJS
};
reader.readAsArrayBuffer(file);
update();
}
function update(evt){
//console.log(evt);
var keypadList = document.getElementById('keypad-list');
var keys = keypadList.getElementsByClassName('list-group-item');
keypadList.querySelectorAll('.separator').forEach(e => e.remove());
Array.from(keys).forEach(function(key, index) {
if ((index + 1) % 20 === 0) {
const separator = document.createElement('div');
separator.className = 'separator';
separator.innerText = 'Header';
key.parentNode.insertBefore(separator, key.nextSibling);
}
key.querySelectorAll('[data-id]')[0].innerText = index + 1;
});
}
function addItem(item) {
const divContainer = document.createElement("div");
divContainer.classList.add("list-group-item");
//div1.appendChild(divContainer);
// 2 Divs in container
const divID = document.createElement("div");
const divKey = document.createElement("div");
const divVal = document.createElement("div");
const divDel = document.createElement("div");
divID.classList.add("id");
divID.setAttribute('data-id' , 0);
//divID.innerText = item.index + 1;
//divKey.classList.add("key");
divKey.classList.add("key-item");
divKey.innerHTML = "<input class='key'>";
//divVal.classList.add("val");
divVal.classList.add("val-item");
divVal.innerHTML = "<input class='value'>";
divDel.classList.add("action");
//divDel.innerHTML = "<span onclick='removeItem(this)'>del</span>";
divDel.innerHTML = '<button onclick="removeItem(this)">Remove</button>' +
'<button onclick="addItem(this)">Add</button>';
divContainer.appendChild(divID);
divContainer.appendChild(divKey);
divContainer.appendChild(divVal);
divContainer.appendChild(divDel);
item.parentNode.parentNode.after(divContainer);
update(item.index);
}
// Function to remove an item from the sortable list
function removeItem(button) {
var item = button.parentNode.parentNode;
item.parentNode.removeChild(item);
}
// Toon de nieuwe positie van de toetsen
function showKeysPosition(evt) {
return evt.newIndex;
//alert("Nieuwe Positie:\n" + positions.join('\n'));
}
// Genereer de Yealink Extensionpad-configuratie
function generateConfig() {
var keypadList = document.getElementById('keypad-list');
var keys = keypadList.getElementsByClassName('list-group-item');
var configOutput = document.getElementById('config-output');
configOutput.value = "";
var moduleCounter = 1;
var keyCounter = 1;
Array.from(keys).forEach(function(key, index) {
// Maximaal 60 toetsen per module
if (keyCounter > 60) {
moduleCounter++;
keyCounter = 1;
}
var label = key.getElementsByClassName("key")[0].value;
var value = key.getElementsByClassName("value")[0].value;
if (value == ""){
var keytype = 0;
}else{
var keytype = 16
}
var configLine = `expansion_module.${moduleCounter}.key.${keyCounter}.label = ${label}\n`;
configLine += `expansion_module.${moduleCounter}.key.${keyCounter}.line = 1\n`;
configLine += `expansion_module.${moduleCounter}.key.${keyCounter}.type = ${keytype}\n`;
configLine += `expansion_module.${moduleCounter}.key.${keyCounter}.value = ${value}\n\n`;
configOutput.value += configLine;
keyCounter++;
});
}
function start(){
for (var i = 1; i <= 60; i++) {
startAddItem(i);
}
update();
}
var keypadList = document.getElementById('keypad-list');
var sortable = new Sortable(keypadList, {
animation: 150,
dataIdAttr: 'data-id',
ghostClass: 'blue-background-class',
axis: 'y',
scroll:false,
direction: 'vertical',
onEnd: function (evt) {
update(evt);
},
onUpdate: function (evt) {
update(evt);
},
});
function startAddItem(index) {
var newItem = document.createElement('div');
newItem.className = (index <= 20) ? 'list-group-item sticky-item' : 'list-group-item';
newItem.innerHTML = '<div class="id">' + index + '</div><div class="key-item"><input class="key"></div><div class="val-item"><input class="value"></div><div class="action"><button onclick="removeItem(this)">Remove</button><button onclick="addItem(this)">Add</button></div>';
document.getElementById('keypad-list').appendChild(newItem);
}
</script>
</body>
</html>