-
Notifications
You must be signed in to change notification settings - Fork 0
/
etoservice-standalone-yearheader.html
125 lines (117 loc) · 3.34 KB
/
etoservice-standalone-yearheader.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
<!DOCTYPE html>
<html>
<meta http-equiv="cache-control" content="no-cache" />
<script src="//cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<div id="app" width="100%">
<div v-if="loaded">
<p><small> This list was autogenerated from <a href="https://www.mtmt.hu/">MTMT</a> on {{date}}. Generate your <a href="https://github.com/ferdinandyb/mtmt-publist">own</a>. </small></p>
<ol>
<div v-for="year in yearOrder">
<h2>{{year}}</h2>
<li v-for="a in orderedArticles[year]">
<span v-for="w in _.orderBy(a.Authors,'Index')">
<b v-if="w.IsUser == true">{{w.FamilyName}}, {{w.GivenName[0]}}., </b>
<span v-else>{{w.FamilyName}}, {{w.GivenName[0]}}., </span>
</span>
<i><a v-bind:href="a.Doi">{{a.Title}}</a>, </i>
{{a.Journal}}
({{a.Year}})
</li>
</div>
</ol>
</div>
<div v-else>
Generating up-to-date paperlist from MTMT, please wait.
<div class="spinner"></div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
articles : [],
date: "",
loaded: false
},
methods: {
},
computed: {
orderedArticles: function () {
dict = {};
for (article of this.articles){
if (!(article.Year in dict)){
dict[article.Year] = []
}
dict[article.Year].push(article)
}
return dict
},
yearOrder: function () {
return Object.keys(this.orderedArticles).sort().reverse()
}
},
mounted(){
fetch ("https://etoservice.elte.hu/mtmt-publist/user?mtid=10028021").then(res => res.json()).then(
json => {
this.articles = json.Papers
var date = new Date(json.Time * 1000);
this.date = date.toLocaleString();
this.loaded = true
}
)
}
})
</script>
<style>
.spinner {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #000000;
margin: 20px;
width: 100px;
height: 100px;
position: relative;
left: 50%;
top: 50%;
z-index: 1;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
</style>
</body>
</html>