<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Urban Analytics Data Infrastructure Portal (Beta)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/portal/config.js"></script>
<script type="text/javascript" src="js/portal/ajax.js"></script>
<script type="text/javascript" src="js/portal/ui/indicatorListBoxGenerator.js"></script>
<script type="text/javascript">
var isSearchBoxActivated = false;
function createMostVisitedIndicatorContent()
{
var mostVisitedBox = document.getElementById("mostVisitedBox");
mostVisitedBox.innerHTML += "<h2>Most visited indicators</h2>";
var configs = new configurationSettings();
createXMLHttpRequest(configs.portal_list_top5_most_visited_indicators, function(response)
{
//alert(JSON.stringify(response));
var indicators = response.indicators_list;
//alert(indicators.length);
var mainUL = document.createElement("ul");
mainUL.className = "popular";
for (var i=0; i< indicators.length; i++)
{
var tmp_indicator = indicators[i];
var tmp_li = document.createElement("li");
mainUL.appendChild(tmp_li);
var tmp_a = document.createElement("a");
tmp_a.title = tmp_indicator.jobname;
tmp_a.href = configs.indicatordetailsPage + "?uuid=" + tmp_indicator.uuid;
tmp_a.appendChild(document.createTextNode(tmp_indicator.jobname));
tmp_li.appendChild(tmp_a);
var tmp_p = document.createElement("p");
tmp_li.appendChild(tmp_p);
tmp_p.appendChild(document.createTextNode("by " +
tmp_indicator.organisation_name + " | for " +
tmp_indicator.geoclass.label));
}
mostVisitedBox.appendChild(mainUL);
}, function(status) {
//do something here if the request was un-successful!
});
}
function clearTextBox(textbox)
{
textbox.value = '';
textbox.style.color = "#000000";
}
function submitSearch()
{
var searchBox = document.getElementById("searchBox");
window.location = "search-results.html?k=" + encodeURIComponent(searchBox.value);
}
function handle(e){
if(e.keyCode === 13){
e.preventDefault(); // Ensure it is only this code that rusn
submitSearch()
}
}
function showListOfThemes()
{
var container = document.getElementById("bbithemes");
container.innerHTML = "";
container.innerHTML += "<h2>BROWSE INDICATORS BY THEMES</h2>";
var configs = new configurationSettings();
createXMLHttpRequest(configs.portal_list_themes_with_indicatorCount
+ "?onturi=" + "http://csdila.unimelb.edu.au/ontologies/f/ThematicClasses.owl" + "&conuri=Theme&ontformat=RDF/XML&namespace=http://csdila.unimelb.edu.au/ontologies/indicatortheme%23" +
"&includeSubClasses=1&withreasoning=1" , function(response)
{
//do your things here if the request was successful!
//alert(JSON.stringify(response));
var outputs = response.outputs;
//alert(JSON.stringify(response));
var top_themes = Object.keys(outputs);
if (top_themes.length > 0)
{
for (var i = 0; i< top_themes.length; i++)
{
var topThemeString = top_themes[i].toString().split('#')[1];
//alert(topThemeString);
var current_top_theme_array = outputs[top_themes[i]];
var ul_container = document.createElement("ul");
var li_topTier_theme_tmp = document.createElement("li");
var li_b_tmp = document.createElement("b");
var li_b_tmp_linkText = document.createTextNode(topThemeString);
li_b_tmp.appendChild(li_b_tmp_linkText);
li_topTier_theme_tmp.appendChild(li_b_tmp);
ul_container.appendChild(li_topTier_theme_tmp);
container.appendChild(ul_container);
//alert(current_top_theme_array.length);
var ul_container2 = document.createElement("ul");
ul_container.appendChild(ul_container2);
for (var j = 0; j< current_top_theme_array.length; j++)
{
//alert(current_top_theme_array[j].label);
var li_theme_tmp = document.createElement("li");
var li_a_tmp = document.createElement("a");
var li_a_tmp_linkText = document.createTextNode(current_top_theme_array[j].label);
li_a_tmp.appendChild(li_a_tmp_linkText);
li_a_tmp.title = current_top_theme_array[j].label;
var href = configs.browseByThemeDetails + "?n=" + current_top_theme_array[j].label + "&themeOntId=" + current_top_theme_array[j].ontid + "&themeclassuri=" + encodeURIComponent(current_top_theme_array[j].namespace + current_top_theme_array[j].instance);
li_a_tmp.href = href;
li_theme_tmp.appendChild(li_a_tmp);
li_theme_tmp.appendChild(document.createTextNode(" (" + current_top_theme_array[j].indicator_count + ")"));
ul_container2.appendChild(li_theme_tmp);
}
}
}
else
{
var p = document.createElement("p");
p.style.color = "red";
p.appendChild(document.createTextNode("No themes exist in the infrastructure!"));
container.appendChild(p);
}
}, function(status) {
//do something here if the request was un-successful!
alert("!");
});
}
function generateRecentIndicators()
{
var container = document.getElementById("mostRecentIndicators");
var containerFeatured = document.getElementById("featured");
container.innerHTML = "";
containerFeatured.innerHTML = "";
var configs = new configurationSettings();
createXMLHttpRequest(configs.portal_list_indicators_topN + "?num=15" , function(response)
{
//alert(JSON.stringify(response));
var indicators = response.data;
if (indicators.length > 0)
{
var featureHTML = "";
for (var i = 0; i< indicators.length; i++)
{
var uuid = indicators[i].uuid;
var title = indicators[i].jobname;
var date = indicators[i].ctime.split(' ')[0];
var publisherid = indicators[i].userid;
var publisher = indicators[i].organisation_name;
var geoBoundary = indicators[i].geoclass;
var themes = indicators[i].themeclass;
var thumbnail = indicators[i].imgurl;
var abstract = indicators[i].jobdesc;
var keyword = indicators[i].keywords;
if (i < 1)
{
// create the features ones - the last 5 published indicators
featureHTML += "<div class=\"post\">";
featureHTML += "<h2><a href=\"" + configs.indicatordetailsPage + "?uuid=" + uuid + "\">" + title + "</a></h2>";
featureHTML += "<p class=\"details\"> " + getHumanReadableDateFromYYMMDD(date) + " | by <a href=\"" + configs.browseByPublisherPage + "?publisherid=" + publisherid + "&publishername=" + publisher + "\">" + publisher + "</a> </p>";
featureHTML += "<div class=\"thumb\"><a href=\"" + configs.indicatordetailsPage + "?uuid=" + uuid + "\">";
if (thumbnail != '')
featureHTML += "<img src=\"" + thumbnail + "\" width=\"250\" alt=\"\"/>";
else
featureHTML += "<img src=\"images/feature-images/urban-analytics-feature1.PNG\" width=\"250\" alt=\"\"/>";
featureHTML += "</a></div>";
featureHTML += "<p>" + abstract + "</p>";
featureHTML += "<p class=\"readmore\">[ <a href=\"" + configs.indicatordetailsPage + "?uuid=" + uuid + "\">read more</a> ]</p>";
if (themes != null)
{
if (themes.length > 0)
{
featureHTML += "<p class=\"tags\">Themes: ";
for (var j = 0; j < themes.length; j++)
{
featureHTML += "<a href=\"" + configs.browseByThemeDetails + "?n=" + themes[j].label + "&themeOntId=" + themes[j].ontid + "&themeclassuri=" + encodeURIComponent(themes[j].instanceuri) + "\">" + themes[j].label + "</a>";
if (j < themes.length - 1)
{
featureHTML += ", ";
}
}
featureHTML += "</p>";
}
} // end if themes != null
featureHTML += "<div class=\"break\"></div></div>";
containerFeatured.innerHTML += featureHTML;
console.log(containerFeatured.outerHTML);
}
else
{
var inHTML = "";
if ((i % 2) == 0)
inHTML += "<div class=\"o post\">";
else
inHTML += "<div class=\"e post\">";
if (thumbnail != '' && thumbnail != null && thumbnail != 'undefined')
{
inHTML += "<img src=\"" + thumbnail + "\" width=\"250\" alt=\"\"/>";
}
else
{
var imageArray = ["images/feature-images/urban-analytics-feature1.PNG", "images/feature-images/urban-analytics-feature2-perth.PNG", "images/feature-images/Chrysanthemum.jpg", "images/feature-images/Desert.jpg", "images/feature-images/Hydrangeas.jpg", "images/feature-images/Jellyfish.jpg", "images/feature-images/Koala.jpg", "images/feature-images/Lighthouse.jpg", "images/feature-images/Tulips.jpg"];
var randomNumber = randomIntFromInterval(0, imageArray.length -1);
inHTML += "<img src=\"" + imageArray[randomNumber] + "\" width=\"250\" alt=\"\"/>";
}
inHTML += "<h2><a href=\"" + configs.indicatordetailsPage + "?uuid=" + uuid + "\">" + title + "</a></h2>";
inHTML += "<p><span class=\"details\">" + getHumanReadableDateFromYYMMDD(date) + " | by <a href=\"" + configs.browseByPublisherPage + "?publisherid=" + publisherid + "&publishername=" + publisher + "\">" + publisher + "</a></span></p>";
inHTML += "<p>" + abstract + " <span class=\"readmore\">[ <a href=\"" + configs.indicatordetailsPage + "?uuid=" + uuid + "\">read more</a> ]</span></p>";
inHTML += "<p class=\"readmore\"> </p>";
if (themes != null)
{
if (themes.length > 0)
{
inHTML += "<span class=\"tags\">Themes: ";
for (var j = 0; j < themes.length; j++)
{
inHTML += "<a href=\"" + configs.browseByThemeDetails + "?n=" + themes[j].label + "&themeOntId=" + themes[j].ontid + "&themeclassuri=" + encodeURIComponent(themes[j].instanceuri) + "\">" + themes[j].label + "</a>";
if (j < themes.length - 1)
{
inHTML += ", ";
}
}
}
} // end if themes != null
inHTML += "</span></div> ";
container.innerHTML += inHTML;
} // end else
} // end for
} // end if indicator count is more than zero
}, function(status) {
//do something here if the request was un-successful!
alert("!");
});
}
</script>
</head>
<body onload="javascript:createMostVisitedIndicatorContent();showListOfThemes();generateRecentIndicators();">
<!-- BEGIN wrapper -->
<div id="wrapper">
<!-- BEGIN header -->
<div id="header">
<table width="100%" border="0" style="margin-top: 15px;">
<tbody>
<tr>
<td>
<h1 class="children" style="font-size: 30px;">Urban Analytics Infrastructure <span style="color:rgba(255,158,0,1.00)">Portal</span></h1>
<p style="margin-bottom:25px; text-transform:none">A Digital Infrastructure for exploring urban quality of life indicators </p>
</td>
<td valign="top" align="center"><br />
<a href="sitemap.html" style="text-decoration:none">Sitemap</a> | <a href="http://apps.csdila.ie.unimelb.edu.au/uadi/" style="text-decoration:none" target="_blank">Login</a></td>
</tr>
</tbody>
</table>
<div width="100%" style="height: 200px; margin-top: 15px;"><img src="images/banner.png" width="980" height="200" alt=""/></div>
<!-- begin pages -->
<ul class="pages">
<!-- begin logo -->
<!-- end pages -->
<!-- end logo -->
</ul>
<!-- end pages -->
<div class="break"></div>
<!-- begin sponsor -->
<div class="sponsor"> <a href="#"></a> </div>
<!-- end sponsor -->
<!-- begin categories -->
<ul class="categories">
<li><a href="index.html" style="background-color: #003366; color: #FFFFFF;">HOME</a></li>
<li><a href="about.html">ABOUT UADI</a></li>
<li><a href="browse.html">BROWSE INDICATORS </a></li>
<li><a href="r-team.html">RESEARCH TEAM</a></li>
<li><a href="partners.html">PARTNERS</a></li>
<li><a href="links.html">LINKS</a></li>
</ul>
<!-- end categories -->
<div style="height:250px;">
<table width="100%" border="0">
<tbody>
<tr>
<td align="center"><p><br />
<br />
<br />
<span style="font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size:28px; font-weight:400">Explore Urban Quality of Life Indicators </span><br />
<span style="font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size:18px; color:rgba(179,177,177,1.00)">Free and open access to urban quality of life indicators for Australian cities</span>
</p>
<p> </p>
<p> </p>
<p> </p>
<p>
<input name="textfield" type="text" onfocus="javascript: clearTextBox(this);" onkeydown="handle(event);" id="searchBox" style="height: 40px; color:rgba(180,173,173,1.00)" value=" Search indicators e.g. Green areas per 100,000 population OR Perth accessibility to jobs" size="100" />
</p>
<p> </p>
<p> </p>
<p>Browse indicators by <strong><a href="browse-alphabetic.html" style="text-decoration:none">Name</a></strong></a>, <strong><a href="browse-by-Year.html" style="text-decoration:none">Year</a></strong></a>, <strong><a href="browse-by-theme.html" style="text-decoration:none">Theme</a></strong> or <strong><a href="browse-geographic.html" style="text-decoration:none">Geographic Boundary</a></strong></p></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- END header -->
<!-- BEGIN content -->
<div id="content">
<!-- begin featured -->
<div id="featured"></div>
<!-- end featured -->
<!-- begin recent posts -->
<div class="recent" id="mostRecentIndicators">
<!-- begin post --><!-- end post -->
<!-- begin post --><!-- end post -->
<!-- begin post --><!-- end post -->
</div>
<!-- end recent posts -->
</div>
<!-- END content -->
<!-- BEGIN sidebar -->
<div id="sidebar">
<!-- begin tag cloud -->
<div class="box">
<h2>Tag Cloud</h2>
<div class="tags"></div>
<img src="images/tagcloudexample.PNG" width="310" height="176" alt=""/></div>
<!-- end tag cloud -->
<!-- begin popular posts -->
<div class="box" id="mostVisitedBox">
</div>
<!-- begin categories -->
<div class="box" id="bbithemes">
<h2>BROWSE INDICATORS BY THEMES</h2>
</div>
<!-- end categories -->
<!-- end popular posts -->
<!-- begin flickr images -->
<!--<div class="box">
<h2>Flickr Images</h2>
<div class="flickr"> <a href="#"><img src="images/_flickr.jpg" alt="" /></a> <a href="#"><img src="images/_flickr.jpg" alt="" /></a> <a href="#"><img src="images/_flickr.jpg" alt="" /></a> <a href="#"><img src="images/_flickr.jpg" alt="" /></a> <a href="#"><img src="images/_flickr.jpg" alt="" /></a> <a href="#"><img src="images/_flickr.jpg" alt="" /></a> </div>
</div>
<!-- end flickr images -->
<!-- begin flickr images -->
<div class="box">
<h2>PROJECT PARTNERS</h2>
<div class="flickr" style="height: 280px;">
<div style="float:left"><img src="images/uni-logos/arc_stacked.png" width="50" alt="" style="padding: 10px;"/></div>
<div style="float:left"><img src="images/uni-logos/uom-logo.png" width="60" alt="" style="padding: 5px;"/></div>
<div style="float:left"><img src="images/uni-logos/UNSW_coat_of_arms.png" width="60" alt="" style="padding: 5px;"/></div>
<div style="float:left"><img src="images/uni-logos/UQ.png" width="60" alt="" style="padding: 10px;"/></div>
<div style="float:left"><img src="images/uni-logos/UOWol.png" width="60" alt="" style="padding: 10px;"/></div>
<div style="float:left"><img src="images/uni-logos/University_of_Canberra.svg.png" width="60" alt="" style="padding: 10px;"/></div>
<div style="float:left"><img src="images/uni-logos/UWA_Logo.png" width="60" alt="" style="padding: 10px;"/></div>
</div>
</div>
<!-- end flickr images -->
<!-- begin Social media -->
<div class="box">
<ul class="bookmarks">
<li class="twt"><a href="#">Follow us on Twitter</a></li>
<li class="fcb"><a href="https://www.facebook.com/Urban-Analytics-Infrastructure-1983766481858163/" target="_blank">Follow us on Facebook</a></li>
</ul>
</div>
<!-- end Social media -->
</div>
<!-- END sidebar -->
</div>
<!-- END wrapper -->
<!-- BEGIN footer -->
<div id="footer">
<p class="l">Copyright © 2017 - <strong>Urban Analytics Infrastructure (Beta version) </strong> · All Rights Reserved.</p>
</div>
<!-- END footer -->
</body>
</html>