Spaces:
Runtime error
Runtime error
| <html lang="en" data-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GitHub Issue Manager</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> | |
| <style> | |
| /* Add your custom styles here if needed */ | |
| .bg-gradient-to-br { | |
| background: linear-gradient(to bottom right, #121212, #303030); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br"> | |
| <div id="app" class="container mx-auto my-8 px-4"> | |
| <h1 class="text-4xl font-bold text-white mb-8 text-center">GitHub Issue Manager</h1> | |
| <div class="card bg-base-200 shadow-2xl"> | |
| <div class="card-body"> | |
| <div class="form-control"> | |
| <label class="label"> | |
| <span class="label-text text-gray-300">GitHub Token</span> | |
| </label> | |
| <input type="password" placeholder="Enter your GitHub token" v-model="githubToken" class="input input-bordered input-primary w-full" /> | |
| </div> | |
| <div class="form-control"> | |
| <label class="label"> | |
| <span class="label-text text-gray-300">Repository Owner</span> | |
| </label> | |
| <input type="text" placeholder="Enter repository owner username" v-model="githubUsername" class="input input-bordered input-primary w-full" /> | |
| </div> | |
| <div class="form-control"> | |
| <label class="label"> | |
| <span class="label-text text-gray-300">Repository Name</span> | |
| </label> | |
| <input type="text" placeholder="Enter repository name" v-model="githubRepo" class="input input-bordered input-primary w-full" /> | |
| </div> | |
| <button @click="fetchIssues" class="btn btn-accent w-full mt-4">Fetch Issues</button> | |
| <div class="form-control mt-4" v-show="issues.length > 0"> | |
| <label class="label"> | |
| <span class="label-text text-gray-300">Select Issue</span> | |
| </label> | |
| <select v-model="selectedIssue" class="select select-primary w-full"> | |
| <option v-for="(issue, index) in issues" :key="index" :value="issue.number"> | |
| #{{ issue.number }}: {{ issue.title }} | |
| </option> | |
| </select> | |
| </div> | |
| <div class="form-control mt-4" v-show="selectedIssue"> | |
| <label class="label"> | |
| <span class="label-text text-gray-300">Resolution</span> | |
| </label> | |
| <textarea v-model="resolution" placeholder="Enter your resolution here..." class="textarea textarea-primary w-full" /> | |
| </div> | |
| <button @click="resolveIssue" class="btn btn-success w-full mt-4" v-show="selectedIssue">Resolve Issue</button> | |
| <div class="mt-8" v-show="output"> | |
| <p class="text-gray-300">{{ output }}</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| new Vue({ | |
| el: '#app', | |
| data: { | |
| githubToken: '', | |
| githubUsername: '', | |
| githubRepo: '', | |
| issues: [], | |
| selectedIssue: null, | |
| resolution: '', | |
| output: null | |
| }, | |
| methods: { | |
| async fetchIssues() { | |
| if (!this.githubToken || !this.githubUsername || !this.githubRepo) { | |
| this.output = 'Please provide all the required fields!'; | |
| return; | |
| } | |
| try { | |
| const response = await fetch('/fetch_issues', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ | |
| token: this.githubToken, | |
| username: this.githubUsername, | |
| repo: this.githubRepo | |
| }) | |
| }); | |
| const data = await response.json(); | |
| console.log('Fetch Issues Response:', data); | |
| if (data.success) { | |
| this.issues = data.issues; | |
| this.output = null; | |
| } else { | |
| this.output = data.message || 'Error fetching issues'; | |
| } | |
| } catch (error) { | |
| this.output = 'An error occurred while fetching issues'; | |
| console.error('Error:', error); | |
| } | |
| }, | |
| async resolveIssue() { | |
| if (!this.selectedIssue || !this.resolution) { | |
| this.output = 'Please select an issue and provide the resolution!'; | |
| return; | |
| } | |
| try { | |
| const response = await fetch('/resolve_issue', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ | |
| token: this.githubToken, | |
| username: this.githubUsername, | |
| repo: this.githubRepo, | |
| issue_number: this.selectedIssue, | |
| resolution: this.resolution | |
| }) | |
| }); | |
| const data = await response.json(); | |
| console.log('Resolve Issue Response:', data); | |
| if (data.success) { | |
| this.output = data.message; | |
| } else { | |
| this.output = data.message || 'Error resolving issue'; | |
| } | |
| } catch (error) { | |
| this.output = 'An error occurred while resolving the issue'; | |
| console.error('Error:', error); | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |