This repository has been archived by the owner on Nov 5, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
actors.html
126 lines (117 loc) · 6.04 KB
/
actors.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
<!DOCTYPE html>
<html>
<head>
<title>Virtual-assembly proof of concept</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="library/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/css/sidebar.css" rel="stylesheet">
<link href="library/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="resources/css/av.css" type="text/css" rel="stylesheet" />
<link href="library/rdfviewer/rdfviewer.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="library/jquery/jquery.min.js"></script>
<script type="text/javascript" src="library/LDP-framework/ldpframework.js"></script>
<script type="text/javascript" src="library/handlebars/handlebars.js"></script>
<script type="text/javascript" src="config/config.js"></script>
<script type="text/javascript" src="library/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script type="text/javascript" src="library/rdfviewer/rdf.js"></script>
<script type="text/javascript" src="resources/js/av.js"></script>
<!-- Project templates -->
<script id="project-browser-template" type="text/x-handlebars-template" src="templates/project/project-browser.handlebars"></script>
<script id="project-detail-template" type="text/x-handlebars-template" src="templates/project/project-detail.handlebars"></script>
<script id="project-item-template" type="text/x-handlebars-template" src="templates/project/project-item.handlebars"></script>
<!-- Actor templates -->
<script id="actor-browser-template" type="text/x-handlebars-template" src="templates/actor/actor-browser.handlebars"></script>
<script id="actor-detail-template" type="text/x-handlebars-template" src="templates/actor/actor-detail.handlebars"></script>
<script id="actor-posts-template" type="text/x-handlebars-template" src="templates/actor/actor-posts.handlebars"></script>
<script id="actor-item-template" type="text/x-handlebars-template" src="templates/actor/actor-item.handlebars"></script>
<script id="actor-list-template" type="text/x-handlebars-template" src="templates/actor/actor-list.handlebars"></script>
<!-- Post templates -->
<script id="post-item-template" type="text/x-handlebars-template" src="templates/post/post-item.handlebars"></script>
<script>
function getActorsList() {
var hostNameList = getKnownHostsList();
var actorsList = [];
hostNameList.forEach(function (host) {
var url = host + '/ldp/actor/';
store.get(url).then(function(object) {
if (object['ldp:contains']) {
$.each(object['ldp:contains'], function(index, actor) {
store.get(actor).then(function(data) {
var name = data['foaf:firstName'] + ' ' + data['foaf:name'];
var description = data['av:biography'] ? (data['av:biography'].substring(0, 147) + '...') : null;
var currentActor = {
'id': data['@id'],
'name': name,
'biography': description
};
actorsList.push(currentActor);
displayTemplate('#actor-list-template', '#detail', actorsList);
});
});
} else {
displayTemplate('#actor-list-template', '#detail', undefined);
}
});
});
}
$(function() {
window.store = new MyStore({
container: config.containerUrl + 'actor/',
context: config.contextUrl,
template: '#actor-detail-template',
partials: {
'actorItem': '#actor-item-template',
'actorDetail': '#actor-detail-template',
'projectItem': '#project-item-template',
'projectDetail': '#project-detail-template',
'postItem': '#post-item-template'
}
});
getActorsList();
// refreshCardFromHash();
});
$(window).on('hashchange', function() {
refreshCardFromHash();
});
</script>
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav nav-pills nav-stacked" id="menu">
<li class="active">
<a href="#" id="menu"><span class="fa-stack fa-lg pull-left"><i class="fa fa-bars fa-stack-1x "></i></span></a>
</li>
<li>
<a href="#" id="graph"><span class="fa-stack fa-lg pull-left"><i class="fa fa-search fa-stack-1x "></i></span></a>
</li>
<li>
<a href="#" id="map"><span class="fa-stack fa-lg pull-left"><i class="fa fa-map-o fa-stack-1x "></i></span></a>
</li>
<li>
<a href="#" id="card"><span class="fa-stack fa-lg pull-left"><i class="fa fa-info-circle fa-stack-1x "></i></span></a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-reply fa-stack-1x "></i></span></a>
</li>
</ul>
</div>
<div id="content-wrapper">
<div id="main-container" class="container-fluid">
<div id="detail-wrapper" class="col-md-9">
<div id="detail"></div>
</div>
<div id="browser" class="col-md-3">
<div id="project-browser" class="row"></div>
<div id="actor-browser" class="row"></div>
</div>
</div>
<div id="graph-container" style="display: none;" height="1000px">
<svg id="chart" width="1000px" height="1000px"></svg>
</div>
</div>
</div>
</body>
</html>