homebridge-melcloud-control 3.0.7-beta.19 → 3.0.7-beta.20

package/homebridge-ui/public/index.html

@@ -1,10 +1,58 @@
-<div style="text-align: center;">
-  </divstyle>
+<div style="text-align: center;"></divstyle>
   <img src="homebridge-melcloud-control.png" alt="Image" height="150" />
 </div>
 
-<div id="melCloudTabs">
-  <!-- Tabs will be dynamically inserted here -->
+<div id="accounts">
+</div>
+
+<div id="melCloudAccount" style="display: none;" class="card card-body">
+  <form id="configForm">
+    <div class="text-center">
+      <label id="accountName" style="font-size: 23px">Account</label><br>
+      <label id="info" style="text-align: center; font-size: 17px;">MELCloud</label><br><br>
+    </div>
+    <div class="form-group">
+      <label for="name">Name</label>
+      <input id="name" type="text" class="form-control"><br>
+      <label for="user">User Name</label>
+      <input id="user" type="text" class="form-control"><br>
+      <label for="passwd">Password</label>
+      <input id="passwd" type="password" class="form-control"><br>
+      <label for="language">Language</label>
+      <select id="language" name="language" class="form-control"><br>
+        <option value="0">English</option>
+        <option value="1">Български</option>
+        <option value="2">Čeština</option>
+        <option value="3">Dansk</option>
+        <option value="4">Deutsch</option>
+        <option value="5">Eesti</option>
+        <option value="6">Español</option>
+        <option value="7">Français</option>
+        <option value="8">Հայերեն</option>
+        <option value="9">Latviešu</option>
+        <option value="10">Lietuvių</option>
+        <option value="11">Magyar</option>
+        <option value="12">Nederlands</option>
+        <option value="13">Norwegian</option>
+        <option value="14">Polski</option>
+        <option value="15">Português</option>
+        <option value="16">Русский</option>
+        <option value="17">Suomi</option>
+        <option value="18">Svenska</option>
+        <option value="19">Svenska</option>
+        <option value="20">Українська</option>
+        <option value="21">Türkçe</option>
+        <option value="22">Ελληνικά</option>
+        <option value="23">Hrvatski</option>
+        <option value="24">Română</option>
+        <option value="25">Slovenščina</option>
+      </select><br>
+    </div>
+    <div class="text-center">
+      <button id="logIn" type="button" class="btn btn-primary">Connect to MELCloud</button>
+      <button id="configButton" type="button" class="btn btn-primary"><i class="fas fa-gear"></i></button>
+    </div>
+  </form>
 </div>
 
 <script>
