pywebexec 1.2.6__py3-none-any.whl → 1.2.8__py3-none-any.whl

pywebexec/pywebexec.py

@@ -580,6 +580,7 @@ def get_command_output(command_id):
 @app.route('/executables', methods=['GET'])
 def list_executables():
     executables = [f for f in os.listdir('.') if os.path.isfile(f) and os.access(f, os.X_OK)]
+    executables.sort()  # Sort the list of executables alphabetically
     return jsonify(executables)
 
 def main():

pywebexec/static/css/style.css

@@ -34,6 +34,8 @@ select { /* Safari bug */
     font-size: 15px;
     border: #aaa solid 1px;
     border-radius: 5px;
+    padding: 0px 5px 5px 0px;
+    min-width: 150px;
 }
 .output {
     white-space: pre-wrap;
@@ -62,6 +64,11 @@ button {
 form {
     padding-bottom: 15px;
 }
+.form-inline {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
 .status-icon {
     display: inline-block;
     width: 16px;
@@ -103,21 +110,89 @@ form {
 .copy_clip_ok, .copy_clip_ok:hover {
     background-image: url("/static/images/copy_ok.svg");
 }
-input {
-    width: 50%;
+#params, #commandName {
     -webkit-appearance: none;
     -webkit-border-radius: none;
     appearance: none;
     border-radius: 15px;
     padding: 3px;
-    padding-right: 13px;
     border: 1px #aaa solid;
     height: 15px;
     font-size: 15px;
     outline: none;
+    background-color: white;
+    margin: 0; /* Remove margin */
+}
+
+#commandName {
+    width: auto; /* Allow dynamic width */
+    background-size: 16px 16px;
+    border-radius: 15px 0px 0px 15px;
+    border-right: 0px;
     text-indent: 5px;
+    padding-right: 0px;
+}
+#params {
+    width: auto; /* Allow dynamic width */
+    border-radius: 0px 15px 15px 0px;
+    border-left: 0px;
+}
+
+.input-group {
+    display: flex;
+    align-items: center;
+    /*width: 60%;*/
+}
+
+.show-command-list-button {
     background-color: white;
+    cursor: pointer;
+    height: 21px;
+    font-size: 15px;
+    border-top: 1px solid #aaa;
+    border-bottom: 1px solid #aaa;
+    border-radius: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.show-command-list-button .arrow {
+    visibility: hidden; /* Hide arrow by default */
+}
+
+.show-command-list-button:hover .arrow {
+    visibility: visible; /* Show arrow on hover */
+}
+
+#commandName:focus + .show-command-list-button .arrow {
+    visibility: visible; /* Show arrow when input has focus */
+}
+
+#commandList.show + .show-command-list-button .arrow {
+    display: none; /* Hide arrow when list is shown */
+}
+
+.command-list {
+    display: none;
+    position: absolute;
+    background-color: white;
+    border: 1px solid #aaa;
+    border-radius: 5px;
+    padding: 0px 5px 0px 5px;
+    overflow-y: auto;
+    z-index: 1000;
+}
+
+.command-item {
+    padding: 3px 5px 3px 5px;
+    cursor: pointer;
+}
+
+.command-item:hover, .command-item.highlighted {
+    background-color: #eee;
 }
+
 .currentcommand {
     background-color: #eef;
 }
@@ -172,6 +247,8 @@ body.dimmed * {
     visibility: hidden;
     height: 0px;
 }
-span { /* allow wide chars in terminal */
-    letter-spacing: unset !important;
+/* allow wide chars in terminal */
+span {
+    letter-spacing: -0.03px !important;
 }
+

pywebexec/static/images/down-arrow.svg

@@ -0,0 +1 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"><polygon points="4 3 12 3 8 10 4 3" fill="black" /></svg>

pywebexec/static/js/commands.js

@@ -0,0 +1,205 @@
+// commands.js
+let commandInput = document.getElementById('commandName');
+let paramsInput = document.getElementById('params');
+let commandListSelect = document.getElementById('commandList');
+let showCommandListButton = document.getElementById('showCommandListButton');
+let isHandlingKeydown = false;
+
+function unfilterCommands() {
+    const options = commandListSelect.options;
+    for (let i = 0; i < options.length; i++) {
+        options[i].style.display = 'block';
+    }
+    commandListSelect.size = Math.min(20, commandListSelect.options.length);
+}
+
+function filterCommands() {
+    const value = commandInput.value.slice(0, commandInput.selectionStart);
+    const options = commandListSelect.options;
+    let nbVisibleItems = 0;
+    for (let i = 0; i < options.length; i++) {
+        if (options[i].text.startsWith(value)) {
+            options[i].style.display = 'block';
+            nbVisibleItems += 1;
+        } else {
+            options[i].style.display = 'none';
+        }
+    }
+    if (nbVisibleItems>1) {
+        commandListSelect.size = Math.min(20, nbVisibleItems);
+    } else {
+        commandListSelect.style.display = 'none';
+    }
+}
+
+function setCommandListPosition() {
+    const rect = commandInput.getBoundingClientRect();
+    commandListSelect.style.left = `${rect.left}px`;
+    commandListSelect.style.top = `${rect.bottom}px`;
+}
+
+function adjustInputWidth(input) {
+    input.style.width = 'auto';
+    input.style.width = `${input.scrollWidth}px`;
+}
+
+
+paramsInput.addEventListener('input', () => adjustInputWidth(paramsInput));
+commandInput.addEventListener('input', () => {
+    adjustInputWidth(commandInput);
+    filterCommands(); // Filter commands on input
+});
+
+paramsInput.addEventListener('mouseover', () => {
+    paramsInput.focus();
+    paramsInput.setSelectionRange(0, paramsInput.value.length);
+});
+
+commandInput.addEventListener('mouseover', () => {
+    commandInput.focus();
+    commandInput.setSelectionRange(0, commandInput.value.length);
+});
+
+commandInput.addEventListener('input', (event) => {
+    if (event.inputType === 'deleteContentBackward') {
+        const newValue = commandInput.value.slice(0, -1);
+        commandInput.value = newValue;
+        commandInput.setSelectionRange(newValue.length, newValue.length);
+    }
+    const value = commandInput.value;
+    const options = commandListSelect.options;
+    if (value) {
+        const match = Array.from(options).find(option => option.text.startsWith(value));
+        if (match) {
+            commandInput.value = match.text;
+            commandInput.setSelectionRange(value.length, match.text.length);
+        } else {
+            commandInput.value = value.slice(0, -1);
+        }
+    }
+    filterCommands();
+    adjustInputWidth(commandInput); // Adjust width on input
+});
+
+commandInput.addEventListener('keydown', (event) => {
+    if (event.key === ' ' || event.key === 'ArrowRight') {
+        event.preventDefault();
+        paramsInput.focus();
+        paramsInput.setSelectionRange(0, paramsInput.value.length);
+    } else if (event.key === 'ArrowDown') {
+        /*setCommandListPosition();*/
+        unfilterCommands();
+        commandListSelect.style.display = 'block';
+        commandListSelect.focus();
+        commandListSelect.selectedIndex = 0;
+        event.preventDefault();
+    }
+});
+
+paramsInput.addEventListener('keydown', (event) => {
+    if (event.key === 'ArrowLeft' && paramsInput.selectionStart === 0) {
+        commandInput.focus();
+        commandInput.setSelectionRange(0, commandInput.value.length);
+        event.preventDefault();
+    }
+});
+
+commandListSelect.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+        event.preventDefault(); // Prevent form submission
+        const selectedOption = commandListSelect.options[commandListSelect.selectedIndex];
+        commandInput.value = selectedOption.text;
+        commandListSelect.style.display = 'none';
+        adjustInputWidth(commandInput);
+        paramsInput.focus();
+        return;
+    }
+    if (event.key === 'ArrowUp' && commandListSelect.selectedIndex == 0) {
+        commandInput.focus();
+        commandListSelect.style.display = 'none'
+    }
+});
+
+commandListSelect.addEventListener('click', (event) => {
+    event.preventDefault(); // Prevent form submission
+    const selectedOption = commandListSelect.options[commandListSelect.selectedIndex];
+    commandInput.value = selectedOption.text;
+    commandListSelect.style.display = 'none';
+    adjustInputWidth(commandInput);
+    paramsInput.focus();
+});
+
+
+commandInput.addEventListener('click', () => {
+    setCommandListPosition();
+    if (commandListSelect.style.display == 'none')
+        commandListSelect.style.display = 'block';
+    else
+        commandListSelect.style.display = 'none';
+    filterCommands();
+});
+
+commandInput.addEventListener('blur', (event) => {
+    if (event.relatedTarget === showCommandListButton || event.relatedTarget === commandListSelect) {
+        event.preventDefault();
+        return;
+    }
+    commandListSelect.style.display = 'none';
+    adjustInputWidth(commandInput);
+});
+
+showCommandListButton.addEventListener('click', (event) => {
+    event.preventDefault();
+    setCommandListPosition();
+    if (commandListSelect.style.display == 'none')
+        commandListSelect.style.display = 'block';
+    else
+        commandListSelect.style.display = 'none';
+    unfilterCommands();
+});
+
+window.addEventListener('click', (event) => {
+    if (!commandInput.contains(event.target) && !commandListSelect.contains(event.target) && !showCommandListButton.contains(event.target)) {
+        commandListSelect.style.display = 'none';
+    }
+});
+
+window.addEventListener('keydown', (event) => {
+    if ([commandInput, paramsInput, commandListSelect].includes(document.activeElement)) return;
+    if (event.code === `Key${event.key.toUpperCase()}`) {
+        commandInput.focus();
+        commandInput.dispatchEvent(new KeyboardEvent('keydown', event));
+    }
+});
+
+window.addEventListener('resize', () => {
+    setCommandListPosition();
+});
+
+window.addEventListener('load', () => {
+    fetchExecutables();
+    adjustInputWidth(paramsInput); // Adjust width on load
+    adjustInputWidth(commandInput); // Adjust width on load
+    setCommandListPosition();
+});
+
+async function fetchExecutables() {
+    try {
+        const response = await fetch('/executables');
+        if (!response.ok) {
+            throw new Error('Failed to fetch command status');
+        }
+        const executables = await response.json();
+        commandListSelect.innerHTML = '';
+        executables.forEach(executable => {
+            const option = document.createElement('option');
+            option.className = 'command-item';
+            option.text = executable;
+            commandListSelect.appendChild(option);
+        });
+    } catch (error) {
+        alert("Failed to fetch executables");
+    }
+    commandListSelect.size = Math.min(20, commandListSelect.options.length)
+
+}

pywebexec/static/js/script.js

@@ -7,7 +7,21 @@ const terminal = new Terminal({
     cursorHidden: true,
     disableStdin: true,
     convertEol: true,
-    fontFamily: 'Consolas NF, monospace, courier-new, courier'
+    fontFamily: 'Consolas NF, monospace, courier-new, courier',
+    scrollBack: 999999,
+    theme: {
+        background: '#111412',
+        black: '#111412',
+        green: '#088a5b',
+        blue: "#2760aa",
+        red: '#ba1611',
+        yellow: "#cf8700",
+        magenta: "#4c3d80",
+        cyan: "#00a7aa",
+        brightBlack: "#243C4F",
+        brightBlue: "#5584b1",
+    },
+    rescaleOverlappingGlyphs: true,
 });
 const fitAddon = new FitAddon.FitAddon();
 terminal.loadAddon(fitAddon);
@@ -42,6 +56,8 @@ document.getElementById('launchForm').addEventListener('submit', async (event) =
         await new Promise(r => setTimeout(r, 200));
         fetchCommands();
         viewOutput(data.command_id);
+        commandInput.focus()
+        commandInput.setSelectionRange(0, commandInput.value.length)
     } catch (error) {
         console.log('Error running command:', error);
     }
@@ -75,7 +91,7 @@ async function fetchCommands() {
                 <td>${command.command.replace(/^\.\//, '')}</td>
                 <td><span class="status-icon status-${command.status}"></span>${command.status}${command.status === 'failed' ? ` (${command.exit_code})` : ''}</td>
                 <td>
-                    ${command.status === 'running' ? `<button onclick="stopCommand('${command.command_id}')">Stop</button>` : `<button onclick="relaunchCommand('${command.command_id}')">Run</button>`}
+                    ${command.status === 'running' ? `<button onclick="stopCommand('${command.command_id}', event)">Stop</button>` : `<button onclick="relaunchCommand('${command.command_id}', event)">Run</button>`}
                 </td>
                 <td class="monospace outcol">${command.last_output_line || ''}</td>
             `;
@@ -88,27 +104,6 @@ async function fetchCommands() {
     }
 }
 
-async function fetchExecutables() {
-    try {
-        const response = await fetch('/executables');
-        if (!response.ok) {
-            throw new Error('Failed to fetch command status');
-        }
-        const executables = await response.json();
-        const commandNameSelect = document.getElementById('commandName');
-        commandNameSelect.innerHTML = '';
-        executables.forEach(executable => {
-            const option = document.createElement('option');
-            option.value = executable;
-            option.textContent = executable;
-            commandNameSelect.appendChild(option);
-        });
-    } catch (error) {
-        console.log('Error fetching executables:', error);
-        alert("Failed to fetch executables");
-    }
-}
-
 async function fetchOutput(url) {
     try {
         const response = await fetch(url);
@@ -155,7 +150,9 @@ async function viewOutput(command_id) {
     }
 }
 
-async function relaunchCommand(command_id) {
+async function relaunchCommand(command_id, event) {
+    event.stopPropagation();
+    event.stopImmediatePropagation();
     try {
         const response = await fetch(`/command_status/${command_id}`);
         if (!response.ok) {
@@ -188,7 +185,9 @@ async function relaunchCommand(command_id) {
     }
 }
 
-async function stopCommand(command_id) {
+async function stopCommand(command_id, event) {
+    event.stopPropagation();
+    event.stopImmediatePropagation();
     try {
         const response = await fetch(`/stop_command/${command_id}`, {
             method: 'POST'
@@ -269,11 +268,7 @@ function initResizer() {
 }
 
 window.addEventListener('resize', adjustOutputHeight);
-window.addEventListener('load', () => {
-    adjustOutputHeight();
-    initResizer();
-});
+window.addEventListener('load', initResizer);
 
-fetchExecutables();
 fetchCommands();
-setInterval(fetchCommands, 5000);
+setInterval(fetchCommands, 5000);

pywebexec/templates/index.html

@@ -12,11 +12,16 @@
         <div class="dimmer-text">Server not reachable</div>
     </div>
     <h2><span class="status-icon title-icon"></span>{{ title }}</h2>
-    <form id="launchForm">
+    <form id="launchForm" class="form-inline">
         <label for="commandName">Command</label>
-        <select id="commandName" name="commandName"></select>
-        <label for="params">Params</label>
-        <input type="text" id="params" name="params">
+        <div class="input-group">
+            <input type="text" id="commandName" name="commandName" size=5 autocomplete="off" style="width: 100px;" autofocus>
+            <div id="showCommandListButton" class="show-command-list-button">
+                <span class="arrow">&#9660;</span>
+            </div>
+            <select id="commandList" class="command-list" size="20"></select>
+            <input type="text" id="params" name="params" oninput="this.style.width = ((this.value.length + 1) * 8) + 'px';">
+        </div>
         <button type="submit">Run</button>
     </form>
     <div class="table-container" id="tableContainer">
@@ -43,5 +48,6 @@
     <script src="/static/js/xterm/xterm.js"></script>
     <script src="/static/js/xterm/xterm-addon-fit.js"></script>
     <script type="text/javascript" src="/static/js/script.js"></script>
+    <script type="text/javascript" src="/static/js/commands.js"></script>
 </body>
 </html>

pywebexec/version.py

@@ -12,5 +12,5 @@ __version__: str
 __version_tuple__: VERSION_TUPLE
 version_tuple: VERSION_TUPLE
 
-__version__ = version = '1.2.6'
-__version_tuple__ = version_tuple = (1, 2, 6)
+__version__ = version = '1.2.8'
+__version_tuple__ = version_tuple = (1, 2, 8)

{pywebexec-1.2.6.dist-info → pywebexec-1.2.8.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.2
 Name: pywebexec
-Version: 1.2.6
+Version: 1.2.8
 Summary: Simple Python HTTP Exec Server
 Home-page: https://github.com/joknarf/pywebexec
 Author: Franck Jouvanceau
@@ -83,7 +83,7 @@ $ pywebexec
 ```
 
 * Launch commands with params/view live output/Status using browser
-![pywebexecnew5](https://github.com/user-attachments/assets/cb443a6f-e364-4302-98de-f0330d763289)
+![pywebexecnew6](https://github.com/user-attachments/assets/11415e1f-9f5f-409e-a04c-51eb062a9780)
 
 all commands output / statuses are available in the executables directory in subdirectory `.web_status`
 

{pywebexec-1.2.6.dist-info → pywebexec-1.2.8.dist-info}/RECORD

@@ -1,25 +1,27 @@
 pywebexec/__init__.py,sha256=4spIsVaF8RJt8S58AG_wWoORRNkws9Iwqprj27C3ljM,99
-pywebexec/pywebexec.py,sha256=nVc6fm5jGgPLc4bv4EMVaR84qJN-yy8q9teFOD_LcRE,22665
-pywebexec/version.py,sha256=lMW_5tymyxUCLB-4LUHlm-nxaXdxL9eMN-CPoWJeaIw,411
-pywebexec/static/css/style.css,sha256=mKatR7_j_byear3GNtYMC_4e9XtXirZDL9yGeZRsDQ0,3592
+pywebexec/pywebexec.py,sha256=LRKJ2KgklZsHawd97mSKodBpH5gLm3oMza30hcLcekc,22735
+pywebexec/version.py,sha256=s3iHFZtIHrLA43BEwwqCJ5Ch9SA-UTWHAi57WzfyPLM,411
+pywebexec/static/css/style.css,sha256=s3rpd-sbnu_T4MogbVjjT05edhmGdMtlwAMx_9n8834,5177
 pywebexec/static/css/xterm.css,sha256=gy8_LGA7Q61DUf8ElwFQzHqHMBQnbbEmpgZcbdgeSHI,5383
 pywebexec/static/images/aborted.svg,sha256=_mP43hU5QdRLFZIknBgjx-dIXrHgQG23-QV27ApXK2A,381
 pywebexec/static/images/copy.svg,sha256=d9OwtGh5GzzZHzYcDrLfNxZYLth1Q64x7bRyYxu4Px0,622
 pywebexec/static/images/copy_ok.svg,sha256=mEqUVUhSq8xaJK2msQkxRawnz_KwlCZ-tok8QS6hJ3g,451
+pywebexec/static/images/down-arrow.svg,sha256=4TclEmntMvKk_F_ADXgTpGtviYo826EDmmZiGE7HQBI,121
 pywebexec/static/images/failed.svg,sha256=ADZ7IKrUyOXtqpivnz3VcH0-Wru-I5MOi3OJAkI3hxk,1439
 pywebexec/static/images/favicon.svg,sha256=ti80IfuDZwIvQcmJxkOeUaB1iMsiyOPmQmVO-h0y1IU,1126
 pywebexec/static/images/running.gif,sha256=iYuzQGkMxrakSIwt6gPieKCImGZoSAHmU5MUNZa7cpw,25696
 pywebexec/static/images/success.svg,sha256=PJDcCSTevJh7rkfSFLtc7P0pbeh8PVQBS8DaOLQemmc,489
-pywebexec/static/js/script.js,sha256=rvAXV7z1kzThVyeAdX55a7ss7Eemr6ibAdvOV0cFukI,9979
+pywebexec/static/js/commands.js,sha256=XfrnyRVjfZ8eOq9XpJXNVVzuvzLHqa81Ot99DSRL_Rk,6954
+pywebexec/static/js/script.js,sha256=1ypziT5pOmHj_15MUvBf0ChjzEpAQ-ji4W9nhxoI_iM,9775
 pywebexec/static/js/xterm/LICENSE,sha256=EU1P4eXTull-_T9I80VuwnJXubB-zLzUl3xpEYj2T1M,1083
 pywebexec/static/js/xterm/ansi_up.min.js,sha256=KNGV0vEr30hNqKQimTAvGVy-icD5A1JqMQTtvYtKR2Y,13203
 pywebexec/static/js/xterm/xterm-addon-fit.js,sha256=Pprm9pZe4SadVXS5Bc8b9VnC9Ex4QlWwA0pxOH53Gck,1460
 pywebexec/static/js/xterm/xterm.js,sha256=Bzka76jZwEhVt_LlS0e0qMw7ryGa1p5qfxFyeohphBo,283371
 pywebexec/templates/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
-pywebexec/templates/index.html,sha256=3tQwVTcyK_r5BW1gHViuza59Gh-4pUZQQl7jqfvjNMY,1655
-pywebexec-1.2.6.dist-info/LICENSE,sha256=gRJf0JPT_wsZJsUGlWPTS8Vypfl9vQ1qjp6sNbKykuA,1064
-pywebexec-1.2.6.dist-info/METADATA,sha256=F2qZ480h1eB7Y3qnkF3MCgxsbzQLHr0wlDH6wS8EziE,6936
-pywebexec-1.2.6.dist-info/WHEEL,sha256=In9FTNxeP60KnTkGw7wk6mJPYd_dQSjEZmXdBdMCI-8,91
-pywebexec-1.2.6.dist-info/entry_points.txt,sha256=l52GBkPCXRkmlHfEyoVauyfBdg8o-CAtC8qQpOIjJK0,55
-pywebexec-1.2.6.dist-info/top_level.txt,sha256=vHoHyzngrfGdm_nM7Xn_5iLmaCrf10XO1EhldgNLEQ8,10
-pywebexec-1.2.6.dist-info/RECORD,,
+pywebexec/templates/index.html,sha256=M-9JUAR5vrk-19oF8CpxkWJvyWJkZIa71AI-1jpsMWE,2116
+pywebexec-1.2.8.dist-info/LICENSE,sha256=gRJf0JPT_wsZJsUGlWPTS8Vypfl9vQ1qjp6sNbKykuA,1064
+pywebexec-1.2.8.dist-info/METADATA,sha256=lNTx0DEKtyTGW4huTsiNf-ZPfoer9Ieaz5uTndBglCE,6936
+pywebexec-1.2.8.dist-info/WHEEL,sha256=In9FTNxeP60KnTkGw7wk6mJPYd_dQSjEZmXdBdMCI-8,91
+pywebexec-1.2.8.dist-info/entry_points.txt,sha256=l52GBkPCXRkmlHfEyoVauyfBdg8o-CAtC8qQpOIjJK0,55
+pywebexec-1.2.8.dist-info/top_level.txt,sha256=vHoHyzngrfGdm_nM7Xn_5iLmaCrf10XO1EhldgNLEQ8,10
+pywebexec-1.2.8.dist-info/RECORD,,