cloud
/
store
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout fixes with store

Browse Source
legacy
Steve L. Nyemba 6 years ago
parent f4431d1b6f
commit 3503c2b286
2 changed files with 170 additions and 131 deletions
Show Stats Download Patch File Download Diff File

90
src/api/index.py
Unescape View File

@ -72,77 +72,22 @@ def init(product):
for id in sub : for id in sub :
if sub[id]['active'] is True : if sub[id]['active'] is True :
features[id] = sub[id] features[id] = sub[id]
session['active-plans'] = [item['plan_id'] for item in features]
user.refresh(uid) user.refresh(uid)
session['key'] = user.user_key session['key'] = user.user_key
session['uid'] = uid session['uid'] = uid
return json.dumps(features),200 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)
"""
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']) @app.route('/subscribe/<product>',methods=['POST'])
def subscribe(product): 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
"""
# #
# The name is the full name of the service # The name is the full name of the service
# #
@ -174,7 +119,8 @@ def subscribe(product):
#session['plans'] = plans #session['plans'] = plans
session['key'] = user.user_key session['key'] = user.user_key
session['uid'] = uid session['uid'] = uid
session['active-plans'] = [item['id'] for item in plans]
print session['active-plans']
return (json.dumps(plans),200) return (json.dumps(plans),200)
def get_plans(product) : def get_plans(product) :
@ -264,11 +210,21 @@ def signup(product) :
# #
# @TODO: Mark the plans the current user is signed up for # @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'] platform='web' if 'platform' not in request.args else request.args['platform']
alias = plans[0]['product_alias'] alias = plans[0]['product_alias']
active_plan = session['plans'] if 'plans' in session else [] if 'user-plan' in session :
print [' ** ',uid,active_plan] user_plans = [item['id'] for item in session['user-plan']]
return render_template('subscribe.html',context=CONTEXT,uid=uid,alias=alias,platform=platform,app_name=product,plans=plans,apikey=apikey) 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']) @app.route('/subscribe/<name>',methods=['DELETE'])
def cancel_subscribe(name) : def cancel_subscribe(name) :

203
src/api/templates/subscribe.html
Unescape View File

