macros.html 11.9 KB
Newer Older
1
{% macro preview(lecture) %}
Andreas Valder's avatar
Andreas Valder committed
2
<li class="list-group-item">
3
4
5
	<a href="{{url_for('lecture', id=lecture['id'])}}" title="{{ lecture.course.title }}" style="color: #000">
		<div class="hidden-xs">
			<div class="row">
6
				<img class="col-xs-4" style="max-height: 120px; height: auto; width:170px" src="{{ config.VIDEOPREFIX }}/{{ lecture['titlefile'] }}" alt="Vorschaubild" onerror="this.src='{{url_for('static',filename='no-thumbnail.png')}}'; this.onerror=''; ">
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
				<div class="col-xs-4">
					<span><strong>{{ lecture.course.short }}</strong>{% if ismod() %} <i>({{lecture.course_id}})</i>{% endif %}</span><br>
					<span>{% if ismod() %}ID: {{lecture.id}}{% endif %}</span><br>
					<span>{{ lecture['time'] }}</span>
					{% if lecture['speaker'] %}
						<div class="small">Gehalten von {{ lecture['speaker']|safe }} </div>
					{% endif %}
				</div>
				<div class="col-xs-4">
					<div>{{ lecture['title']|fixnl|safe  }}</div>
					<p style="font-style: italic; color: #777;">{{ lecture['comment']|fixnl|safe }}</p>
				</div>
			</div>
		</div>
		<div class="visible-xs">
			<ul class="list-unstyled">
				<li>
					<img style="width: 100%;" src="{{ config.VIDEOPREFIX }}/{{ lecture['titlefile'] }}" alt="Vorschaubild" onerror="this.src='{{url_for('static',filename='no-thumbnail.png')}}'; this.onerror=''; ">
				</li>
				<li>
					<strong>{{ lecture.course.short }}</strong> {{ lecture['time'] }}
				</li>
29
				{% if lecture['speaker'] %}
30
31
32
				<li>
					<span class="small">Gehalten von {{ lecture['speaker']|safe }} </span>
				</li>
33
				{% endif %}
34
35
36
37
38
39
40
				<li>
					{{ lecture['title']|fixnl|safe  }}
				</li>
				<li>
					<p style="font-style: italic; color: #777;">{{ lecture['comment']|fixnl|safe }}</p>
				</li>
			</ul>
Andreas Valder's avatar
Andreas Valder committed
41
42
		</div>
	</a>
Andreas Valder's avatar
Andreas Valder committed
43
44
</li>

Andreas Valder's avatar
Andreas Valder committed
45
46
{% endmacro %}

Julian Rother's avatar
Julian Rother committed
47
{% macro player(lecture, videos) %}
Andreas Valder's avatar
Andreas Valder committed
48
<video id="videoplayer" style="width: 100%" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="320" controls data-wasnotplayed="1"  data-setup='{ "plugins" : {"hotkeys": {"seekStep": 15, "enableVolumeScroll": false, "alwaysCaptureHotkeys": true}, "videoJsResolutionSwitcher": { "ui": true, "default": "720p", "dynamicLabel": true } }, "customControlsOnMobile": true, "playbackRates": [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4] }'>
49
	{% for v in videos|sort(attribute='player_prio', reverse=True) %}
50
		<source type="video/mp4" src="{{ config.VIDEOPREFIX }}/{{ v.path }}" label="{{ v.format_description }}"/>
Andreas Valder's avatar
Andreas Valder committed
51
	{% endfor %}
52
	<track srclang="de" kind="chapters" src="{{ url_for('chapters',lectureid=lecture.id) }}" />
Andreas Valder's avatar
Andreas Valder committed
53
</video>
Andreas Valder's avatar
Andreas Valder committed
54
<script>
55
56
$('#videoplayer').addClass("vjs-16-9");
$('#videoplayer').css("width");
Jan Philipp Hafer's avatar
Jan Philipp Hafer committed
57
58
59
60
61
62
63
64
65
66
67
68
$(function() {
	var playerplay = function() {
		if ($('#videoplayer').data("wasnotplayed") == 1) {
			videojs('videoplayer').play();
			$('#videoplayer').data("wasnotplayed","0");
		}
	};
	$(window).focus(playerplay);
	if (document.hasFocus()) {
		playerplay();
	}
});
Andreas Valder's avatar
Andreas Valder committed
69
</script>
Andreas Valder's avatar
Andreas Valder committed
70
{% endmacro %}
71
72

