table and json for image categories

This commit is contained in:
sanj 2010-05-07 04:50:32 +05:30
parent 7207bf8773
commit b1243995a9
4 changed files with 119 additions and 4 deletions

View File

@ -38,7 +38,11 @@ class Image(models.Model):
def get_dict(self):
return {
'url': self.url,
'caption': self.caption
'caption': self.caption,
'flyover': {
'id': self.flyover.id,
'name': self.flyover.name
}
}
class ImageCategory(models.Model):
@ -48,6 +52,20 @@ class ImageCategory(models.Model):
def __unicode__(self):
return self.name
def get_dict(self):
images = []
flyovers = []
for i in Image.objects.filter(category=self):
images.append(i.get_dict())
flyovers.append(i.flyover.geojson_as_dict())
return {
'images': images,
'flyovers': {
'type': 'FeatureCollection',
'features': flyovers
}
}
class Video(models.Model):
url = models.URLField("Youtube URL")
caption = models.CharField(max_length=255, blank=True, null=True)

View File

@ -25,3 +25,17 @@ def flyover(request):
'media': f.get_media()
}
return render_to_json_response(d)
def category(request):
cat_id = request.GET['id']
cat_type = request.GET['type']
cat_map = {
'image': ImageCategory,
'video': VideoCategory,
'audio': AudioCategory,
'text': TextCategory
}
klass = cat_map[cat_type]
cat = klass.objects.get(pk=cat_id)
return render_to_json_response(cat.get_dict())

View File

@ -6,6 +6,7 @@
body {
width: 100%;
height: 100%;
background: #999;
}
#wrapper {
@ -13,18 +14,59 @@ body {
height: 100%;
}
#categories {
position: absolute;
top: 10px;
width: 60%;
left: 0px;
text-align: center;
}
#categories table {
height: 200px;
width: 60%;
margin-left: 20%;
-moz-box-shadow: 0px 0px 1em;
-webkit-box-shadow: 0px 0px 1em;
box-shadow: 0px 0px 1em;
}
#categories table tr {
}
#categories table tr td {
cursor: pointer;
}
.imageCategory {
background: #ffd055;
}
.videoCategory {
background: #ff6066;
}
.textCategory {
background: #69fd6c;
}
.audioCategory {
background: #7d69fd;
}
#map {
position: absolute;
top: 0px;
top: 220px;
bottom: 0px;
right: 500px;
right: 40%;
left: 0px;
}
#media {
position: absolute;
right: 0px;
width: 490px;
width: 40%;
top: 0px;
bottom: 0px;
}
@ -74,6 +116,46 @@ function onFeatureSelect(f) {
</head>
<body>
<div id="wrapper">
<div id="categories">
<table>
<tr>
<td class="imageCategory" data-id="11">Flyover sweeps</td>
<td class="imageCategory" data-id="1">Central underview</td>
<td class="imageCategory" data-id="9">Models</td>
<td class="imageCategory" data-id="16">Skywalk sweeps</td>
</tr>
<tr>
<td class="imageCategory" data-id="6">Signs</td>
<td class="imageCategory" data-id="7">Piers</td>
<td class="imageCategory" data-id="15">Columns</td>
<td class="imageCategory" data-id="13">End surfaces</td>
</tr>
<tr>
<td class="imageCategory" data-id="4">Unfinished</td>
<td class="imageCategory" data-id="12">Construction</td>
<td class="videoCategory" data-id="2">Construction</td>
<td class="textCategory" data-id="">Text1</td>
</tr>
<tr>
<td class="imageCategory" data-id="2">Regulation</td>
<td class="imageCategory" data-id="10">Fencing</td>
<td class="videoCategory" data-id="4">In The Way</td>
<td class="textCategory" data-id="">Text2</td>
</tr>
<tr>
<td class="imageCategory" data-id="14">Greenspace</td>
<td class="imageCategory" data-id="8">Posters</td>
<td class="videoCategory" data-id="1">Routes</td>
<td class="textCategory" data-id="">Text3</td>
</tr>
<tr>
<td class="imageCategory" data-id="5">Life underneath</td>
<td class="imageCategory" data-id="3">Storing / Selling</td>
<td class="videoCategory" data-id="3">Stills underneath</td>
<td class="audioCategory" data-id="">Sounds</td>
</tr>
</table>
</div>
<div id="map">
</div>

View File

@ -15,6 +15,7 @@ urlpatterns = patterns('',
(r'^$', 'flyovers.views.index'),
(r'^geojson$', 'flyovers.views.geojson'),
(r'^flyover$', 'flyovers.views.flyover'),
(r'^category$', 'flyovers.views.category'),
# Uncomment the next line to enable the admin:
(r'^admin/', include(admin.site.urls)),
)