@ -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" /> <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="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/rpc.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/utils.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> <script type="text/javascript" src="{{ context }}/static/js/jx/dom.js"></script>
<title style="text-transform: capitalize">{{app_name.replace('-',' ')}}</title> <title style="text-transform: capitalize">{{app_name.replace('-',' ')}}</title>
<style> <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} img {width:48px}
body{ body{
font-family:sans-serif; font-family:sans-serif;
font-size:14px; font-size:14px;
font-weight:lighter; 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} .bold { font-weight:bold}
.caption { .caption {
font-size:28px; font-weight:lighter ; font-size:28px; font-weight:lighter ;
@ -43,7 +97,11 @@
display:grid; display:grid;
grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) ) 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 {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 .label {text-transform: uppercase; grid-column:1; font-size:14px;}
.plan .feature .status {font-size:20px; text-align: right; font-size:14px;} .plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
@ -95,17 +153,15 @@
.medium-caption {font-size:14px} .medium-caption {font-size:14px}
body {font-size:12px;} body {font-size:12px;}
.height-48{height:40px} .height-48{height:40px}
.width-50{width:47%; padding:4px;} .width-50{width:47%; padding:4px;}
.width-25{width:24%; padding:4px} .width-25{width:24%; padding:4px}
.pricing { .pricing {display:block;}
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 .title { font-size:18px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0; } .plan .feature .label {font-size:12px; text-transform: uppercase; grid-column:1}
.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px} .plan .feature .status {font-size:16px; text-align: right; font-size:14px;}
.plan .feature .label {font-size:12px; text-transform: uppercase; grid-column:1} .header{display:none}
.plan .feature .status {font-size:16px; text-align: right; font-size:14px;} .caption {font-size:20px}
.header{display:none}
.caption {font-size:20px}
} }
@media only screen and (min-device-width: 768px){ @media only screen and (min-device-width: 768px){
@ -118,22 +174,21 @@
grid-gap:2px; grid-gap:2px;
} }
.header .logo img {width:32px} .header .logo img {width:32px}
.header {display:block; .header {display:block;}
}
table {width:70%; margin-left:20%} table {width:70%; margin-left:20%}
.medium-caption {font-size:18px} .medium-caption {font-size:18px}
.width-50{width:50%; padding:4px;} .width-50{width:50%; padding:4px;}
.width-25{width:25%; padding:4px} .width-25{width:25%; padding:4px}
.height-48{height:48px;} .height-48{height:48px;}
.pricing { .pricing {
display:grid; display:grid;
grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) ) 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 .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} .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 .label {text-transform: uppercase; grid-column:1}
.plan .feature .status {font-size:20px; text-align: right; font-size:14px;} .plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
} }
@ -142,6 +197,7 @@
</script> </script>
<body > <body >
<div class="header"> <div class="header">
<div class="logo"> <div class="logo">
<div> <div>
@ -165,52 +221,79 @@
<div > <div >
<div class="pricing"> <div class="pricing">
{% for item in plans%} {% for item in plans%}
<div class="plan"> <div class="plan {{theme}}">
<div class="title">{{ item.nickname }}</div> <div class="title">
<br> <div>{{ item.nickname }}</div>
{% for key,value in item.metadata['features'].iteritems() %} {% if item.id in active_plans %}
<div class="feature"> <div class="current-plan"></div>
<div class="label">{{ key }}</div> {% else %}
{% if value == True %} <div></div>
<div class="status"><i class="fa fa-check"></i></div> {% endif %}
{% elif value == False %}
<div class="status"><i class="fa fa-times"></i></div>
{%else %}
<div class="status">{{value}}</div>
{% endif %}
</div>
{% endfor %} </div>
{% if item.amount > 0 and platform != 'mobile' %} <div class="">
<div align="right"> {% for key,value in item.metadata['features'].iteritems() %}
<div class="feature">
<div class="label">{{ key }}</div>
{% if value == True %}
<div class="status"><i class="fa fa-check"></i></div>
{% elif value == False %}
<div class="status"><i class="fa fa-times"></i></div>
{%else %}
<div class="status">{{value}}</div>
{% endif %}
</div>
<form action="{{context}}/subscribe/{{app_name|safe}}" method="POST"> {% endfor %}
<script </div>
src="https://checkout.stripe.com/checkout.js" class="stripe-button action" {% if platform != 'mobile' and item.amount > 0 and item.name not in active_plans %}
data-key="{{apikey|safe}}" <div align="right" class="border-top">
data-email="{{uid|safe}}" <br>
data-amount={{item.amount|safe}} {% if active_plans|length > 0 %}
data-name="{{item.nickname}}" <div id="upgrade_{{item.id}}" align="right" onclick="jx.dom.show('{{item.id}}'); jx.dom.hide('upgrade_{{item.id}}')">
data-description="{{alias }}"
<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}}"
data-email="{{uid|safe}}"
data-amount={{item.amount|safe}}
data-name="{{item.nickname}}"
data-description="{{alias }}"
data-label="Signup $ {{item.amount/100 }} / {{item.interval[:2]}}" data-label="Signup $ {{item.amount/100 }} / {{item.interval[:2]}}"
data-image="https://s3.amazonaws.com/stripe-uploads/acct_15kiA1EUWsmgY81Amerchant-icon-1493912370912-logo-0.png" data-image="https://s3.amazonaws.com/stripe-uploads/acct_15kiA1EUWsmgY81Amerchant-icon-1493912370912-logo-0.png"
data-locale="auto"> data-locale="auto">
</script> </script>
<input type="hidden" name="amount" value="{{item.amount|safe}}"/> <input type="hidden" name="amount" value="{{item.amount|safe}}"/>
<input type="hidden" name="plan" value="{{item.id|safe}}"/> <input type="hidden" name="plan" value="{{item.id|safe}}"/>
</form> </form>
</div> </div>
{% elif item.amount == 0 and platform != 'mobile' %} {% elif item.amount == 0 and platform != 'mobile' and item.id not in active_plans %}
<br><div align="right" style="background:#f3f3f3; color:#4682B4; font-weight:bold; "> <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 style="float:right;margin-right:4px;">
<div align="center">This Plan is Plan</div> <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> </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%} {% endif%}
</div> </div>

Write Preview
Loading…
Cancel
Save