forked from hasura/graphql-engine
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (113 loc) · 5.34 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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- instant search -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css">
<link rel="stylesheet" href="index.css">
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>ETL demo using Hasura GraphQL Engine Event Triggers</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-129818961-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-129818961-1');
</script>
</head>
<body class="main">
<div class="container h-100 main-content " id="loading-screen">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-12">
<div><h4 id="loading-text">🏃 Loading...️</h4></div>
</div>
</div>
</div>
<div class="container h-100 main-content hidden" id="input-screen" style="display:none;">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-8 center-form">
<h4>Enter details of a book to add to library</h4>
<hr/>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Title" id="book-title">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Author" id="book-author">
</div>
<button class="btn btn-success" type="button" id="save-button" onclick="saveBook()">✅ Save</button>
<button class="btn btn-light" type="button" id="search-page-button" onclick="showScreen('#search-screen')">🔍 Search library</button>
<div class="error"><span id="error-text"></span></div>
</div>
</div>
</div>
<div class="container h-100 main-content hidden" id="search-screen" style="display:none;">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-12">
<h4>Search among the books in library</h4>
<hr/>
<div class="input-group mb-3" id="search-box">
</div>
<div class="algolia_search_attribution">
<span>
search by
</span>
<span>
<img class="algolia_image" src="algolia-logo.svg" alt="Algolia Search Logo">
</span>
</div>
<div class="error"><span id="error-text"></span></div>
<main class="search-results" >
<div class="col-12">
<ul class="list-group" id="hits">
</ul>
</div>
<div id="pagination"></div>
</main>
<div class="pt-2">
<a href="https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/serverless-etl#architecture" target="_blank">
<img class="col-6 img-fluid" src="arch.png" />
</a>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="main-content">
<div class="hasura-logo">
<a href="https://hasura.io" target="_blank">
<img class="hasura-logo" alt="hasura logo" src="https://graphql-engine-cdn.hasura.io/img/powered_by_hasura_white_200px.png" />
</a>
|
<a href="/console" target="_blank" id="hge-console-link">
Backend
</a>
|
<a href="https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/serverless-etl" target="_blank">
Source
</a>
<div class="footer-small-text"><span>(The database resets every 24 hours)</span></div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Algolia -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="text/html" id="hit-template">
<div class="hit">
<li class="list-group-item list-group-item-light">{{{_highlightResult.title.value}}} by {{{_highlightResult.author.value}}}</li>
</div>
</script>
<!-- custom js -->
<script src="index.js"></script>
</body>
</html>