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

package/homebridge-ui/public/index.html

@@ -1,56 +1,10 @@
-<div>
-  <img src="homebridge-melcloud-control.png" style="text-align: center;" height="150" />
+<div style="text-align: center;">
+  </divstyle>
+  <img src="homebridge-melcloud-control.png" alt="Image" height="150" />
 </div>
-<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>
-    </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 id="melCloudTabs">
+  <!-- Tabs will be dynamically inserted here -->
 </div>
 
 <script>
@@ -69,13 +23,161 @@
     const accountsCount = pluginConfig[0].accounts.length;
     this.deviceIndex = 0;
     for (let i = 0; i < accountsCount; i++) {
-      //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);
+
+      // 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);
+      }
 
       //get actuall value on account select
       document.getElementById(`button${i}`).addEventListener('click', async () => {
@@ -190,7 +292,7 @@
                 const pushTypeAta = ataDeviceIdExist ? false : ataDevices.push(deviceAta);
                 const pushNewDevice = ataDeviceIdExist ? false : newDevices.ata.push(device);
                 const devicesCount = newDevices.ata.length;
-                textAta = `ATA: ${devicesCount},`
+                textAta = `ATA: ${devicesCount}`
               };
 
               //devices atw
@@ -220,7 +322,7 @@
                 const pushTypeatw = atwDeviceIdExist ? false : atwDevices.push(deviceAtw);
                 const pushNewDevice = atwDeviceIdExist ? false : newDevices.atw.push(device);
                 const devicesCount = newDevices.ata.length;
-                textAtw = `ATW: ${devicesCount},`
+                textAtw = `ATW: ${devicesCount}`
               };
 
               //devices erv
@@ -249,7 +351,7 @@
             });
 
             const newDevicesCount = newDevices.ata.length + newDevices.atw.length + newDevices.erv.length;
-            document.getElementById('info').innerHTML = `Found devices: ${textAta}, ${textAtw}, ${textErv}. ${newDevicesCount === 0 ? '' : 'Now You can start to configure it.'}`;
+            document.getElementById('info').innerHTML = `Found in MELCloud, ${textAta}, ${textAtw}, ${textErv}. ${newDevicesCount === 0 ? '' : 'Now You can start to configure it.'}`;
             document.getElementById('info').style.color = 'green';
 
             await homebridge.updatePluginConfig(pluginConfig);

package/package.json

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