layout fixes with store

legacy
Steve L. Nyemba 6 years ago
parent f4431d1b6f
commit 3503c2b286

@ -72,77 +72,22 @@ def init(product):
for id in sub :
if sub[id]['active'] is True :
features[id] = sub[id]
session['active-plans'] = [item['plan_id'] for item in features]
user.refresh(uid)
session['key'] = user.user_key
session['uid'] = uid
return json.dumps(features),200
# @app.route("/init/<app_name>",methods=['POST'])
# def init(app_name):
# plans = []
# handler = None
# uid = request.headers['uid']
# plan = request.headers['pid']
# auid = None
# if 'uid' in request.headers and 'auid' not in request.headers:
# id = uid
# #couchdb = Couchdb(uri=CONFIG['couchdb']['uri'],dbname=app_name,uid=uid,create=False)
# #DB = couchdb.dbase
# if 'auid' in request.headers :
# auid = request.headers['auid']
# auid = json.loads(auid)if auid.startswith('[') else auid
# if isinstance(auid,list) :
# auid = list(set(auid) - set([uid]))
# if len(auid) == 0:
# auid = None
# id = uid
# else:
# auid = auid[0]
# id = auid
# couchdb = Couchdb(uri=CONFIG['couchdb']['uri'],dbname=app_name,uid=id,create=False)
# DB = couchdb.dbase
# #handler.update_user(id=handler.getId(auid),uid=uid)
# handler = Domain.User(DB,stripe) ;
# if auid is None :
# handler.init(uid,plan) ;
# else:
# if couchdb.isready() == False:
# handler.init(auid,plan)
# id = handler.getId(uid)
# handler.initialize(auid)
# id = handler.getId(auid)
# handler.update_user(id=id,uid=uid) ;
# plans = handler.plans()
# #return json.dumps(plans)
# _features = features(app_name)
# return _features
"""
This function will update the user's email
"""
# @app.route('/init/<app_name>',methods=['PUT'])
# def init_update(app_name):
# uid = request.headers['uid']
# id = session['customer.id']
# couchdb = Couchdb(uri=CONFIG['couchdb']['uri'],dbname=app_name,uid=None)
# DB = couchdb.dbase
# handler = Domain.User(DB,stripe)
# handler.update_user(uid=uid,id=id)
# return ('',204)
"""
@app.route('/subscribe/<product>',methods=['POST'])
def subscribe(product):
"""
This function subscribes a user to a given service for an application
This function guarantees not to duplicate subscriptions
@resource name name of the application {cloud-music}
@header key service/plan
"""
@app.route('/subscribe/<product>',methods=['POST'])
def subscribe(product):
"""
#
# The name is the full name of the service
#
@ -174,7 +119,8 @@ def subscribe(product):
#session['plans'] = plans
session['key'] = user.user_key
session['uid'] = uid
session['active-plans'] = [item['id'] for item in plans]
print session['active-plans']
return (json.dumps(plans),200)
def get_plans(product) :
@ -264,11 +210,21 @@ def signup(product) :
#
# @TODO: Mark the plans the current user is signed up for
#
if 'themes' in CONFIG:
theme = CONFIG['themes'][product] if product in CONFIG['themes'] else CONFIG['theme']['default']
else:
theme = ''
platform='web' if 'platform' not in request.args else request.args['platform']
alias = plans[0]['product_alias']
active_plan = session['plans'] if 'plans' in session else []
print [' ** ',uid,active_plan]
return render_template('subscribe.html',context=CONTEXT,uid=uid,alias=alias,platform=platform,app_name=product,plans=plans,apikey=apikey)
if 'user-plan' in session :
user_plans = [item['id'] for item in session['user-plan']]
else :
user_plans = []
# active_plan = session['active-plans'] if 'active-plans' in session else []
args = {"context":CONTEXT,"theme":theme,"uid":uid,"alias":alias,"platform":platform,"app_name":product,"apikey":apikey,"plans":plans}
args['active_plans'] = user_plans
return render_template('subscribe.html',**args) #context=CONTEXT,uid=uid,alias=alias,platform=platform,app_name=product,plans=plans,apikey=apikey)
@app.route('/subscribe/<name>',methods=['DELETE'])
def cancel_subscribe(name) :

@ -8,19 +8,73 @@
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
-->
<script type="text/javascript" src="{{ context }}/static/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/rpc.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/utils.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/dom.js"></script>
<title style="text-transform: capitalize">{{app_name.replace('-',' ')}}</title>
<style>
.theme-raspberry{
background: #00B4DB; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #0083B0, #00B4DB); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color:#ffffff;
font-family:verdana;
font-weight:lighter;
text-transform:capitalize;
}
.theme-dark-ocean {
background: #373B44; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #4286f4, #373B44); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #4286f4, #373B44); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color:#f3f3f3;
}
.theme-gray {
background: #bdc3c7; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #2c3e50, #bdc3c7); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color:#f3f3f3f3;
}
.theme-clouds {
background: #ECE9E6; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #FFFFFF, #ECE9E6); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #FFFFFF, #ECE9E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
img {width:48px}
body{
font-family:sans-serif;
font-size:14px;
font-weight:lighter;
width:80%;
margin-left:10%;
}
.button {
padding:4px;
border-radius:8px;
border:1px solid #d3d3d3;
}
.active {
font-weight:bold;
font-family:verdana;
cursor:pointer ;
border-bottom:2px solid bottom;
padding:4px;
}
.active:hover { border-bottom:2px solid #4682B4}
.current-plan {
border-color: #20B2AA #20B2AA transparent transparent;
border-style: solid;
border-width: 15px 15px 15px 15px;
height: 0px;
width: 0px;
}
.bold { font-weight:bold}
.caption {
font-size:28px; font-weight:lighter ;
@ -43,7 +97,11 @@
display:grid;
grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) )
}
.plan .title { font-size:24px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0; }
.plan .title {
display:grid;
grid-template-columns: auto 32px;
grid-gap:2px;
font-size:24px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0; }
.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:2px; margin:2px;}
.plan .feature .label {text-transform: uppercase; grid-column:1; font-size:14px;}
.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
@ -97,9 +155,7 @@
.height-48{height:40px}
.width-50{width:47%; padding:4px;}
.width-25{width:24%; padding:4px}
.pricing {
display:block;
}
.pricing {display:block;}
.plan .title { font-size:18px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0; }
.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px}
.plan .feature .label {font-size:12px; text-transform: uppercase; grid-column:1}
@ -118,8 +174,7 @@
grid-gap:2px;
}
.header .logo img {width:32px}
.header {display:block;
}
.header {display:block;}
table {width:70%; margin-left:20%}
.medium-caption {font-size:18px}
@ -130,8 +185,8 @@
display:grid;
grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) )
}
.plan .title { font-size:20px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0; }
.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px}
.plan .title { padding:4px; font-size:22px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0; }
.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px; padding:4px;}
.plan .feature .label {text-transform: uppercase; grid-column:1}
.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
@ -142,6 +197,7 @@
</script>
<body >
<div class="header">
<div class="logo">
<div>
@ -165,9 +221,17 @@
<div >
<div class="pricing">
{% for item in plans%}
<div class="plan">
<div class="title">{{ item.nickname }}</div>
<br>
<div class="plan {{theme}}">
<div class="title">
<div>{{ item.nickname }}</div>
{% if item.id in active_plans %}
<div class="current-plan"></div>
{% else %}
<div></div>
{% endif %}
</div>
<div class="">
{% for key,value in item.metadata['features'].iteritems() %}
<div class="feature">
<div class="label">{{ key }}</div>
@ -181,10 +245,17 @@
</div>
{% endfor %}
{% if item.amount > 0 and platform != 'mobile' %}
<div align="right">
</div>
{% if platform != 'mobile' and item.amount > 0 and item.name not in active_plans %}
<div align="right" class="border-top">
<br>
{% if active_plans|length > 0 %}
<div id="upgrade_{{item.id}}" align="right" onclick="jx.dom.show('{{item.id}}'); jx.dom.hide('upgrade_{{item.id}}')">
<form action="{{context}}/subscribe/{{app_name|safe}}" method="POST">
<span class="active">Upgrade</span>
</div>
{% endif %}
<form id="{{item.id}}" style="display:none" action="{{context}}/subscribe/{{app_name|safe}}" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button action"
data-key="{{apikey|safe}}"
@ -203,14 +274,26 @@
<input type="hidden" name="plan" value="{{item.id|safe}}"/>
</form>
</div>
{% elif item.amount == 0 and platform != 'mobile' %}
<br><div align="right" style="background:#f3f3f3; color:#4682B4; font-weight:bold; ">
{% elif item.amount == 0 and platform != 'mobile' and item.id not in active_plans %}
<div align="right" class="border-top" style="DISPLAY:none;background:#f3f3f3; color:#4682B4; font-weight:bold; ">
<br>
<div style="float:right;margin-right:4px;">
<div align="center">This Plan is Plan</div>
<div class="small" align="center">Login to Start</div>
<div class="small" align="center">Free/Signup</div>
</div>
</div>
<div align="right" class="border-top">
<br><button type="submit" class="stripe-button-el" style="visibility: visible;"><span style="display: block; min-height: 30px;">Signup Free/ mo</span></button>
</div>
{% elif item.amount == 0 and platform != 'mobile' %}
<div align="right" class="border-top">
<br><div style="" class="">
<span style="font-weight:bold; font-size:14px; color:#4682B4 ; display: block; min-height: 30px;">
<i class="fa fa-check"></i>
Current Plan</span></div>
</div>
{% endif%}
</div>

Loading…
Cancel
Save