Skip to content

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

product-cart functionality

parent 34cbd991
Show whitespace changes
Inline Side-by-side
Showing with 271 additions and 127 deletions
catalog/forms.py
View file @ 79f3469d
# -*- coding: utf-8 -*- # -*- coding: utf-8 -*-
from django import forms from django import forms
import datetime
#from django.contrib.auth.forms import UserCreationForm #from django.contrib.auth.forms import UserCreationForm
#from django.contrib.auth.models import User #from django.contrib.auth.models import User
#from buscador.models import Investigador, Reto #from buscador.models import Investigador, Reto
...@@ -12,7 +13,7 @@ platforms = [ ...@@ -12,7 +13,7 @@ platforms = [
class ASFSearchForm(forms.Form): class ASFSearchForm(forms.Form):
polygon = forms.CharField(widget=forms.TextInput(attrs={'class':"form-control"})) polygon = forms.CharField(widget=forms.TextInput(attrs={'class':"form-control"}))
platform = forms.ChoiceField(choices=platforms, widget=forms.Select(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=True) start = forms.DateField(widget=forms.DateInput(attrs={'type':'date'}), required=True)
end = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=True) end = forms.DateField(initial=datetime.date.today, widget=forms.DateInput(attrs={'type':'date'}), required=True)
maxResults = forms.IntegerField() maxResults = forms.IntegerField()
catalog/static/css/body.css
View file @ 79f3469d
...@@ -135,87 +135,181 @@ li.pol { ...@@ -135,87 +135,181 @@ li.pol {
border-color: #222d32; border-color: #222d32;
} }
div .item-info-view { /*div .item-info-view {*/
/*position: absolute;*/
/*background: white;*/
/*border-top-left-radius: 10px;*/
/*border-bottom-left-radius: 10px;*/
/*border-bottom-right-radius: 10px;*/
/*top: 52px;*/
/*left: -402px;*/
/*width: 400px;*/
/*height: 360px;*/
/*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,*/
/*ul.control-sidebar-menu li div.item-info-cart-view {*/
/*display: none;*/
/*}*/
/*ul.control-sidebar-menu li:hover div.item-info-view,*/
/*ul.control-sidebar-menu li:hover div.item-info-cart-view {*/
/*display: block;*/
/*}*/
/*div .cropped-preview {*/
/*max-height: 200px;*/
/*overflow: hidden;*/
/*}*/
div .info-product-box {
position: absolute; position: absolute;
background: white; display: block;
border-top-left-radius: 10px; top: 148px;
border-bottom-left-radius: 10px; left: -552px;
border-bottom-right-radius: 10px; height: 90px;
top: 52px; background: #fff;
left: -402px; width: 240%;
width: 400px; box-shadow: 0 1px 1px rgba(0,0,0,0.1);
height: 360px; border-radius: 2px;
background-color: #dc7828; margin-bottom: 15px;
} }
div .item-info-cart-view { ul.control-sidebar-menu li div.bg-geo {
position: absolute; display: none;
background: white; }
border-top-left-radius: 10px;
border-bottom-left-radius: 10px; ul.control-sidebar-menu li:hover div.bg-geo {
border-bottom-right-radius: 10px; display: block;
top: -106px; }
left: -417px;
width: 400px; div .bg-geo {
height: 360px;
background-color: #dc7828; background-color: #dc7828;
} }
ul.control-sidebar-menu li div.item-info-view, .info-product-box-img {
ul.control-sidebar-menu li div.item-info-cart-view { border-top-left-radius: 2px;
display: none; border-bottom-left-radius: 2px;
float: left;
height: 90px;
width: 90px;
text-align: center;
} }
ul.control-sidebar-menu li:hover div.item-info-view, .info-product-box-img img {
ul.control-sidebar-menu li:hover div.item-info-cart-view { border-top-left-radius: 2px;
display: block; border-bottom-left-radius: 2px;
height: 90px;
} }
div .cropped-preview { .info-product-box-content {
max-height: 200px; font: Helvetica;
overflow: hidden; padding: 5px 10px;
margin-left: 90px;
} }
div .cropped-preview img { /*.info-product-box-text {*/
width: 50px; /*text-transform: uppercase;*/
/*}*/
.info-product-box-number {
display: block;
font-weight: bold;
font-size: 18px;
} }
div .cropped-preview img { .info-product-box .progress .progress-bar {
width: 100%; border-radius: 0;
border-top-left-radius: 10px; background: #fff;
} }
div .polygon-item-data { .info-product-box .progress {
margin: 10px; background: rgba(0,0,0,0.2);
color: white; margin: 5px -10px 5px -10px;
height: 2px;
} }
div .polygon-item-data .city { .progress-description {
font-size: 12px; margin: 0;
font-weight: bolder;
padding-bottom: 5px;
border-bottom: 2px solid;
} }
div .polygon-item-data .info { .progress-description,
font-size: 16px; .info-product-box-text {
margin-top: 15px; display: block;
margin-left: 15px; font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
div .polygon-item-data .info .type { .info-product-box-text,
font-weight: bold; .info-product-box-number,
margin-left: 10px; .progress-description {
color: white;
} }
div .polygon-item-data .info .data-info { div .menu-info h4 {
margin-left: 27px; cursor: pointer;
} }
div .item-info-view .button-add-del { .treeview-menu > li {
padding-left: 58%; text-align: center;
} }
/*div .cropped-preview img {*/
/*width: 50px;*/
/*}*/
/*div .cropped-preview img {*/
/*width: 100%;*/
/*border-top-left-radius: 10px;*/
/*}*/
/*div .polygon-item-data {*/
/*margin: 10px;*/
/*color: white;*/
/*}*/
/*div .polygon-item-data .city {*/
/*font-size: 12px;*/
/*font-weight: bolder;*/
/*padding-bottom: 5px;*/
/*border-bottom: 2px solid;*/
/*}*/
/*div .polygon-item-data .info {*/
/*font-size: 16px;*/
/*margin-top: 15px;*/
/*margin-left: 15px;*/
/*}*/
/*div .polygon-item-data .info .type {*/
/*font-weight: bold;*/
/*margin-left: 10px;*/
/*}*/
/*div .polygon-item-data .info .data-info {*/
/*margin-left: 27px;*/
/*}*/
/*div .item-info-view .button-add-del {*/
/*padding-left: 58%;*/
/*}*/
div #product-list-globe, div #product-list-globe,
div #product-list-cart-items { div #product-list-cart-items {
max-height: 500px; max-height: 500px;
...@@ -235,6 +329,18 @@ div .sidebar-button button { ...@@ -235,6 +329,18 @@ div .sidebar-button button {
margin-top: 17px; margin-top: 17px;
margin-left: 10px; margin-left: 10px;
} }
.menu-info input[type=checkbox] {
position: relative;
left: 140px;
bottom: 30px;
}
/*ul.control-sidebar-menu input[type=checkbox] {*/
/*position: absolute;*/
/*right: 20px;*/
/*bottom: 35px;*/
/*}*/
/*----------product list clases----------*/ /*----------product list clases----------*/
div .draw-button { div .draw-button {
......
catalog/static/js/dataRetrieval.js
View file @ 79f3469d
...@@ -2,6 +2,7 @@ var OPT_LIST_IS_HIDDEN = true; ...@@ -2,6 +2,7 @@ var OPT_LIST_IS_HIDDEN = true;
var INPUT_ON_FOCUS = false; var INPUT_ON_FOCUS = false;
var polygonList; var polygonList;
var product_list = []; var product_list = [];
var PRODUCT_COUNTER = 0;
var makeRequest = function (value) { var makeRequest = function (value) {
var pol_element = document.getElementById('polygon-list'); var pol_element = document.getElementById('polygon-list');
...@@ -90,8 +91,8 @@ $("#id_polygon").on('keyup', function (e) { ...@@ -90,8 +91,8 @@ $("#id_polygon").on('keyup', function (e) {
} }
}); });
function erase_product_globe_list() { function erase_product_list_globe() {
var pol_element = document.getElementById('product-list-cart'); var pol_element = document.getElementById('product-list-globe');
while (pol_element.firstChild) { while (pol_element.firstChild) {
pol_element.removeChild(pol_element.firstChild); pol_element.removeChild(pol_element.firstChild);
} }
...@@ -100,7 +101,7 @@ function erase_product_globe_list() { ...@@ -100,7 +101,7 @@ function erase_product_globe_list() {
var prevfeature = null; var prevfeature = null;
function drawApiResponse(element) { function drawApiResponse(element) {
product_list.catalog.forEach(function (data) { product_list.catalog.forEach(function (data) {
if (data.id === element.id) { if (data.id === element.id.replace("-h4", '')) {
// osmap.removePolygon(); // osmap.removePolygon();
prevfeature = osmap.addfootprint(data.product.footprint, prevfeature); prevfeature = osmap.addfootprint(data.product.footprint, prevfeature);
} }
...@@ -141,7 +142,6 @@ $(document).click(function (event) { ...@@ -141,7 +142,6 @@ $(document).click(function (event) {
}); });
$(document).ready(function () { $(document).ready(function () {
var pol_element = document.getElementById('polygon-list'); var pol_element = document.getElementById('polygon-list');
...@@ -178,7 +178,7 @@ $(document).ready(function () { ...@@ -178,7 +178,7 @@ $(document).ready(function () {
$('#product-form').submit(function (event) { $('#product-form').submit(function (event) {
var submit_data = $('#product-form').serialize(); var submit_data = $('#product-form').serialize();
erase_product_globe_list(); erase_product_list_globe();
$.ajax({ $.ajax({
type: "POST", type: "POST",
...@@ -207,6 +207,7 @@ $(document).ready(function () { ...@@ -207,6 +207,7 @@ $(document).ready(function () {
if (!PRODUCT_IN_LIST) { if (!PRODUCT_IN_LIST) {
console.log("DEFS: ahora crea producto"); console.log("DEFS: ahora crea producto");
productListPrev.push(data); productListPrev.push(data);
var div_top = 148;
data.catalog.forEach(function (data) { data.catalog.forEach(function (data) {
console.log("DD: ", data); console.log("DD: ", data);
...@@ -219,43 +220,45 @@ $(document).ready(function () { ...@@ -219,43 +220,45 @@ $(document).ready(function () {
}, },
dataType: 'json', dataType: 'json',
success: function (res) { success: function (res) {
var product_html = '<li id="' + data.id + '" onclick="drawApiResponse(this)" class="hover-me">'+ console.log("DIV_TOP: ", div_top);
'<a href="javascript:void(0)">'+ var product_html = '<li id="' + data.id + '">' +
'<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>'+ '<a href="javascript:void(0)">' +
'<div class="menu-info">'+ '<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>' +
'<h4 class="control-sidebar-subheading">' + data.product.producttype + '_' + data.product.tileid + '</h4>'+ '<div class="menu-info">' +
'<p>' + data.product.beginposition + '</p>'+ '<h4 id="' + data.id + '-h4" class="control-sidebar-subheading" onclick="drawApiResponse(this)">' +
'</div>'+ data.product.producttype + '_' + data.product.tileid +
'</a>'+ '</h4>' +
'<div id="' + data.id + '-hover" class="item-info-view">'+ '<p>' + data.product.beginposition + '</p>' +
'<div class="cropped-preview">'+ '<input type="checkbox" name="product_selected" value="' + data.id + '" checked>' +
// '<img src="' + data.img + '">'+
'<img src="data:image/png;base64, ' + res.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-gear"></i>'+
'<span class="type">Instrument:</span><br>'+
'<span class="data-info">' + data.product.instrumentname + '</span>'+
'</p>'+
'</div>'+
'</div>'+ '</div>'+
'</a>' +
'<div class="info-product-box bg-geo" style="top: ' + div_top + 'px;">' +
'<span class="info-product-box-img">' +
'<img src="data:image/jpeg;base64, ' + res.img + '">' +
'</span>' +
'<div class="info-product-box-content">' +
'<span class="info-product-box-text">' + data.product.identifier + '</span>' +
'<span class="info-product-box-number">' + data.product.size + '</span>' +
'<div class="progress">' +
'<div class="progress-bar" style="width: 100%"></div>' +
'</div>' +
'<span class="progress-description">' + data.product.instrumentname + '</span>' +
'</div>' +
'</div>' +
'</li>'; '</li>';
$('#product-list-globe').append(product_html); $('#product-list-globe').append(product_html);
div_top += 75;
} }
}); });
}); });
$('#cart').removeClass("active");
$('#globe').addClass("active"); $('#globe').addClass("active");
$('#control-sidebar-home-tab').attr('class', "tab-pane active"); // $('#control-sidebar-home-tab').attr('class', "tab-pane active");
$('#control-sidebar-settings-tab').removeClass("active");
$('#control-sidebar-home-tab').addClass("active");
$('aside').addClass("control-sidebar-open"); $('aside').addClass("control-sidebar-open");
} }
} }
...@@ -265,21 +268,24 @@ $(document).ready(function () { ...@@ -265,21 +268,24 @@ $(document).ready(function () {
}); });
$('#add-cart').click(function () {
var product_id = productListGlobe[0].id;
productListCart[product_id] = productListGlobe;
console.log("CAAART: ", productListCart);
var globe_element = document.getElementById('product-list-globe'); $('#product-to-cart-form').submit(function (event) {
while (globe_element.firstChild) { var submit_data = $('#product-to-cart-form').serialize();
globe_element.removeChild(globe_element.firstChild);
} event.preventDefault();
erase_product_list_globe();
console.log("Submitted data:", typeof(submit_data));
console.log("Submitted data:", submit_data);
var submit_data_array = submit_data.split("&product_selected=");
PRODUCT_COUNTER += 1; // this variable counts the number of products in shopping cart
var product_html = '<li class="treeview">'+ var product_html = '<li class="treeview">'+
'<a href="#">'+ '<a href="#">'+
'<i class="fa fa-cubes"></i>'+ '<i class="fa fa-cubes"></i>'+
'<span>Product Name</span>'+ '<span>Product ' + PRODUCT_COUNTER + '</span>'+
'<span class="pull-right-container">'+ '<span class="pull-right-container">'+
'<span class="label label-primary pull-right"></span>'+ '<span class="label label-primary pull-right"></span>'+
'</span>'+ '</span>'+
...@@ -289,37 +295,40 @@ $(document).ready(function () { ...@@ -289,37 +295,40 @@ $(document).ready(function () {
'<ul id="product-list-cart-items" class="control-sidebar-menu">'; '<ul id="product-list-cart-items" class="control-sidebar-menu">';
var product_html_li = ''; var product_html_li = '';
var div_top = 148;
console.log("djdj: ", productListGlobe); console.log("djdj: ", productListGlobe);
productListGlobe.forEach(function (data) { productListGlobe.forEach(function (data) {
if (submit_data_array.indexOf(data.id) > -1) {
console.log("DATA sí esta: ", data.id);
console.log("SS: ", data.product.size); console.log("SS: ", data.product.size);
product_html_li += '<li id="' + data.id + '" class="hover-me">'+
'<a href="javascript:void(0)">'+ product_html_li += '<li id="' + data.id + '">' +
'<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>'+ '<a href="javascript:void(0)">' +
'<div class="menu-info">'+ '<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>' +
'<h4 class="control-sidebar-subheading">' + data.product.producttype + '_' + data.product.tileid + '</h4>'+ '<div class="menu-info">' +
'<p>' + data.product.beginposition + '</p>'+ '<h4 id="' + data.id + '-h4" class="control-sidebar-subheading">' +
'</div>'+ data.product.producttype + '_' + data.product.tileid +
'</a>'+ '</h4>' +
'<div id="' + data.id + '-hover" class="item-info-cart-view">'+ '<p>' + data.product.beginposition + '</p>' +
'<div class="cropped-preview">'+
'<img src="' + data.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-gear"></i>'+
'<span class="type">Instrument:</span><br>'+
'<span class="data-info">' + data.product.instrumentname + '</span>'+
'</p>'+
'</div>'+
'</div>'+ '</div>'+
'</a>' +
'<div class="info-product-box bg-geo" style="top: ' + div_top + 'px;">' +
'<span class="info-product-box-img">' +
'<img src="/static/images/sat_preview/sat_test.jpg">' +
'</span>' +
'<div class="info-product-box-content">' +
'<span class="info-product-box-text">' + data.product.identifier + '</span>' +
'<span class="info-product-box-number">' + data.product.size + '</span>' +
'<div class="progress">' +
'<div class="progress-bar" style="width: 100%"></div>' +
'</div>' +
'<span class="progress-description">' + data.product.instrumentname + '</span>' +
'</div>' +
'</div>' +
'</li>'; '</li>';
console.log("DUPLI: ", product_html_li);
div_top += 52;
}
}); });
product_html_li += '</ul>'+ product_html_li += '</ul>'+
...@@ -327,8 +336,7 @@ $(document).ready(function () { ...@@ -327,8 +336,7 @@ $(document).ready(function () {
'</ul>'+ '</ul>'+
'</li>'; '</li>';
console.log("DUPLI2: ", product_html + product_html_li); // console.log("DUPLI2: ", product_html + product_html_li);
$('#product-list-cart').append(product_html + product_html_li); $('#product-list-cart').append(product_html + product_html_li);
// product_html = '';
}); });
}); });
catalog/templates/base_top.html
View file @ 79f3469d
...@@ -101,19 +101,48 @@ ...@@ -101,19 +101,48 @@
<div class="tab-content"> <div class="tab-content">
<!-- Home tab content --> <!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab"> <div class="tab-pane" id="control-sidebar-home-tab">
<form id='product-to-cart-form' role="form" method="post">
{% csrf_token %}
<div class="container"> <div class="container">
<div class="sidebar-title"> <div class="sidebar-title">
<h3><b>Products</b></h3> <h3><b>Products</b></h3>
</div> </div>
<div class="sidebar-button"> <div class="sidebar-button">
<button type="button" name="search" id="add-cart" class="btn btn-primary"> <button type="submit" name="search" id="add-cart" class="btn btn-primary">
Add to cart Add to cart
</button> </button>
</div> </div>
</div> </div>
<!-- this ul element is filled with data --> <!-- this ul element is filled with data -->
<ul id="product-list-globe" class="control-sidebar-menu"></ul> <ul id="product-list-globe" class="control-sidebar-menu">
{# <li id="4569852" 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">#}
{# S2MSI1C_15QZ#}
{# </h4>#}
{# <p>2018-05-15T16:18:29.027</p>#}
{# <input type="checkbox" value="4569852">#}
{# </div>#}
{# </a>#}
{# <div class="info-product-box bg-geo" style="top: 148px;">#}
{# <span class="info-product-box-img">#}
{# <img src="/static/images/sat_preview/sat_test.jpg">#}
{# </span>#}
{# <div class="info-product-box-content">#}
{# <span class="info-product-box-text">S2B_MSIL1C_20180515T161829_N0206_R040_T15QZD_20180515T194031</span>#}
{# <span class="info-product-box-number">686.51 MB</span>#}
{# <div class="progress">#}
{# <div class="progress-bar" style="width: 100%"></div>#}
{# </div>#}
{# <span class="progress-description">Multi-Spectral Instrument</span>#}
{# </div>#}
{# </div>#}
{# </li>#}
</ul>
<!-- /.control-sidebar-menu --> <!-- /.control-sidebar-menu -->
{# </form>#}
</div> </div>
<!-- /.tab-pane --> <!-- /.tab-pane -->
<!-- Stats tab content --> <!-- Stats tab content -->
......
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