Update lots of things
This commit is contained in:
Livvy Mackintosh
@ -1,4 +1,6 @@
|
||||
from django.contrib import admin
|
||||
from apps.map.models import CaseStudy
|
||||
from leaflet.admin import LeafletGeoAdmin
|
||||
|
||||
admin.site.register(CaseStudy)
|
||||
from .models import CaseStudy
|
||||
|
||||
admin.site.register(CaseStudy, LeafletGeoAdmin)
|
||||
|
||||
25
apps/map/forms.py
Normal file
25
apps/map/forms.py
Normal file
@ -0,0 +1,25 @@
|
||||
from django import forms
|
||||
from crispy_forms.helper import FormHelper
|
||||
from crispy_forms.layout import Submit
|
||||
from leaflet.forms.widgets import LeafletWidget
|
||||
|
||||
from .models import CaseStudy
|
||||
|
||||
|
||||
class CaseStudyForm(forms.ModelForm):
|
||||
|
||||
def __init__(self, *args, **kwargs):
|
||||
super(CaseStudyForm, self).__init__(*args, **kwargs)
|
||||
self.helper = FormHelper()
|
||||
self.helper.form_id = 'case-study-form'
|
||||
self.helper.form_class = 'form-horizontal'
|
||||
self.helper.form_method = 'post'
|
||||
self.helper.form_action = 'submit'
|
||||
self.helper.label_class = 'col-lg-2'
|
||||
self.helper.field_class = 'col-lg-8'
|
||||
self.helper.add_input(Submit('submit', 'Submit'))
|
||||
|
||||
class Meta:
|
||||
model = CaseStudy
|
||||
fields = '__all__'
|
||||
widgets = {'location': LeafletWidget()}
|
||||
@ -25,10 +25,9 @@ class CaseStudy(models.Model):
|
||||
editable=False
|
||||
)
|
||||
|
||||
project_name = models.CharField(max_length=128)
|
||||
# Location of map pin
|
||||
location = models.PointField()
|
||||
|
||||
project_name = models.CharField(max_length=128)
|
||||
supply_chain = models.CharField(
|
||||
max_length=1,
|
||||
choices=SUPPLY_CHAIN_CHOICES
|
||||
|
||||
BIN
apps/map/static/map/ojuso-logo-white.png
Normal file
BIN
apps/map/static/map/ojuso-logo-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
15
apps/map/templates/map/_nav.html
Normal file
15
apps/map/templates/map/_nav.html
Normal file
@ -0,0 +1,15 @@
|
||||
{% load staticfiles %}
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="/"><img src="{% static "map/ojuso-logo-white.png" %}" alt="Ojuso Logo"></a>
|
||||
</div>
|
||||
<div id="navbar" class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
{% block nav_links %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
67
apps/map/templates/map/base.html
Normal file
67
apps/map/templates/map/base.html
Normal file
@ -0,0 +1,67 @@
|
||||
{% spaceless %}
|
||||
{% load bootstrap3 %}
|
||||
{% load compress %}
|
||||
{% load i18n %}
|
||||
{% load leaflet_tags %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
{# Metadata #}
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content"width=device-width, initial-scale=2">
|
||||
|
||||
<title>{% trans "Ojuso Platform Map" %}</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
{# CDN Stylesheets #}
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
|
||||
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
|
||||
crossorigin="anonymous"
|
||||
rel="stylesheet"/>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js">
|
||||
integrity="sha384-qFIkRsVO/J5orlMvxK1sgAt2FXT67og+NyFTITYzvbIP1IJavVEKZM7YWczXkwpB"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"
|
||||
integrity="sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
<![endif]-->
|
||||
|
||||
{# Additional Stylesheets #}
|
||||
{% compress css %}
|
||||
{% block stylesheets %}
|
||||
<style>
|
||||
.navbar-brand {padding: 5px 15px;}
|
||||
.navbar-brand > img {height: 40px;}
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% endcompress %}
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{# Main Markup #}
|
||||
{% block body %}{% endblock %}
|
||||
|
||||
{# CDN Javascript #}
|
||||
<script src="//code.jquery.com/jquery-3.2.1.min.js"
|
||||
integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
|
||||
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
|
||||
{# Additional Scripts #}
|
||||
{% block scripts %}{% endblock %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
{% endspaceless %}
|
||||
34
apps/map/templates/map/base_with_container.html
Normal file
34
apps/map/templates/map/base_with_container.html
Normal file
@ -0,0 +1,34 @@
|
||||
{% extends "map/base.html" %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ block.super }}
|
||||
<style>
|
||||
body {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.page-lead {
|
||||
padding: 40px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
{% include "map/_nav.html" %}
|
||||
{% block nav_links %}
|
||||
<li><a href="/case-studies">Case Studies</a></li>
|
||||
{% endblock %}
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="page-lead">
|
||||
<h1>{% block title %}{% endblock %}</h1>
|
||||
<p class="lead">{% block description %}{% endblock %}</p>
|
||||
</div>
|
||||
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
|
||||
</div><!-- /.container -->
|
||||
{% endblock %}
|
||||
30
apps/map/templates/map/base_with_jumbo.html
Normal file
30
apps/map/templates/map/base_with_jumbo.html
Normal file
@ -0,0 +1,30 @@
|
||||
{% extends "map/base.html" %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ block.super }}
|
||||
<style>
|
||||
body {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.jumbo {
|
||||
height: calc(100% - 50px);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
{% include "map/_nav.html" %}
|
||||
|
||||
<div class="jumbo">
|
||||
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
|
||||
</div><!-- /.container -->
|
||||
{% endblock %}
|
||||
24
apps/map/templates/map/form.html
Normal file
24
apps/map/templates/map/form.html
Normal file
@ -0,0 +1,24 @@
|
||||
{% extends "map/base_with_container.html" %}
|
||||
{% load compress %}
|
||||
{% load crispy_forms_tags %}
|
||||
{% load i18n %}
|
||||
{% load leaflet_tags %}
|
||||
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ block.super }}
|
||||
{% leaflet_css %}
|
||||
<style> html, body, #main { width: 100; height:100%; } </style>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block title %}{% trans "Submit a Case Study" %}{% endblock %}
|
||||
{% block description %}{% trans "Here you can submit a case study for review and it will be added to the map." %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% crispy form %}
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{% leaflet_js %}
|
||||
{% endblock %}
|
||||
@ -1,56 +1,113 @@
|
||||
{% extends "map/base_with_jumbo.html" %}
|
||||
{% load bootstrap3 %}
|
||||
{% load compress %}
|
||||
{% load i18n %}
|
||||
{% load leaflet_tags %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% trans "Ojuso Platform Map" %}</title>
|
||||
<meta name="viewport" content"width=device-width, initial-scale=2">
|
||||
{% bootstrap_css %}
|
||||
{% leaflet_js %}
|
||||
{% leaflet_css %}
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Ojuso Platform Map</h1>
|
||||
{% leaflet_map "main" callback="main_app_init" %}
|
||||
<div id="modals"></div>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
{% bootstrap_javascript %}
|
||||
<script type="text/javascript">
|
||||
function create(htmlStr) {
|
||||
var frag = document.createDocumentFragment(),
|
||||
temp = document.createElement('div');
|
||||
temp.innerHTML = htmlStr;
|
||||
while (temp.firstChild) {
|
||||
frag.appendChild(temp.firstChild);
|
||||
}
|
||||
return frag;
|
||||
}
|
||||
function main_app_init(map, options) {
|
||||
$.getJSON('/api/case-studies/', function (data) {
|
||||
L.geoJson(data, {
|
||||
onEachFeature: function (feature, layer) {
|
||||
var modalname = "case-study-"+feature.id
|
||||
layer.bindPopup(
|
||||
"<h3>"+feature.properties.project_name+"</h3>"+"<button type='button' class='btn btn-primary btn-block' data-toggle='modal' data-target='#"+modalname+"'>"+"<span class='glyphicon glyphicon-file' aria-hidden='true'></span>"+"View Details"+"</button>"
|
||||
);
|
||||
var modal = create("<div class='modal fade' id='"+modalname+"' tabindex='-1' role='dialog' aria-labelledby='"+modalname+"-label'><div class='modal-dialog' role='document'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button><h4 class='modal-title' id='"+modalname+"-label'>"+feature.properties.project_name+"</h4></div><div class='modal-body'><p>"+feature.properties.description+"</p></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button><button type='button' class='btn btn-primary'>Save changes</button></div></div></div></div>");
|
||||
document.getElementById('modals').appendChild(modal);
|
||||
}
|
||||
}).addTo(map);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ block.super }}
|
||||
{% leaflet_css %}
|
||||
<style> html, body, #main { width: 100; height:100%; } </style>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block title %}{% trans "Ojuso Platform Map" %}{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
<div id="main"></div>
|
||||
<div id="modals"></div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block scripts %}
|
||||
{% leaflet_map "main" callback="main_app_init" creatediv=False %}
|
||||
{% leaflet_js %}
|
||||
<script type="text/javascript">
|
||||
|
||||
// This takes HTML as a string and returns an element
|
||||
function create(htmlStr) {
|
||||
var frag = document.createDocumentFragment(),
|
||||
temp = document.createElement('div');
|
||||
temp.innerHTML = htmlStr;
|
||||
while (temp.firstChild) {
|
||||
frag.appendChild(temp.firstChild);
|
||||
}
|
||||
return frag;
|
||||
}
|
||||
|
||||
// This is called when the map is initialized
|
||||
function main_app_init(map, options) {
|
||||
|
||||
// Pull data as GeoJSON and add to map with a modal
|
||||
$.getJSON('/api/case-studies/', function (data) {
|
||||
L.geoJson(data, {
|
||||
onEachFeature: function (feature, layer) {
|
||||
var modalname = "case-study-"+feature.id
|
||||
layer.bindPopup(
|
||||
"<h3>"+feature.properties.project_name+"</h3>"+
|
||||
"<button type='button' class='btn btn-primary btn-block' data-toggle='modal' data-target='#"+modalname+"'>"
|
||||
+"{% trans "Quick View" %}"+"</button>"
|
||||
);
|
||||
var modal = create(
|
||||
"<div class='modal fade' id='"+modalname+"' tabindex='-1' role='dialog' aria-labelledby='"+modalname+"-label'>"+
|
||||
"<div class='modal-dialog' role='document'>"+
|
||||
"<div class='modal-content'>"+
|
||||
"<div class='modal-header'>"+
|
||||
"<button type='button' class='close' data-dismiss='modal' aria-label='{% trans "Close" %}'>"+
|
||||
"<span aria-hidden='true'>×</span>"+
|
||||
"</button>"+
|
||||
"<h4 class='modal-title' id='"+modalname+"-label'>"+
|
||||
feature.properties.project_name+
|
||||
"</h4>"+
|
||||
"</div>"+
|
||||
"<div class='modal-body'>"+
|
||||
"<p>"+feature.properties.description+"</p>"+
|
||||
"<dl class='dl-horizontal'>"+
|
||||
"<dt>Supply Chain</dt><dd>"+feature.properties.supply_chain+"</dd>"+
|
||||
"<dt>Generation Type</dt><dd>"+feature.properties.generation_type+"</dd>"+
|
||||
"<dt>Associated Companies</dt><dd>"+feature.properties.associated_companies+"</dd>"+
|
||||
"<dt>Financiers</dt><dd>"+feature.properties.financiers+"</dd>"+
|
||||
"<dt>Important Lenders</dt><dd>"+feature.properties.important_lenders+"</dd>"+
|
||||
"<dt>Country</dt><dd>"+feature.properties.country+"</dd>"+
|
||||
"<dt>Affects Indigenous</dt><dd>"+feature.properties.affects_indigenous+"</dd>"+
|
||||
"<dt>Affects Indigenous Reason</dt><dd>"+feature.properties.affects_indigenous_reason+"</dd>"+
|
||||
"<dt>Proposed Start</dt><dd>"+feature.properties.proposed_start+"</dd>"+
|
||||
"<dt>Proposed Completion</dt><dd>"+feature.properties.proposed_completion+"</dd>"+
|
||||
"<dt>Link to Forum</dt><dd>"+feature.properties.link_to_forum+"</dd>"+
|
||||
"<dt>Image</dt><dd>"+feature.properties.image+"</dd>"+
|
||||
"<dt>References</dt><dd>"+feature.properties.references+"</dd>"+
|
||||
"<dt>Commodities</dt><dd>"+feature.properties.commodities+"</dd>"+
|
||||
"<dt>Like to Engage Developer</dt><dd>"+feature.properties.like_to_engage_developer+"</dd>"+
|
||||
"<dt>Like to Engage Investors</dt><dd"+feature.properties.like_to_engage_investors+"></dd>"+
|
||||
"<dt>Author</dt><dd>"+feature.properties.author+"</dd>"+
|
||||
"</dl>"+
|
||||
"</div>"+
|
||||
"<div class='modal-footer'>"+
|
||||
"<button type='button' class='btn btn-default' data-dismiss='modal'>"+
|
||||
"{% trans "Close" %}"+
|
||||
"</button>"+
|
||||
"<button type='button' class='btn btn-primary'>"+
|
||||
"{% trans "Save changes" %}"+
|
||||
"</button>"+
|
||||
"</div>"+
|
||||
"</div>"+
|
||||
"</div>"+
|
||||
"</div>"
|
||||
);
|
||||
document.getElementById('modals').appendChild(modal);
|
||||
}
|
||||
}).addTo(map);
|
||||
});
|
||||
|
||||
// Add an on-click listener for map click events. Show popup with button to submit a casestudy
|
||||
map.on('click', function(e) {
|
||||
var popup = L.popup()
|
||||
.setLatLng(e.latlng)
|
||||
.setContent("<a class='btn btn-primary btn-sm' href='case-study/add?lat="+e.latlng.lat+"&lng="+e.latlng.lng+"' role='button'>{% trans "Submit a Case Study" %}</a>")
|
||||
.openOn(map);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@ -8,5 +8,6 @@ urlpatterns = [
|
||||
url(r'^$', views.index, name='index'),
|
||||
url(r'^data.geojson$',
|
||||
GeoJSONLayerView.as_view(model=CaseStudy, geometry_field='location'),
|
||||
name='data')
|
||||
name='data'),
|
||||
url(r'^case-study/add', views.form, name='form')
|
||||
]
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
from django.shortcuts import render
|
||||
|
||||
from .forms import CaseStudyForm
|
||||
|
||||
|
||||
def index(request):
|
||||
return render(request, 'map/index.html')
|
||||
|
||||
|
||||
def form(request):
|
||||
form = CaseStudyForm
|
||||
return render(request, 'map/form.html', {'form': form})
|
||||
|
||||
Reference in New Issue
Block a user