-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (152 loc) · 8.71 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<title>GitHelm</title>
<meta name="theme-color" content="#111827">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="src/assets/helm.svg" sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="src/style.css" rel="stylesheet" />
<script defer type="module" src="src/main.ts"></script>
</head>
<body class="h-full text-white flex flex-col bg-gray-900">
<header class="flex justify-between items-center pl-5 pr-5 pb-4 pt-4 sticky top-0 z-10">
<div id="header" class="flex ">
<img src="src/assets/helm.svg" title="site logo" width="50" height="50" class="mr-2" />
<h1 class="text-4xl font-bold">GitHelm</h1>
</div>
<div id="buttons" class="flex space-x-4">
<button id="login-button" type="button" class="nav-button">
Login with GitHub
</button>
<button id="logout-button" type="button" class="hidden nav-button">
Logout
</button>
</div>
</header>
<main id="app" class="flex-1 px-5">
<div id="authorized" class="hidden">
<div id="tabs" class="flex justify-center mb-4 md:hidden sticky top-0 z-10 bg-gray-900 lg:w-full">
<button id="tab-pull-requests" type="button" class="tab-button active">Pull Requests</button>
<button id="tab-actions" type="button" class="tab-button">Actions</button>
</div>
<div id="content" class="content grid grid-cols-1 md:grid-cols-2 gap-4">
<div id="loading"
class="fixed mt-20 inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 z-50 hidden">
<img class="spinner" alt="loading" src="src/assets/helm.svg" width="10" height="10" />
</div>
<section id="pull-requests-section" class="glow bg-gray-800 pl-5 pr-5 rounded-lg">
<div class="flex justify-between pb-4 pt-3 lg:sticky top-0 z-10 bg-gray-800">
<h2 class="text-xl font-bold">Pull Requests</h2>
<div>
<button id="edit-pull-requests-button" type="button" class="hover:underline" title="edit pull requests configuration">
<img title="edit pull request config" src="src/assets/edit.svg" width="20" height="20" class="-mb-1"/>
</button>
<button id="save-pull-requests-config-button" type="button" class="hidden px-2 py-1 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded">Save</button>
<button id="cancel-pull-requests-config-button" type="button" class="hidden px-2 py-1 bg-red-500 hover:bg-red-700 text-white font-bold rounded">Cancel</button>
</div>
</div>
<div id="pull-requests">
<p id="prs-not-found" class="hidden">No pull requests found. Configure repositories by clicking the pencil icon above.</p>
</div>
<div id="edit-pull-requests" class="hidden">
<div id="pull-request-config"></div>
<form id="pr-add-repo-form" class="p-2 bg-gray-700 rounded-md">
<input id="pr-org-input" type="text" class="w-full p-2 rounded bg-gray-600 text-white mb-2" placeholder="Organization" required />
<input id="pr-repo-input" type="text" class="w-full p-2 rounded bg-gray-600 text-white mb-2" placeholder="Repository" required />
<div class="w-full p-2 rounded bg-gray-600 text-white mb-2 flex flex-wrap items-center border border-gray-600 focus-within:border-white">
<div id="pr-repo-labels-chips" class="flex flex-wrap"></div>
<input id="pr-repo-labels-input" type="text" class="flex-grow rounded bg-gray-600 text-white mb-2 border-none focus:outline-none" placeholder="Label" />
</div>
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add</button>
</form>
</div>
</section>
<section id="actions-section" class="glow bg-gray-800 pl-5 pr-5 rounded-lg hidden md:block">
<div class="flex justify-between pb-4 pt-3 lg:sticky top-0 z-10 bg-gray-800">
<h2 class="text-xl font-bold">Actions</h2>
<div>
<button id="edit-actions-button" type="button" class="hover:underline" title="edit actions configuration">
<img title="edit-actions-config" src="src/assets/edit.svg" width="20" height="20" class="-mb-1"/>
</button>
<button id="save-actions-config-button" type="button" class="hidden px-2 py-1 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded">Save</button>
<button id="cancel-actions-config-button" type="button" class="hidden px-2 py-1 bg-red-500 hover:bg-red-700 text-white font-bold rounded">Cancel</button>
</div>
</div>
<div id="actions">
<p id="actions-not-found" class="hidden">No actions found. Configure repositories by clicking the pencil icon above.</p>
</div>
<div id="edit-actions" class="hidden">
<div id="actions-config"></div>
<form id="actions-add-repo-form" class="p-2 bg-gray-700 rounded-md">
<input id="actions-org-input" type="text" class="w-full p-2 rounded bg-gray-600 text-white mb-2" placeholder="Organization"
required />
<input id="actions-repo-input" type="text" class="w-full p-2 rounded bg-gray-600 text-white mb-2" placeholder="Repository"
required />
<div class="w-full p-2 rounded bg-gray-600 text-white mb-2 flex flex-wrap items-center border border-gray-600 focus-within:border-white">
<div id="actions-repo-labels-chips" class="flex flex-wrap"></div>
<input id="actions-repo-labels-input" type="text"
class="flex-grow rounded bg-gray-600 text-white mb-2 border-none focus:outline-none" placeholder="Name of action to monitor e.g. release.yml" />
</div>
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add</button>
</form>
</div>
<!-- Actions Modal -->
<div id="review-modal"
class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 hidden overflow-auto">
<div class="bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-lg relative">
<div class="text-2xl font-bold flex justify-between">
<h2>Review Deployment</h2>
<button id="close-review-modal" type="button" title="Close" class="text-gray-400 hover:text-gray-200">
×
</button>
</div>
<h4 id="repo" class="text-1xl italic mb-4"></h4>
<ul id="pending-environments">
</ul>
<div class="mb-4">
<textarea id="review-comment" class="w-full p-2 rounded bg-gray-700 text-white"
placeholder="Leave a comment..."></textarea>
</div>
<div class="flex justify-end space-x-2">
<button type="button" id="reject-action" title="approve"
class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Reject</button>
<button type="button" id="approve-action" title="reject"
class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Approve</button>
</div>
</div>
</section>
</div>
</div>
<div id="pwa-toast" role="alert" aria-labelledby="toast-message">
<div class="message">
<span id="toast-message"></span>
</div>
<div class="buttons">
<button id="pwa-refresh" type="button">
Reload
</button>
<button id="pwa-close" type="button">
Close
</button>
</div>
</div>
</main>
<footer class="p-1 bg-gray-800 flex justify-between items-center">
<div class="flex-1">
<a href="https://github.com/steven-harris/githelm" title="githelm repository" target="_blank" rel="noopener" class="hover:underline">
©
<span id="copyright"></span> GitHelm. All rights reserved.</a>
</div>
<div class="flex-1 text-center align-center">
<label id="last-updated" class="text-gray-400"></label>
<button type="button" title="refresh content" id="refresh-button" class="hidden">
<img src="src/assets/refresh.svg" title="refresh" width="20" height="20" class="pt-2 size-5 text-gray-400" />
</button>
</div>
<a href="https://www.flaticon.com" title="rudder edit icons" class="flex-1 hover:underline text-right" target="_blank" rel="noopener">Icons created
by Flat Icons </a>
</footer>
</body>
</html>