@@ -23,161 +71,13 @@
     const accountsCount = pluginConfig[0].accounts.length;
     this.deviceIndex = 0;
     for (let i = 0; i < accountsCount; i++) {
-
-      // Array of languages for the dropdown
-      const languages = [
-        { value: "0", text: "English" },
-        { value: "1", text: "Български" },
-        { value: "2", text: "Čeština" },
-        { value: "3", text: "Dansk" },
-        { value: "4", text: "Deutsch" },
-        { value: "5", text: "Eesti" },
-        { value: "6", text: "Español" },
-        { value: "7", text: "Français" },
-        { value: "8", text: "Հայերեն" },
-        { value: "9", text: "Latviešu" },
-        { value: "10", text: "Lietuvių" },
-        { value: "11", text: "Magyar" },
-        { value: "12", text: "Nederlands" },
-        { value: "13", text: "Norwegian" },
-        { value: "14", text: "Polski" },
-        { value: "15", text: "Português" },
-        { value: "16", text: "Русский" },
-        { value: "17", text: "Suomi" },
-        { value: "18", text: "Svenska" },
-        { value: "19", text: "Svenska" },
-        { value: "20", text: "Українська" },
-        { value: "21", text: "Türkçe" },
-        { value: "22", text: "Ελληνικά" },
-        { value: "23", text: "Hrvatski" },
-        { value: "24", text: "Română" },
-        { value: "25", text: "Slovenščina" }
-      ];
-
-      // Get the melCloudTabs container
-      const melCloudTabs = document.getElementById('melCloudTabs');
-
-      // Loop through and create tabs for each account
-      for (let i = 0; i < accountsCount; i++) {
-        // Create the tab container
-        const melCloudAccount = document.createElement('div');
-        melCloudAccount.className = 'card card-body';
-        melCloudAccount.id = `melCloudAccount${i}`;
-
-        // Create the form
-        const form = document.createElement('form');
-        form.id = `configForm${i}`;
-
-        // Create the header section
-        const headerDiv = document.createElement('div');
-        headerDiv.className = 'text-center';
-
-        const accountName = document.createElement('label');
-        accountName.id = `accountName${i}`;
-        accountName.style.fontSize = '23px';
-        accountName.textContent = `Account ${i + 1}`;
-
-        const info = document.createElement('label');
-        info.id = `info${i}`;
-        info.style.fontSize = '17px';
-        info.textContent = 'MELCloud';
-
-        headerDiv.appendChild(accountName);
-        headerDiv.appendChild(info);
-        headerDiv.appendChild(document.createElement('br'));
-        headerDiv.appendChild(document.createElement('br'));
-
-        // Create the form group with inputs
-        const formGroup = document.createElement('div');
-        formGroup.className = 'form-group';
-
-        const nameLabel = document.createElement('label');
-        nameLabel.htmlFor = `name${i}`;
-        nameLabel.textContent = 'Name';
-
-        const nameInput = document.createElement('input');
-        nameInput.id = `name${i}`;
-        nameInput.type = 'text';
-        nameInput.className = 'form-control';
-
-        const userLabel = document.createElement('label');
-        userLabel.htmlFor = `user${i}`;
-        userLabel.textContent = 'User Name';
-
-        const userInput = document.createElement('input');
-        userInput.id = `user${i}`;
-        userInput.type = 'text';
-        userInput.className = 'form-control';
-
-        const passwdLabel = document.createElement('label');
-        passwdLabel.htmlFor = `passwd${i}`;
-        passwdLabel.textContent = 'Password';
-
-        const passwdInput = document.createElement('input');
-        passwdInput.id = `passwd${i}`;
-        passwdInput.type = 'password';
-        passwdInput.className = 'form-control';
-
-        const languageLabel = document.createElement('label');
-        languageLabel.htmlFor = `language${i}`;
-        languageLabel.textContent = 'Language';
-
-        const languageSelect = document.createElement('select');
-        languageSelect.id = `language${i}`;
-        languageSelect.name = 'language';
-        languageSelect.className = 'form-control';
-
-        // Populate the language dropdown
-        languages.forEach(lang => {
-          const option = document.createElement('option');
-          option.value = lang.value;
-          option.textContent = lang.text;
-          languageSelect.appendChild(option);
-        });
-
-        formGroup.appendChild(nameLabel);
-        formGroup.appendChild(nameInput);
-        formGroup.appendChild(document.createElement('br'));
-        formGroup.appendChild(userLabel);
-        formGroup.appendChild(userInput);
-        formGroup.appendChild(document.createElement('br'));
-        formGroup.appendChild(passwdLabel);
-        formGroup.appendChild(passwdInput);
-        formGroup.appendChild(document.createElement('br'));
-        formGroup.appendChild(languageLabel);
-        formGroup.appendChild(languageSelect);
-        formGroup.appendChild(document.createElement('br'));
-
-        // Create the buttons section
-        const buttonDiv = document.createElement('div');
-        buttonDiv.className = 'text-center';
-
-        const logInButton = document.createElement('button');
-        logInButton.id = `logIn${i}`;
-        logInButton.type = 'button';
-        logInButton.className = 'btn btn-primary';
-        logInButton.textContent = 'Connect to MELCloud';
-
-        const configButton = document.createElement('button');
-        configButton.id = `configButton${i}`;
-        configButton.type = 'button';
-        configButton.className = 'btn btn-primary';
-        configButton.innerHTML = '<i class="fas fa-gear"></i>';
-
-        buttonDiv.appendChild(logInButton);
-        buttonDiv.appendChild(configButton);
-
-        // Append sections to the form
-        form.appendChild(headerDiv);
-        form.appendChild(formGroup);
-        form.appendChild(buttonDiv);
-
-        // Append the form to the melCloudAccount div
-        melCloudAccount.appendChild(form);
-
-        // Append the melCloudAccount div to the main container
-        melCloudTabs.appendChild(melCloudAccount);
-      }
+      //create buttons
+      const button = document.createElement("button");
+      button.setAttribute("type", "button");
+      button.setAttribute("id", `button${i}`);
+      button.setAttribute("class", "btn btn-primary");
+      button.innerText = pluginConfig[0].accounts[i].name;
+      document.getElementById("accounts").appendChild(button);
 
       //get actuall value on account select
       document.getElementById(`button${i}`).addEventListener('click', async () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "displayName": "MELCloud Control",
   "name": "homebridge-melcloud-control",
-  "version": "3.0.7-beta.19",
+  "version": "3.0.7-beta.20",
   "description": "Homebridge plugin to control Mitsubishi Air Conditioner, Heat Pump and Energy Recovery Ventilation.",
   "license": "MIT",
   "author": "grzegorz914",