-
Notifications
You must be signed in to change notification settings - Fork 582
/
index.html
145 lines (141 loc) · 6.99 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
<!DOCTYPE html>
<!-- Copyright 2019 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<!-- [START getting_started_background_js] -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Translations</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#translate-form").submit(function(e) {
e.preventDefault();
// Get value, make sure it's not empty.
if ($("#v").val() == "") {
return;
}
$.ajax({
type: "POST",
url: "/request-translation",
data: $(this).serialize(),
success: function(data) {
// Show snackbar.
console.log(data);
var notification = document.querySelector('.mdl-js-snackbar');
$("#snackbar").removeClass("mdl-color--red-100");
$("#snackbar").addClass("mdl-color--green-100");
notification.MaterialSnackbar.showSnackbar({
message: 'Translation requested'
});
},
error: function(data) {
// Show snackbar.
console.log("Error requesting translation");
var notification = document.querySelector('.mdl-js-snackbar');
$("#snackbar").removeClass("mdl-color--green-100");
$("#snackbar").addClass("mdl-color--red-100");
notification.MaterialSnackbar.showSnackbar({
message: 'Translation request failed'
});
}
});
});
});
</script>
<style>
.lang {
width: 50px;
}
.translate-form {
display: inline;
}
</style>
</head>
<!-- [END getting_started_background_js] -->
<!-- [START getting_started_background_html] -->
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Translate with Background Processing</span>
</div>
</header>
<main class="mdl-layout__content">
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col"></div>
<div class="mdl-cell mdl-cell--3-col">
<form id="translate-form" class="translate-form">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="v" name="v">
<label class="mdl-textfield__label" for="v">Text to translate...</label>
</div>
<select class="mdl-textfield__input lang" name="lang">
<option value="de">de</option>
<option value="en">en</option>
<option value="es">es</option>
<option value="fr">fr</option>
<option value="ja">ja</option>
<option value="sw">sw</option>
</select>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" type="submit"
name="submit">Submit</button>
</form>
</div>
<div class="mdl-cell mdl-cell--8-col">
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric"><strong>Original</strong></th>
<th class="mdl-data-table__cell--non-numeric"><strong>Translation</strong></th>
</tr>
</thead>
<tbody>
{% for translation in translations %}
<tr>
<td class="mdl-data-table__cell--non-numeric">
<span class="mdl-chip mdl-color--primary">
<span class="mdl-chip__text mdl-color-text--white">{{ translation['OriginalLanguage'] }} </span>
</span>
{{ translation['Original'] }}
</td>
<td class="mdl-data-table__cell--non-numeric">
<span class="mdl-chip mdl-color--accent">
<span class="mdl-chip__text mdl-color-text--white">{{ translation['Language'] }} </span>
</span>
{{ translation['Translated'] }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<br/>
<button class="mdl-button mdl-js-button mdl-button--raised" type="button" onClick="window.location.reload();">
Refresh
</button>
</div>
</div>
</div>
<div aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-snackbar mdl-js-snackbar" id="snackbar">
<div class="mdl-snackbar__text mdl-color-text--black"></div>
<button type="button" class="mdl-snackbar__action"></button>
</div>
</main>
</div>
</body>
</html>
<!-- [END getting_started_background_html] -->