acecalisto3 commited on
Commit
300bc11
·
verified ·
1 Parent(s): 3d73e71

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +153 -0
index.html ADDED
@@ -0,0 +1,153 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-theme="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GitHub Issue Manager</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
10
+ <style>
11
+ /* Add your custom styles here if needed */
12
+ .bg-gradient-to-br {
13
+ background: linear-gradient(to bottom right, #121212, #303030);
14
+ }
15
+ </style>
16
+ </head>
17
+ <body class="bg-gradient-to-br">
18
+ <div id="app" class="container mx-auto my-8 px-4">
19
+ <h1 class="text-4xl font-bold text-white mb-8 text-center">GitHub Issue Manager</h1>
20
+
21
+ <div class="card bg-base-200 shadow-2xl">
22
+ <div class="card-body">
23
+
24
+ <div class="form-control">
25
+ <label class="label">
26
+ <span class="label-text text-gray-300">GitHub Token</span>
27
+ </label>
28
+ <input type="password" placeholder="Enter your GitHub token" v-model="githubToken" class="input input-bordered input-primary w-full" />
29
+ </div>
30
+
31
+ <div class="form-control">
32
+ <label class="label">
33
+ <span class="label-text text-gray-300">Repository Owner</span>
34
+ </label>
35
+ <input type="text" placeholder="Enter repository owner username" v-model="githubUsername" class="input input-bordered input-primary w-full" />
36
+ </div>
37
+
38
+ <div class="form-control">
39
+ <label class="label">
40
+ <span class="label-text text-gray-300">Repository Name</span>
41
+ </label>
42
+ <input type="text" placeholder="Enter repository name" v-model="githubRepo" class="input input-bordered input-primary w-full" />
43
+ </div>
44
+
45
+ <button @click="fetchIssues" class="btn btn-accent w-full mt-4">Fetch Issues</button>
46
+
47
+ <div class="form-control mt-4" v-show="issues.length > 0">
48
+ <label class="label">
49
+ <span class="label-text text-gray-300">Select Issue</span>
50
+ </label>
51
+ <select v-model="selectedIssue" class="select select-primary w-full">
52
+ <option v-for="(issue, index) in issues" :key="index" :value="issue.number">
53
+ #{{ issue.number }}: {{ issue.title }}
54
+ </option>
55
+ </select>
56
+ </div>
57
+
58
+ <div class="form-control mt-4" v-show="selectedIssue">
59
+ <label class="label">
60
+ <span class="label-text text-gray-300">Resolution</span>
61
+ </label>
62
+ <textarea v-model="resolution" placeholder="Enter your resolution here..." class="textarea textarea-primary w-full" />
63
+ </div>
64
+
65
+ <button @click="resolveIssue" class="btn btn-success w-full mt-4" v-show="selectedIssue">Resolve Issue</button>
66
+
67
+ <div class="mt-8" v-show="output">
68
+ <p class="text-gray-300">{{ output }}</p>
69
+ </div>
70
+
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <script>
76
+ new Vue({
77
+ el: '#app',
78
+ data: {
79
+ githubToken: '',
80
+ githubUsername: '',
81
+ githubRepo: '',
82
+ issues: [],
83
+ selectedIssue: null,
84
+ resolution: '',
85
+ output: null
86
+ },
87
+ methods: {
88
+ async fetchIssues() {
89
+ if (!this.githubToken || !this.githubUsername || !this.githubRepo) {
90
+ this.output = 'Please provide all the required fields!';
91
+ return;
92
+ }
93
+ try {
94
+ const response = await fetch('/fetch_issues', {
95
+ method: 'POST',
96
+ headers: {
97
+ 'Content-Type': 'application/json'
98
+ },
99
+ body: JSON.stringify({
100
+ token: this.githubToken,
101
+ username: this.githubUsername,
102
+ repo: this.githubRepo
103
+ })
104
+ });
105
+ const data = await response.json();
106
+ console.log('Fetch Issues Response:', data);
107
+ if (data.success) {
108
+ this.issues = data.issues;
109
+ this.output = null;
110
+ } else {
111
+ this.output = data.message || 'Error fetching issues';
112
+ }
113
+ } catch (error) {
114
+ this.output = 'An error occurred while fetching issues';
115
+ console.error('Error:', error);
116
+ }
117
+ },
118
+ async resolveIssue() {
119
+ if (!this.selectedIssue || !this.resolution) {
120
+ this.output = 'Please select an issue and provide the resolution!';
121
+ return;
122
+ }
123
+ try {
124
+ const response = await fetch('/resolve_issue', {
125
+ method: 'POST',
126
+ headers: {
127
+ 'Content-Type': 'application/json'
128
+ },
129
+ body: JSON.stringify({
130
+ token: this.githubToken,
131
+ username: this.githubUsername,
132
+ repo: this.githubRepo,
133
+ issue_number: this.selectedIssue,
134
+ resolution: this.resolution
135
+ })
136
+ });
137
+ const data = await response.json();
138
+ console.log('Resolve Issue Response:', data);
139
+ if (data.success) {
140
+ this.output = data.message;
141
+ } else {
142
+ this.output = data.message || 'Error resolving issue';
143
+ }
144
+ } catch (error) {
145
+ this.output = 'An error occurred while resolving the issue';
146
+ console.error('Error:', error);
147
+ }
148
+ }
149
+ }
150
+ });
151
+ </script>
152
+ </body>
153
+ </html>