{% macro course_list_item(course,show_semester=False) %}
73
<li class="list-group-item list-group-item-condensed {% if (not course.visible) or (not course.listed) %}list-group-item-danger{% endif %}">
74
	<div class="row">
Andreas Valder's avatar
Andreas Valder committed
75
			{% if show_semester %}
76
				<span class="col-xs-2 col-md-1">
77
					{{ course.semester|semester }}
Andreas Valder's avatar
Andreas Valder committed
78
				</span>
79
				<span class="col-xs-10 col-md-6">
Andreas Valder's avatar
Andreas Valder committed
80
			{% else %}
81
				<span class="col-xs-12 col-md-7">
Andreas Valder's avatar
Andreas Valder committed
82
			{% endif %}
83
				<a href="{{url_for('course', handle=course.handle)}}">
84
					{{ course.title }}{% if ismod() %}<i> ({{course.id}})</i>{% endif %}
85
				</a>
86
			</span>
87
			<span class="col-xs-8 col-md-3">
Andreas Valder's avatar
Andreas Valder committed
88
89
				{{ course.organizer }}
			</span>
90
			<span class="col-xs-4 col-md-2">
Andreas Valder's avatar
Andreas Valder committed
91
92
				{{ course.subject }}
			</span>
93
94
95
	</div>
</li>
{% endmacro %}
Andreas Valder's avatar
Andreas Valder committed
96

97
{% macro video_download_btn(videos) %}
98
 {% if not ismod() %}
99
<span class="btn btn-default dropdown-toggle{% if videos|length is equalto 0 %} disabled{% endif %}" type="button" data-toggle="dropdown">Download <span class="caret"></span></span>
100
<ul class="dropdown-menu">
101
	{% for v in videos|sort(attribute='prio', reverse=True) if (v.downloadable or ismod() ) %}
102
		<li><a href="{{ config.VIDEOPREFIX }}/{{v.path}}">{{v.format_description}} ({{v.file_size|filesizeformat(true)}})</a></li>
103
104
	{% endfor %}
</ul>
105
106
107
108
109
110
{% endif %}
{% if not ismod() %}
<noscript> 
{% else %}
<span>
{% endif %}
111
	<ul class="pull-right list-unstyled" style="margin-left:10px;">
112
		{% for v in videos|sort(attribute='prio', reverse=True) if (v.downloadable or ismod() ) %}
113
		<li>{{moderator_delete(['videos',v.id,'deleted'])}} {{ moderator_checkbox(['videos',v.id,'visible'], v.visible) }} <a href="{{ config.VIDEOPREFIX }}/{{v.path}}">{{v.format_description}} ({{v.file_size|filesizeformat(true)}})</a></li>
114
115
		{% endfor %}
	</ul>
116
117
118
119
120
{% if not ismod() %}
</noscript> 
{% else %}
</span>
{% endif %}
121
122
{% endmacro %}

Andreas Valder's avatar
Andreas Valder committed
123
124
125
126
127
{%macro video_embed_btn(lectureid) %}
<a class="btn btn-default" id="embedcodebtn" data-container="body" data-toggle="popover" data-placement="bottom">
	<span>Einbetten</span>
</a>
<script>
Andreas Valder's avatar
Andreas Valder committed
128
{% set embedcode = '<iframe width="700" height="394" src="'+url_for('embed', id=lectureid, _external=True)+'" frameborder="0" allowfullscreen="true"></iframe>' %}
Andreas Valder's avatar
Andreas Valder committed
129
130
131
132
133
134
135
136
137
138
$('#embedcodebtn').popover(
		{
			html:true,
			title:'Einbettcode',
			content:'<span><input type="text" onclick="this.select()" value="{{embedcode}}"></span>'
		}
		)
</script>
{% endmacro %}

139
{% macro lecture_list_item(lecture,videos,global_permissions) %}
140
<li class="list-group-item" id="lecture-{{lecture.id}}">
Andreas Valder's avatar
Andreas Valder committed
141
	<div class="row">
142
143
144
145
146
147
148
		<div style="background-image: url('{% if not lecture.titlefile %}{{url_for('static',filename='no-thumbnail.png')}}{% else %}{{ config.VIDEOPREFIX }}/{{lecture.titlefile}}'){% endif %}" class="col-sm-2 col-xs-12 thumbnailimg">
		{% if not videos|length is equalto 0 %}
			<a href="{{url_for('lecture', id=lecture.id)}}">
				<span class="glyphicon glyphicon-play-circle playpreviewbtn"></span>
			</a>
		{% endif %}
		</div>
