feat: 增加前端页面

2026-04-05 19:05:02 +08:00 · 2024-06-28 09:34:28 +08:00 · 2024-06-28 09:34:28 +08:00 · 45cb29dd5e
commit 45cb29dd5e
parent bfe78b78f2
15 changed files with 360 additions and 0 deletions
--- a/app.py
+++ b/app.py
@ -43,6 +43,15 @@ def get_tasks():
        })
    return jsonify(task_list)

+@app.route('/remove_task', methods=['DELETE'])
+def remove_task():
+    data = request.json
+    task = Task.get(Task.name == data['name'])
+    if task.running:
+        stop_specific_task(task.name)
+    task.delete_instance()
+    return jsonify({'message': 'Task removed successfully'})
+
@app.route('/stop_scheduler', methods=['GET'])
 def stop():
    stop_scheduler()
--- a/scheduler-frontend/.gitignore
+++ b/scheduler-frontend/.gitignore
@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/scheduler-frontend/README.md
+++ b/scheduler-frontend/README.md
@ -0,0 +1,24 @@
+# scheduler-frontend
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/scheduler-frontend/babel.config.js
+++ b/scheduler-frontend/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/scheduler-frontend/jsconfig.json
+++ b/scheduler-frontend/jsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/scheduler-frontend/package.json
+++ b/scheduler-frontend/package.json
@ -0,0 +1,45 @@
+{
+  "name": "scheduler-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^1.7.2",
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13",
+    "vue-axios": "^3.5.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}
--- a/scheduler-frontend/public/favicon.ico
+++ b/scheduler-frontend/public/favicon.ico
--- a/scheduler-frontend/public/index.html
+++ b/scheduler-frontend/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/scheduler-frontend/src/App.vue
+++ b/scheduler-frontend/src/App.vue
@ -0,0 +1,120 @@
+<template>
+  <div id="app">
+    <h1>cURL Scheduler</h1>
+    <div>
+      <input v-model="newTask.curl" placeholder="Enter cURL command" />
+      <input v-model="newTask.interval" placeholder="Enter interval in seconds" type="number" />
+      <input v-model="newTask.name" placeholder="Enter task name" />
+      <button @click="addTask">Add Task</button>
+    </div>
+    <div>
+      <h2>Scheduled Tasks</h2>
+      <ul>
+        <li v-for="task in tasks" :key="task.name">
+          <div>
+            <strong>{{ task.name }}</strong>
+            <p>{{ task.curl }}</p>
+            <p>Interval: {{ task.interval }} seconds</p>
+            <p>Status: {{ task.running ? 'Running' : 'Stopped' }}</p>
+            <p>Last Result: {{ task.result }}</p>
+            <button @click="toggleTask(task)">{{ task.running ? 'Stop' : 'Start' }}</button>
+            <button @click="removeTask(task)">Remove</button>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, onMounted } from 'vue'
+import axios from 'axios'
+
+export default {
+  setup() {
+    const newTask = reactive({
+      curl: '',
+      interval: '',
+      name: ''
+    })
+
+    const tasks = reactive([])
+
+    const fetchTasks = async () => {
+      try {
+        const response = await axios.get('http://127.0.0.1:5000/get_tasks')
+        tasks.splice(0, tasks.length, ...response.data)
+      } catch (error) {
+        console.error('Error fetching tasks:', error)
+      }
+    }
+
+    const setupAutoRefresh = () => {
+      setInterval(fetchTasks, 5000) // Auto refresh every 5 seconds
+    }
+
+    const addTask = async () => {
+      if (newTask.curl && newTask.interval && newTask.name) {
+        try {
+          await axios.post('http://127.0.0.1:5000/add_task', newTask)
+          fetchTasks()
+          newTask.curl = ''
+          newTask.interval = ''
+          newTask.name = ''
+        } catch (error) {
+          console.error('Error adding task:', error)
+        }
+      }
+    }
+
+    const toggleTask = async (task) => {
+      const action = task.running ? 'stop_task' : 'start_task'
+      try {
+        await axios.post(`http://127.0.0.1:5000/${action}`, { name: task.name })
+        fetchTasks()
+      } catch (error) {
+        console.error(`Error ${task.running ? 'stopping' : 'starting'} task:`, error)
+      }
+    }
+
+    const removeTask = async (task) => {
+      try {
+        await axios.post('http://127.0.0.1:5000/stop_task', { name: task.name })
+        await axios.delete('http://127.0.0.1:5000/remove_task', { data: { name: task.name } })
+        fetchTasks()
+      } catch (error) {
+        console.error('Error removing task:', error)
+      }
+    }
+
+    onMounted(() => {
+      fetchTasks()
+      setupAutoRefresh()
+    })
+
+    return {
+      newTask,
+      tasks,
+      addTask,
+      toggleTask,
+      removeTask
+    }
+  }
+}
+</script>
+
+<style scoped>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  margin-top: 60px;
+}
+input {
+  margin: 5px;
+}
+button {
+  margin: 5px;
+}
+</style>
--- a/scheduler-frontend/src/assets/logo.png
+++ b/scheduler-frontend/src/assets/logo.png
--- a/scheduler-frontend/src/components/HelloWorld.vue
+++ b/scheduler-frontend/src/components/HelloWorld.vue
@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/scheduler-frontend/src/main.js
+++ b/scheduler-frontend/src/main.js
@ -0,0 +1,30 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import axios from 'axios'
+
+const app = createApp(App)
+
+app.config.globalProperties.$axios = axios
+
+app.mount('#app')
+
+
+
+// import {createSSRApp} from 'vue'
+// import axios from 'axios'
+// import VueAxios from 'vue-axios'
+
+// import App from './App.vue'
+
+// export function createApp() {
+//   const app = createSSRApp(App)
+
+//   app.use(axios)
+//   app.use(VueAxios)
+//   app.config.globalProperties.$axios = axios
+
+
+//   return {
+//     app,
+//   }
+// }
--- a/scheduler-frontend/vite.config.js
+++ b/scheduler-frontend/vite.config.js
@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [vue()]
+});
--- a/scheduler-frontend/vue.config.js
+++ b/scheduler-frontend/vue.config.js
@ -0,0 +1,4 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true
+})
--- a/tasks.db
+++ b/tasks.db