| author | ymh <ymh.work@gmail.com> |
| Thu, 02 Aug 2018 11:08:33 +0200 | |
| changeset 590 | b4464d8a84a3 |
| parent 320 | 81945eedc63f |
| permissions | -rw-r--r-- |
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
1 |
<!DOCTYPE html> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
2 |
<html lang="en"> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
3 |
<head> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
4 |
<meta charset="utf-8"> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
5 |
<title>Iconolab</title> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
6 |
<link rel="stylesheet" href="/static/iconolab/css/iconolab.css"> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
7 |
<style> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
8 |
body { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
9 |
margin-top: 40px; |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
10 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
11 |
</style> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
12 |
</head> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
13 |
<body> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
14 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
15 |
<div class="container-fluid"> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
16 |
<div class="row"> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
17 |
<div class="col-md-9"> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
18 |
<div id="wrapper"> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
19 |
<image-annotator ref="annotator" image="img/main-image.jpg"></image-annotator> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
20 |
</div> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
21 |
</div> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
22 |
<div class="col-md-3"> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
23 |
<div class="alert alert-success" style="display: none;">Annotation saved in LocalStorage!</div> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
24 |
<pre id="annotation"></pre> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
25 |
</div> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
26 |
</div> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
27 |
</div> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
28 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
29 |
<script src="/static/iconolab/js/vendor.js"></script> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
30 |
<script src="/static/iconolab/js/iconolab.js"></script> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
31 |
<script> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
32 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
33 |
function showAlert() { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
34 |
$('.alert-success').show(); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
35 |
setTimeout(function() { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
36 |
$('.alert-success').hide(); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
37 |
}, 3000); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
38 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
39 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
40 |
var vm = new Vue({ |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
41 |
el: '#wrapper' |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
42 |
}); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
43 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
44 |
var data = localStorage.getItem('annotation'); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
45 |
if (data) { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
46 |
var annotation = JSON.parse(data); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
47 |
vm.$refs.annotator.setAnnotation(annotation); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
48 |
$('#annotation').text(JSON.stringify(annotation, null, 2)); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
49 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
50 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
51 |
vm.$refs.annotator.$on('save', function(data) { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
52 |
console.log('Saving in localStorage', JSON.stringify(data)); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
53 |
showAlert(); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
54 |
localStorage.setItem('annotation', JSON.stringify(data)); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
55 |
}); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
56 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
57 |
</script> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
58 |
</body> |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
59 |
</html> |