Andreas Valder's avatar
Andreas Valder committed
149
150
		<span class="col-sm-3 col-xs-12">
			<ul class="list-unstyled">
151
152
153
154
				<li>{{ moderator_editor(['lectures',lecture.id,'title'], lecture.title) }}</li>
				{% if lecture.speaker or ismod() %}<li>Gehalten von {{ moderator_editor(['lectures',lecture.id,'speaker'], lecture.speaker) }}</li>{% endif %}
				<li>{{ moderator_editor(['lectures',lecture.id,'time'], lecture.time) }} </li>
				<li>Dauer: {{ moderator_editor(['lectures',lecture.id,'duration'], lecture.duration) }} min</li>
155
				{% if  ismod() %}
156
				<li>ID: <a href="{{url_for('course',handle=lecture.course.handle)}}#lecture-{{lecture.id}}">{{lecture.id}}</a></i>
157
				{% endif %}
Andreas Valder's avatar
Andreas Valder committed
158
			</ul>
Andreas Valder's avatar
Andreas Valder committed
159
		</span>
Andreas Valder's avatar
Andreas Valder committed
160
		<span class="col-sm-3 col-xs-12">
161
			<ul class="list-unstyled">
162
				<li>{{ moderator_editor(['lectures',lecture.id,'comment'], lecture.comment) }}</li>
Andreas Valder's avatar
Andreas Valder committed
163
				{% if  ismod() %}
164
165
166
				<li>{{ moderator_editor(['lectures',lecture.id,'internal'], lecture.internal) }}</li>
				<li>Sichtbar: {{ moderator_checkbox(['lectures',lecture.id,'visible'], lecture.visible) }}</li>
				<li>Hörsaal: {{ moderator_editor(['lectures',lecture.id,'place'], lecture.place) }} </li>
Andreas Valder's avatar
Andreas Valder committed
167
				{% endif %}
168
			</ul>
Andreas Valder's avatar
Andreas Valder committed
169
		</span>
Andreas Valder's avatar
Andreas Valder committed
170
		<div class="col-sm-4 col-xs-12">
171
			<ul class="list-inline">
Andreas Valder's avatar
Andreas Valder committed
172
				<li class="dropdown">
Andreas Valder's avatar
Andreas Valder committed
173
174
					{{ video_download_btn(videos) }}
				</li>
175
176
				<li class="pull-right">
					{{ moderator_permissioneditor('lecture', lecture.id, lecture.perm, global_permissions) }}
Andreas Valder's avatar
Andreas Valder committed
177
				</li>
178
				<li class="pull-right">
179
					{{ moderator_delete(['lectures',lecture.id,'deleted']) }}
Andreas Valder's avatar
Andreas Valder committed
180
181
182
				</li>
			</ul>
		</div>
Andreas Valder's avatar
Andreas Valder committed
183
184
185
	</div>
</li>
{% endmacro %}
186

187
{% macro moderator_editor (path,value) %}
188
	{% if ismod() %}
189
190
191
192
193
194
	<span class="moderator_editor" data-path="{{path|join('.')}}" >
		<a class="moderator_editor_sign btn btn-default" title="{{path|join('.')}}" data-toggle="tooltip" tabindex="0" style="padding: 3px; margin-right: 5px;">
			<span class="glyphicon glyphicon-pencil"></span>
		</a>
		<span class="moderator_editor_value">{{ value|safe }}</span>
	</span>
195
	{% else %}
196
		{{value|fixnl|safe}}
197
	{% endif %}
198
199
{% endmacro %}

200
{% macro moderator_checkbox (path,value) %}
201
	{% if ismod() %}
202
	<input title="{{path|join('.')}}" data-toggle="tooltip" type="checkbox" data-path="{{path|join('.')}}" {% if value %} checked {% endif %} onchange="moderator.editor.changeboxclick(this)"/>
203
204
	{% endif %}
{% endmacro %}
205

206
{% macro moderator_delete (path) %}
207
	{% if ismod() %}
208
	<button class="btn btn-default" style="background-color: red;" data-path="{{path|join('.')}}" onclick="moderator.editor.deletebtnclick(this)">
Andreas Valder's avatar
Andreas Valder committed
209
210
211
212
213
		<span class="glyphicon glyphicon-trash"></span>
	</button>
	{% endif %}
{% endmacro %}

214
215
216
{% macro moderator_permissioneditor(type,id,perm,global_permissions) %}
	{% set tmp = global_permissions.extend(perm) %}
	{% set permdescription = perm|permdescr %}
217
218
219
220
221
222
223
224
225
	{% set permlogos = '' %}

	{% if permdescription[0] == 'public' %}
		{% set permlogos = '<span class="fa fa-globe" aria-hidden="true"></span>' %}
	{% endif %}
	{% if permdescription[0] == 'password' %}
		{% set permlogos = '<span class="fa fa-lock" aria-hidden="true"></span>' %}
	{% endif %}
	{% if permdescription[0] == 'l2p' %}
226
		{% set permlogos = '<span class="fa" aria-hidden="true" style="width: 12px; height: 14px; background-size: cover;  background-image: url(\'/static/l2p-logo.gif\');"></span>' %}
227
228
	{% endif %}
	{% if permdescription[0] == 'rwth' %}
229
		{% set permlogos = '<span class="fa" aria-hidden="true" style="width: 25px; height: 20px; background-size: cover;  background-image: url(\'/static/rwth.png\');"></span>' %}
230
	{% endif %}
231
232
233
	{% if permdescription[0] == 'fsmpi' %}
		{% set permlogos = '<span class="fa" aria-hidden="true" style="width: 25px; height: 20px; background-size: cover;  background-image: url(\'/static/fsmpi.png\');"></span>' %}
	{% endif %}
234
235

	{% if ismod() %}
236
		<button class="btn btn-default modmoderator_permissioneditor" data-type="{{ type }}" data-id="{{ id }}">
237
			{{ permlogos|safe }}	
238
		</button>
Andreas Valder's avatar
Andreas Valder committed
239
	{% else %}
Andreas Valder's avatar
Andreas Valder committed
240
		<span title="{{permdescription[1]}}">
241
			{{ permlogos|safe }}	
Andreas Valder's avatar
Andreas Valder committed
242
		</span>
243
	{% endif %}
Andreas Valder's avatar
Andreas Valder committed
244
	
245
{% endmacro %}
Andreas Valder's avatar
Andreas Valder committed
246
247

{% macro vtttime(time) %}{{ '%02d:%02d:%02d.000'|format( time//3600, (time//60)%60, time%60) }}{% endmacro %}
248
249
250
251
252
253
254
255
256
257

{% macro stats_viewsperday(id, title, type="scatter", course=None, lecture=None, video=None) %}
<script>
	$.ajax({
		method: "GET",
		url: "{{url_for('stats_viewsperday', course=course, lecture=lecture, video=video)}}",
		dataType: "json",
		error: moderator.api.handleapierror,
		success: function (data) {
			var traces = [];
258
259
			for (var i = 1; i < data.views.length; i++) {
				traces.push({"x": data.times, "y": data.views[i].vals, "type": "{{type}}", "name": data.views[i].name, line: {"width": 1}});
260
			}
261
262
			if (data.views.length > 2)
				traces.push({"x": data.times, "y": data.views[0].vals, "type": "{{type}}", "name": "gesamt", line: {"color": "black", "width": 2}});
263
264
265
266
267
268
269
270
271
			var layout = {
				"title": "{{title}}",
				"showlegend": (traces.length != 1)
			};
			Plotly.newPlot("{{id}}", traces, layout, { "modeBarButtonsToRemove": ['sendDataToCloud','hoverCompareCartesian'], "displaylogo": false});
		}
	});
</script>
{% endmacro %}
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307

{% macro stats_generic(id, req, title, param=None, type="scatter") %}
<script>
	$.ajax({
		method: "GET",
		url: "{{url_for('stats_generic', req=req, param=param)}}",
		dataType: "json",
		error: moderator.api.handleapierror,
		success: function (data) {
			var layout = {
				"title": "{{title}}",
				"showlegend": false
			};
			Plotly.newPlot("{{id}}", [{"x": data.x, "y": data.y, "type": "{{type}}"}], layout, { "modeBarButtonsToRemove": ['sendDataToCloud','hoverCompareCartesian'], "displaylogo": false});
		}
	});
</script>
{% endmacro %}

{% macro stats_pie(id, req, title, showlegend=True, param=None) %}
<script>
	$.ajax({
		method: "GET",
		url: "{{url_for('stats_generic', req=req, param=param)}}",
		dataType: "json",
		error: moderator.api.handleapierror,
		success: function (data) {
			var layout = {
				"title": "{{title}}",
				"showlegend": {% if showledgend %}true{% else %}false{% endif %}
			};
			Plotly.newPlot("{{id}}", [{"labels": data.x, "values": data.y, "type": "pie"}], layout, { "modeBarButtonsToRemove": ['sendDataToCloud','hoverCompareCartesian'], "displaylogo": false});
		}
	});
</script>
{% endmacro %}