Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit cfb3df0a authored by Renán Sosa Guillen's avatar Renán Sosa Guillen
Browse files
Options

product list and product cart list

parent 363b6b67
Show whitespace changes
Inline Side-by-side
Showing with 158 additions and 321 deletions
catalog/forms.py
View file @ cfb3df0a
......@@ -12,7 +12,7 @@ platforms = [
class ASFSearchForm(forms.Form):
polygon = forms.CharField(widget=forms.TextInput(attrs={'class':"form-control"}))
platform = forms.ChoiceField(choices=platforms, widget=forms.Select(attrs={'class':"form-control"}))
start = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=False)
end = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=False)
start = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=True)
end = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=True)
maxResults = forms.IntegerField()
catalog/static/css/body.css
View file @ cfb3df0a
......@@ -148,6 +148,19 @@ div .item-info-view {
background-color: #dc7828;
}
div .item-info-cart-view {
position: absolute;
background: white;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
top: -106px;
left: -417px;
width: 400px;
height: 360px;
background-color: #dc7828;
}
ul.control-sidebar-menu li div.item-info-view {
display: none;
}
......@@ -161,6 +174,10 @@ div .cropped-preview {
overflow: hidden;
}
div .cropped-preview img {
width: 50px;
}
div .cropped-preview img {
width: 100%;
border-top-left-radius: 10px;
......@@ -197,12 +214,32 @@ div .item-info-view .button-add-del {
padding-left: 58%;
}
div #product-list-globe {
div #product-list-globe,
div #product-list-cart-items {
max-height: 500px;
overflow: auto;
}
div #product-list-cart-items {
max-height: 167px;
overflow: auto;
}
div .sidebar-title h3 {
float: left;
}
div .sidebar-button button {
margin-top: 17px;
margin-left: 10px;
}
/*----------product list clases----------*/
div .draw-button {
float: left;
margin-left: 20px;
}
div .sidebar-input {
border-radius: 3px;
border: 1px solid #374850;
......
catalog/static/js/dataRetrieval.js
View file @ cfb3df0a
// // Get the <datalist> and <input> elements.
// var input = document.getElementById('ajax-input');
// var value = input.value;
// var dataList = document.getElementById('polygon-list');
// console.log("VALUE:", value);
// // Create a new XMLHttpRequest.
// var request = new XMLHttpRequest();
//
// // Handle state changes for the request.
// request.onreadystatechange = function(response) {
// if (request.readyState === 4) {
// if (request.status === 200) {
// // Parse the JSON
// var jsonOptions = JSON.parse(request.responseText);
//
// // Loop over the JSON array.
// jsonOptions.forEach(function(item) {
// // Create a new <option> element.
// var option = document.createElement('option');
// // Set the value using the item in the JSON array.
// option.value = item;
// // Add the <option> element to the <datalist>.
// dataList.appendChild(option);
// });
//
// // Update the placeholder text.
// input.placeholder = "Search...";
// } else {
// // An error occured :(
// input.placeholder = "Couldn't load datalist options :(";
// }
// }
// };
//
// // Update the placeholder text.
// input.placeholder = "Loading options...";
//
// // Set up and make the request.
// request.open('POST', 'http://localhost:8080/catalog/searchsubmit/', true);
// request.send({
// value: value
// });
var OPT_LIST_IS_HIDDEN = true;
var INPUT_ON_FOCUS = false;
var polygonList;
var product_list = []
var product_list = [];
var makeRequest = function (value) {
var pol_element = document.getElementById('polygon-list');
......@@ -119,6 +77,10 @@ function drawPolygon(element) {
})
}
function erase_input() {
$('#ajax-input').val('');
}
var prevfeature = null;
function drawApiResponse(element) {
product_list.catalog.forEach(function (data) {
......@@ -170,6 +132,10 @@ $(document).ready(function () {
var typingTimer;
var typingInterval = 800; //milliseconds
var productListPrev = [];
var productListGlobe = [];
var productListCart = {}; // this array represent DB where products will be stored
// On keyup, start the contdown
$('#ajax-input').on('input', function () {
var value = $('#ajax-input').val();
......@@ -190,7 +156,6 @@ $(document).ready(function () {
}
});
var productListGlobe = []; // this array represent DB where products will be stored
var PRODUCT_IN_LIST = false;
// function for making POST request to productList in view.py
......@@ -203,14 +168,19 @@ $(document).ready(function () {
data: submit_data,
dataType: 'json',
success: function (data) {
PRODUCT_IN_LIST = false;
productListGlobe = [];
productListPrev = [];
console.log("DATA: ", data);
product_list = data;
productListGlobe = data.catalog;
console.log('GLOBEEE: ', productListGlobe);
if (productListGlobe.length > 0) {
if (productListPrev.length > 0) {
PRODUCT_IN_LIST = false;
for (var i = 0; i < productListGlobe.length; i++) {
if (productListGlobe[i].id === data.id) {
i = productListGlobe.length;
for (var i = 0; i < productListPrev.length; i++) {
if (productListPrev[i].id === data.id) {
i = productListPrev.length;
PRODUCT_IN_LIST = true;
}
}
......@@ -218,7 +188,7 @@ $(document).ready(function () {
if (!PRODUCT_IN_LIST) {
console.log("DEFS: ahora crea producto");
productListGlobe.push(data);
productListPrev.push(data);
data.catalog.forEach(function (data) {
console.log("DD: ", data);
......@@ -231,55 +201,7 @@ $(document).ready(function () {
},
dataType: 'text',
success: function (response) {
var raw_img = response.toString("base64");
console.log("from img response: ", raw_img);
var product_html = '<li id="' + data.id + ' class="hover-me">'+
'<a href="javascript:void(0)">'+
'<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>'+
'<div class="menu-info">'+
'<h4 class="control-sidebar-subheading">' + data.product.producttype + '_' + data.product.tileid + '</h4>'+
'<p>' + data.product.beginposition + '</p>'+
'</div>'+
'</a>'+
// '</li>'+
// '<div id="' + data.id + '-hover" class="row">'+
// '<div class="col-12">'+
'<div id="' + data.id + '-hover" class="item-info-view">'+
'<div class="cropped-preview">'+
// '<img src="' + data.img + '">'+
'<img src="data:image/jpeg;base64, ' + raw_img + '">'+
'</div>'+
'<div class="polygon-item-data">'+
'<div class="city">' + data.product.identifier + '</div>'+
'<p class="info">'+
'<i class="fa fa-sync-alt"></i>'+
'<span class="type">Size:</span><br>'+
'<span class="data-info">' + data.product.size + '</span>'+
'</p>'+
'<p class="info">'+
'<i class="fa fa-calendar-gear"></i>'+
'<span class="type">Instrument:</span><br>'+
'<span class="data-info">' + data.product.instrumentname + '</span>'+
'</p>'+
// '<p class="info">'+
// '<i class="fa fa-cloud"></i>'+
// '<span class="type">Cloud percentage:</span><br>'+
// '<span class="data-info">' + data.product.cloudcoverpercentage + ' %</span>'+
// '</p>'+
'</div>'+
// '<div class="button-add-del">'+
// '<button type="button" class="btn btn-success">Add to cart</button> '+
// '<button type="button" class="btn btn-danger">Remove</button>'+
// '</div>'+
'</div>'+
// '</div>'+
// '</div>'+
'</li>';
$('#product-list-globe').append(product_html);
}
});
console.log("from img response: ", response);
var product_html = '<li id="' + data.id + '" onclick="drawApiResponse(this)" class="hover-me">'+
'<a href="javascript:void(0)">'+
'<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>'+
......@@ -288,12 +210,10 @@ $(document).ready(function () {
'<p>' + data.product.beginposition + '</p>'+
'</div>'+
'</a>'+
// '</li>'+
// '<div id="' + data.id + '-hover" class="row">'+
// '<div class="col-12">'+
'<div id="' + data.id + '-hover" class="item-info-view">'+
'<div class="cropped-preview">'+
'<img src="' + data.img + '">'+
// '<img src="data:image/jpeg;base64, ' + raw_img + '">'+
'</div>'+
'<div class="polygon-item-data">'+
'<div class="city">' + data.product.identifier + '</div>'+
......@@ -303,26 +223,17 @@ $(document).ready(function () {
'<span class="data-info">' + data.product.size + '</span>'+
'</p>'+
'<p class="info">'+
'<i class="fa fa-calendar-gear"></i>'+
'<i class="fa fa-gear"></i>'+
'<span class="type">Instrument:</span><br>'+
'<span class="data-info">' + data.product.instrumentname + '</span>'+
'</p>'+
// '<p class="info">'+
// '<i class="fa fa-cloud"></i>'+
// '<span class="type">Cloud percentage:</span><br>'+
// '<span class="data-info">' + data.product.cloudcoverpercentage + ' %</span>'+
// '</p>'+
'</div>'+
// '<div class="button-add-del">'+
// '<button type="button" class="btn btn-success">Add to cart</button> '+
// '<button type="button" class="btn btn-danger">Remove</button>'+
// '</div>'+
'</div>'+
// '</div>'+
// '</div>'+
'</li>';
$('#product-list-globe').append(product_html);
}
});
});
}
}
......@@ -331,9 +242,35 @@ $(document).ready(function () {
event.preventDefault();
});
$('#add-cart').click(function () {
product_list.catalog.forEach(function (data) {
var product_html = '<li id="' + data.id + ' class="hover-me">'+
var product_id = productListGlobe[0].id;
productListCart[product_id] = productListGlobe;
console.log("CAAART: ", productListCart);
var globe_element = document.getElementById('product-list-globe');
while (globe_element.firstChild) {
globe_element.removeChild(globe_element.firstChild);
}
var product_html = '<li class="treeview">'+
'<a href="#">'+
'<i class="fa fa-cubes"></i>'+
'<span>Product Name</span>'+
'<span class="pull-right-container">'+
'<span class="label label-primary pull-right"></span>'+
'</span>'+
'</a>'+
'<ul class="treeview-menu sidebar-form">'+
'<li>'+
'<ul id="product-list-cart-items" class="control-sidebar-menu">';
var product_html_li = '';
console.log("djdj: ", productListGlobe);
productListGlobe.forEach(function (data) {
console.log("SS: ", data.product.size);
product_html_li += '<li id="' + data.id + ' class="hover-me">'+
'<a href="javascript:void(0)">'+
'<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>'+
'<div class="menu-info">'+
......@@ -341,10 +278,7 @@ $(document).ready(function () {
'<p>' + data.product.beginposition + '</p>'+
'</div>'+
'</a>'+
// '</li>'+
// '<div id="' + data.id + '-hover" class="row">'+
// '<div class="col-12">'+
'<div id="' + data.id + '-hover" class="item-info-view">'+
'<div id="' + data.id + '-hover" class="item-info-cart-view">'+
'<div class="cropped-preview">'+
'<img src="' + data.img + '">'+
'</div>'+
......@@ -360,22 +294,18 @@ $(document).ready(function () {
'<span class="type">Instrument:</span><br>'+
'<span class="data-info">' + data.product.instrumentname + '</span>'+
'</p>'+
// '<p class="info">'+
// '<i class="fa fa-cloud"></i>'+
// '<span class="type">Cloud percentage:</span><br>'+
// '<span class="data-info">' + data.product.cloudcoverpercentage + ' %</span>'+
// '</p>'+
'</div>'+
// '<div class="button-add-del">'+
// '<button type="button" class="btn btn-success">Add to cart</button> '+
// '<button type="button" class="btn btn-danger">Remove</button>'+
// '</div>'+
'</div>'+
// '</div>'+
// '</div>'+
'</li>';
$('#product-list-globe').append(product_html);
});
product_html_li += '</ul>'+
'</li>'+
'</ul>'+
'</li>';
$('#product-list-cart').append(product_html + product_html_li);
// product_html = '';
});
});
catalog/templates/base_top.html
View file @ cfb3df0a
......@@ -104,127 +104,18 @@
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading"><b>Products</b></h3>
<div class="container">
<div class="sidebar-title">
<h3><b>Products</b></h3>
</div>
<div class="sidebar-button">
<button type="button" name="search" id="add-cart" class="btn btn-primary">
Add to cart
</button>
<ul id="product-list-globe" class="control-sidebar-menu"></ul>
<!-- <li id="me-id">
<a href="javascript:void(0)">
<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Mérida, Yucatán</h4>
<p>May 26th 2018</p>
</div>
</a>
</li>
<div id="me-id-hover" class="row">
<div class="col-12">
<div id="polygon id" class="item-info-view">
<div class="cropped-preview">
<img src="{% static 'images/sat_preview/sat_test.jpg' %}">
</div>
<div class="polygon-item-data">
<div class="city">Mérida, Yucatán</div>
<p class="info">
<span class="type">Process:</span><br>
Vegetation index
</p>
<p class="info">
<span class="type">Date range:</span><br>
2018-05-19 to 2018-05-26
</p>
<p class="info">
<span class="type">Polygon:</span><br>
WKT format
</p>
<p class="info">
<span class="type">Cloud percentage:</span><br>
25%
</p>
</div>
<div class="button-add-del">
<button type="button" class="btn btn-success">Add to cart</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<li id="va-id">
<a href="javascript:void(0)">
<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Valladolid, Yucatán</h4>
<p>May 26th 2018</p>
</div>
</a>
</li>
<div id="va-id-hover" class="row">
<div class="col-12">
<div id="polygon id" class="item-info-view">
<div class="cropped-preview">
<img src="{% static 'images/sat_preview/sat_test.jpg' %}">
</div>
<div class="polygon-item-data">
<div class="city">Valladolid, Yucatán</div>
<p class="info">
<span class="type">Process:</span><br>
Water bodies
</p>
<p class="info">
<span class="type">Date range:</span><br>
2018-05-19 to 2018-05-26
</p>
<p class="info">
<span class="type">Polygon:</span><br>
WKT format
</p>
<p class="info">
<span class="type">Cloud percentage:</span><br>
40%
</p>
</div>
<div class="button-add-del">
<button type="button" class="btn btn-success">Add to cart</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div> -->
<!-- <h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
</ul> -->
<!-- /.control-sidebar-menu -->
<!-- <h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
</ul> -->
<!-- this ul element is filled with data -->
<ul id="product-list-globe" class="control-sidebar-menu"></ul>
<!-- /.control-sidebar-menu -->
</div>
<!-- /.tab-pane -->
......@@ -233,33 +124,18 @@
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
</p>
<div class="container">
<div class="sidebar-title">
<h3><b>My cart</b></h3>
</div>
<div class="sidebar-button">
<button type="button" name="search" id="add-cart" class="btn btn-primary">
Buy products
</button>
</div>
<!-- /.form-group -->
<h3 class="control-sidebar-heading">Chat Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked>
</label>
</div>
<!-- /.form-group -->
</form>
<!-- this ul element is filled with data -->
<ul id="product-list-cart" class="sidebar-menu" data-widget="tree"></ul>
</div>
<!-- /.tab-pane -->
</div>
......
catalog/templates/map.html
View file @ cfb3df0a
......@@ -123,7 +123,7 @@
<div class="input-group">
<input type="text" id="ajax-input" name="value" class="form-control" placeholder="Search region...">
<span class="input-group-btn">
<button type="button" name="search" id="search-btn" class="btn btn-flat">
<button type="button" name="search" id="search-btn" class="btn btn-flat" onclick="erase_input()">
<i class="fa fa-eraser"></i>
</button>
</span>
......@@ -139,11 +139,6 @@
<!-- <form role="form" target="catalogFrame" action="{% url 'productList' %}" method="post"> -->
<form id='product-form' role="form" method="post">
{% csrf_token %}
<div class="row" id="option-list">
<div class="col-12">
<ul id="polygon-list" class="no-bullet"></ul>
</div>
</div>
<ul class="sidebar-menu" data-widget="tree">
<li class="treeview">
<a href="#">
......@@ -212,7 +207,7 @@
</form>
</div>
<div id="div-draw-btn">
<div id="div-draw-btn" class="draw-button">
<button type="submit" name="draw" id="draw-btn" class="btn btn-primary" onclick="osmap.draw()"><i class="fa fa-object-ungroup"></i> Dibujar</button>
</div>
<!-- form-group-->
......
catalog/views.py
View file @ cfb3df0a
......@@ -9,8 +9,7 @@ from django.urls import reverse
from django.views.generic.base import View
from django.template import loader
from urllib import urlencode
import requests, json, unicodedata
import random, sys, imp
import requests, json, unicodedata, sys
sys.path.append('../')
from geosentinel import APISentinel
......@@ -43,11 +42,11 @@ def requestToImage(request):
img_link = request.GET['value']
# img_link = img_link[:img_link.find("/") + 2] + "emmhp:geoemm29@" + img_link[img_link.find("/") + 2:]
r = requests.get(img_link, auth=("emmhp", "geoemm29"), stream=True)
# r = requests.get(img_link, auth=("emmhp", "geoemm29"), stream=True)
# print("RAAAW: ", r.raw.read())
# return JsonResponse({'img': "hello"})
return HttpResponse(r.raw.read(), content_type="image/jpeg")
return JsonResponse({'img': "reqToIMG"})
# return HttpResponse(r.raw.read(), content_type="image/jpeg")
#-------------------------------------------------------------------------------
def productList(request):
......@@ -93,7 +92,7 @@ def productList(request):
'cloud_percentage': cloud_percentage,
'product' : products[p],
'id' : products[p]['uuid'],
'img' : img_link
'img' : img_preview
})
return JsonResponse({'catalog':catalog});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment