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 -*-
from django import forms
import datetime
#from django.contrib.auth.forms import UserCreationForm
#from django.contrib.auth.models import User
#from buscador.models import Investigador, Reto
......@@ -12,7 +13,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=True)
end = 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(initial=datetime.date.today, widget=forms.DateInput(attrs={'type':'date'}), required=True)
maxResults = forms.IntegerField()
catalog/static/css/body.css
View file @ 79f3469d
......@@ -135,87 +135,181 @@ li.pol {
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;
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;
display: block;
top: 148px;
left: -552px;
height: 90px;
background: #fff;
width: 240%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
border-radius: 2px;
margin-bottom: 15px;
}
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;
ul.control-sidebar-menu li div.bg-geo {
display: none;
}
ul.control-sidebar-menu li:hover div.bg-geo {
display: block;
}
div .bg-geo {
background-color: #dc7828;
}
ul.control-sidebar-menu li div.item-info-view,
ul.control-sidebar-menu li div.item-info-cart-view {
display: none;
.info-product-box-img {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
float: left;
height: 90px;
width: 90px;
text-align: center;
}
ul.control-sidebar-menu li:hover div.item-info-view,
ul.control-sidebar-menu li:hover div.item-info-cart-view {
display: block;
.info-product-box-img img {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
height: 90px;
}
div .cropped-preview {
max-height: 200px;
overflow: hidden;
.info-product-box-content {
font: Helvetica;
padding: 5px 10px;
margin-left: 90px;
}
div .cropped-preview img {
width: 50px;
/*.info-product-box-text {*/
/*text-transform: uppercase;*/
/*}*/
.info-product-box-number {
display: block;
font-weight: bold;
font-size: 18px;
}
div .cropped-preview img {
width: 100%;
border-top-left-radius: 10px;
.info-product-box .progress .progress-bar {
border-radius: 0;
background: #fff;
}
div .polygon-item-data {
margin: 10px;
color: white;
.info-product-box .progress {
background: rgba(0,0,0,0.2);
margin: 5px -10px 5px -10px;
height: 2px;
}
div .polygon-item-data .city {
font-size: 12px;
font-weight: bolder;
padding-bottom: 5px;
border-bottom: 2px solid;
.progress-description {
margin: 0;
}
div .polygon-item-data .info {
font-size: 16px;
margin-top: 15px;
margin-left: 15px;
.progress-description,
.info-product-box-text {
display: block;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div .polygon-item-data .info .type {
font-weight: bold;
margin-left: 10px;
.info-product-box-text,
.info-product-box-number,
.progress-description {
color: white;
}
div .polygon-item-data .info .data-info {
margin-left: 27px;
div .menu-info h4 {
cursor: pointer;
}
div .item-info-view .button-add-del {
padding-left: 58%;
.treeview-menu > li {
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-cart-items {
max-height: 500px;
......@@ -235,6 +329,18 @@ div .sidebar-button button {
margin-top: 17px;
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----------*/
div .draw-button {
......
catalog/static/js/dataRetrieval.js
View file @ 79f3469d
......@@ -2,6 +2,7 @@ var OPT_LIST_IS_HIDDEN = true;
var INPUT_ON_FOCUS = false;
var polygonList;
var product_list = [];
var PRODUCT_COUNTER = 0;
var makeRequest = function (value) {
var pol_element = document.getElementById('polygon-list');
......@@ -90,8 +91,8 @@ $("#id_polygon").on('keyup', function (e) {
}
});
function erase_product_globe_list() {
var pol_element = document.getElementById('product-list-cart');
function erase_product_list_globe() {
var pol_element = document.getElementById('product-list-globe');
while (pol_element.firstChild) {
pol_element.removeChild(pol_element.firstChild);
}
......@@ -100,7 +101,7 @@ function erase_product_globe_list() {
var prevfeature = null;
function drawApiResponse(element) {
product_list.catalog.forEach(function (data) {
if (data.id === element.id) {
if (data.id === element.id.replace("-h4", '')) {
// osmap.removePolygon();
prevfeature = osmap.addfootprint(data.product.footprint, prevfeature);
}
......@@ -141,7 +142,6 @@ $(document).click(function (event) {
});
$(document).ready(function () {
var pol_element = document.getElementById('polygon-list');
......@@ -178,7 +178,7 @@ $(document).ready(function () {
$('#product-form').submit(function (event) {
var submit_data = $('#product-form').serialize();
erase_product_globe_list();
erase_product_list_globe();
$.ajax({
type: "POST",
......@@ -207,6 +207,7 @@ $(document).ready(function () {
if (!PRODUCT_IN_LIST) {
console.log("DEFS: ahora crea producto");
productListPrev.push(data);
var div_top = 148;
data.catalog.forEach(function (data) {
console.log("DD: ", data);
......@@ -219,43 +220,45 @@ $(document).ready(function () {
},
dataType: 'json',
success: function (res) {
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>'+
'<div class="menu-info">'+
'<h4 class="control-sidebar-subheading">' + data.product.producttype + '_' + data.product.tileid + '</h4>'+
'<p>' + data.product.beginposition + '</p>'+
'</div>'+
'</a>'+
'<div id="' + data.id + '-hover" class="item-info-view">'+
'<div class="cropped-preview">'+
// '<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>'+
console.log("DIV_TOP: ", div_top);
var product_html = '<li id="' + data.id + '">' +
'<a href="javascript:void(0)">' +
'<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>' +
'<div class="menu-info">' +
'<h4 id="' + data.id + '-h4" class="control-sidebar-subheading" onclick="drawApiResponse(this)">' +
data.product.producttype + '_' + data.product.tileid +
'</h4>' +
'<p>' + data.product.beginposition + '</p>' +
'<input type="checkbox" name="product_selected" value="' + data.id + '" checked>' +
'</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>';
$('#product-list-globe').append(product_html);
div_top += 75;
}
});
});
$('#cart').removeClass("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");
}
}
......@@ -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');
while (globe_element.firstChild) {
globe_element.removeChild(globe_element.firstChild);
}
$('#product-to-cart-form').submit(function (event) {
var submit_data = $('#product-to-cart-form').serialize();
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">'+
'<a href="#">'+
'<i class="fa fa-cubes"></i>'+
'<span>Product Name</span>'+
'<span>Product ' + PRODUCT_COUNTER + '</span>'+
'<span class="pull-right-container">'+
'<span class="label label-primary pull-right"></span>'+
'</span>'+
......@@ -289,37 +295,40 @@ $(document).ready(function () {
'<ul id="product-list-cart-items" class="control-sidebar-menu">';
var product_html_li = '';
var div_top = 148;
console.log("djdj: ", productListGlobe);
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);
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">'+
'<h4 class="control-sidebar-subheading">' + data.product.producttype + '_' + data.product.tileid + '</h4>'+
'<p>' + data.product.beginposition + '</p>'+
'</div>'+
'</a>'+
'<div id="' + data.id + '-hover" class="item-info-cart-view">'+
'<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>'+
product_html_li += '<li id="' + data.id + '">' +
'<a href="javascript:void(0)">' +
'<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>' +
'<div class="menu-info">' +
'<h4 id="' + data.id + '-h4" class="control-sidebar-subheading">' +
data.product.producttype + '_' + data.product.tileid +
'</h4>' +
'<p>' + data.product.beginposition + '</p>' +
'</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>';
console.log("DUPLI: ", product_html_li);
div_top += 52;
}
});
product_html_li += '</ul>'+
......@@ -327,8 +336,7 @@ $(document).ready(function () {
'</ul>'+
'</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_html = '';
});
});
catalog/templates/base_top.html
View file @ 79f3469d
......@@ -101,19 +101,48 @@
<div class="tab-content">
<!-- Home tab content -->
<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="sidebar-title">
<h3><b>Products</b></h3>
</div>
<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
</button>
</div>
</div>
<!-- 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 -->
{# </form>#}
</div>
<!-- /.tab-pane -->
<!-- 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