From bb48136e6681e57197b68a30cf1e3bc3dafc7f94 Mon Sep 17 00:00:00 2001
From: elmgates <elmgates@Selfhosted.gitea>
Date: Tue, 8 Oct 2024 19:15:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AD=A4=E6=96=87=E4=BB=B6=E5=A4=B9=E4=B8=BA?=
 =?UTF-8?q?=E7=BD=91=E9=A1=B5=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 python/templates/index.html | 153 ++++++++++++++++++++++++++++++++++++
 1 file changed, 153 insertions(+)
 create mode 100644 python/templates/index.html
diff --git a/python/templates/index.html b/python/templates/index.html
new file mode 100644
index 0000000..29dc600
--- /dev/null
+++ b/python/templates/index.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>Hyper-V 虚拟机管理</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f9;
+            color: #333;
+            margin: 0;
+            padding: 0;
+        }
+        h1 {
+            text-align: center;
+            padding: 20px 0;
+            margin: 0;
+            background-color: #4CAF50;
+            color: white;
+            font-size: 24px;
+        }
+        table {
+            width: 80%;
+            margin: 40px auto;
+            border-collapse: collapse;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+            background-color: white;
+        }
+        th, td {
+            padding: 15px;
+            text-align: center;
+            border-bottom: 1px solid #ddd;
+        }
+        th {
+            background-color: #4CAF50;
+            color: white;
+            font-weight: bold;
+        }
+        tr:hover {
+            background-color: #f1f1f1;
+        }
+        button {
+            padding: 10px 15px;
+            font-size: 14px;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        button.start {
+            background-color: #28a745;
+        }
+        button.stop {
+            background-color: #dc3545;
+        }
+        button.restart {
+            background-color: #ffc107;
+        }
+        button:disabled {
+            background-color: #aaa;
+            cursor: not-allowed;
+        }
+        .container {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+        footer {
+            text-align: center;
+            padding: 20px;
+            background-color: #4CAF50;
+            color: white;
+            position: fixed;
+            width: 100%;
+            bottom: 0;
+        }
+    </style>
+</head>
+<body>
+    <h1>Hyper-V 虚拟机管理</h1>
+    <div class="container">
+        <table>
+            <thead>
+                <tr>
+                    <th>虚拟机名称</th>
+                    <th>状态</th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for vm in vms %}
+                <tr>
+                    <td>{{ vm.Name }}</td>
+                    <td>
+                        {% if vm.State == 2 %}
+                            <span style="color: green;">运行中</span>
+                        {% elif vm.State == 3 %}
+                            <span style="color: red;">已关闭</span>
+                        {% else %}
+                            <span style="color: gray;">未知状态</span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if vm.State == 2 %}
+                            <button class="stop" onclick="performAction('{{ vm.Name }}', 'stop')">关机</button>
+                            <button class="restart" onclick="performAction('{{ vm.Name }}', 'restart')">重启</button>
+                        {% elif vm.State == 3 %}
+                            <button class="start" onclick="performAction('{{ vm.Name }}', 'start')">启动</button>
+                        {% else %}
+                            <button disabled>无可用操作</button>
+                        {% endif %}
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+
+    <footer>
+        Hyper-V 虚拟机管理系统
+    </footer>
+
+    <script>
+        function performAction(vmName, action) {
+            if (!confirm(`确定要对虚拟机 "${vmName}" 执行 "${action}" 操作吗？`)) {
+                return;
+            }
+            fetch('/control_vm', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ name: vmName, action: action })
+            })
+            .then(response => response.json())
+            .then(data => {
+                alert(data.message);
+                if (data.status="success") {
+                    // 刷新页面以更新状态
+                    location.reload();
+                }
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+                alert('操作失败');
+            });
+        }
+    </script>
+</body>
+</html>
