Skip to content
This repository has been archived by the owner on Jan 12, 2021. It is now read-only.

Commit

Permalink
Merge pull request #32 from WellCheck-Co/develop
Browse files Browse the repository at this point in the history 
Added price simulator #22
  • Loading branch information
@flavienbwk
flavienbwk authored Jun 28, 2020
2 parents 4c6fa12 + 06ea8f4 commit 64c806d
Show file tree
Hide file tree
Showing 5 changed files with 225 additions and 2 deletions.
64 changes: 64 additions & 0 deletions Wellcheck/Webapps/dashboard.wellcheck/front/basket.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>Basket - Wellcheck</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">

<link rel="icon" href="imgs/logo.png" type="image/gipng">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="./js/assets/chart.min.js"></script>
<script src="./js/assets/utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
<style type="text/css">/* Chart.js */
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}</style>
<!-- //Custom Theme files -->
</head>
<body>
<!-- main -->
<div id="stats" style="" class="main-w3layouts wrapper">
<leftnav ref="nav"></leftnav>
<mod ref="modal"></mod>
<stats id="vuestats" :data=data ref="main"></stats>
<msg ref="extern"></msg>
</div>
<!-- //main -->
<script src="./js/conf.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-css-donut-chart@1/dist/vcdonut.css">
<script src="https://cdn.jsdelivr.net/npm/vue-css-donut-chart@1/dist/vcdonut.umd.min.js"></script>
<script src="./js/commons/comp_messages.js"></script>
<script src="./js/commons/comp_warning.js"></script>
<script src="./js/commons/comp_container.js"></script>
<script src="./js/commons/location.js"></script>
<script src="./js/commons/cred.js"></script>
<script src="./js/commons/user.js"></script>
<script src="./js/profil/comp_mod_infos.js"></script>
<script src="./js/profil/comp_mod_billing.js"></script>
<script src="./js/commons/comp_modale.js"></script>
<script src="./js/commons/comp_nav.js"></script>
<script src="./js/basket/comp_basket.js"></script>
<script src="./js/basket/basket.js"></script>
</body>
</html>
25 changes: 25 additions & 0 deletions Wellcheck/Webapps/dashboard.wellcheck/front/js/basket/basket.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
let vm = new Vue({
el: '#stats',

data: function(){
return {
email: localStorage.email,
data: ''
}
},

components: {msg, leftnav, mod, stats},

methods: {
store: function(data) {
if (data != '') {
localStorage.points = JSON.stringify(data['points']);
this.data = data['points'];
}
},
},
mounted(){
cred.methods.api_cred()
cred.methods.usr_cred()
}
})
67 changes: 67 additions & 0 deletions Wellcheck/Webapps/dashboard.wellcheck/front/js/basket/comp_basket.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
let stats = {
data: function() {
return {
prices: {
"device": 249,
"subscription": 10
}
}
},

components: {container, warning},

props: {data: {default: void 0}},

methods: {
handleChanges: function() {
$("#number").on("change", (event) => {
$("#numberSpan").text(event.target.value);
$("#devicesPrice").text(event.target.value * this.prices.device);
$("#subscriptionPrice").text(event.target.value * this.prices.subscription);
$("#buyButton").attr("disabled", event.target.value <= 0);
});
$("#buyButton").on("click", () => {
alert("You just bought " + $("#number").val() + " devices !");
});
}
},

mounted(){
this.handleChanges();
},

template: `
<div class="main">
<div class="hidden" style="">
</div>
<div class="usualcenter infos">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="txt-lt">Basket</h1>
</div>
</div>
<br>
<div class="marge" style="height: inherit;">
<container note="Your basket"
name="My basket"
hover=true
style="height: 100%">
<div class="row justify-content-md-center">
<label class="col-md-4">Number of devices</label>
<input id="number" type="range" class="custom-range col-md-6" min="0" max="10" value="0">
<span id="numberSpan" class="col-md-2">0</span>
</div>
<br>
<span>249€ / device + 10€ / month / device</span>
<br><br>
<span><span id="devicesPrice">0</span>€ now + <span id="subscriptionPrice">0</span>€ / month</span>
<br><br>
<button id="buyButton" type="button" class="btn btn-primary col-md-4" disabled>Buy</button>
</container>
</div>
</div>
</div>
`
}

5 changes: 3 additions & 2 deletions Wellcheck/Webapps/dashboard.wellcheck/front/js/commons/comp_nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,9 +109,10 @@ let leftnav = {
<div ref="link5" class="nav-text nav-second" v-on:click="modale('Devices')" >Devices</div>
<div ref="link6" class="nav-text nav-second" v-on:click="modale('Share')" >Share</div>
<div ref="link7" class="nav-text" v-on:click="redirect('/stats')" >Stats</div>
<div ref="link8" class="nav-text" v-on:click="user.methods.logout" >Logout</div>
<div ref="link8" class="nav-text" v-on:click="redirect('/basket')" >Basket</div>
<div ref="link9" class="nav-text" v-on:click="user.methods.logout" >Logout</div>
<br>
<div ref="link8" class="nav-text test-nav">
<div ref="link9" class="nav-text test-nav">
<input id="s2d" type="checkbox" class="switch test-switch" v-on:click=changetest>
<label for="s2d" style="font-size: 1rem;">Test mod</label>
</div>
Expand Down
66 changes: 66 additions & 0 deletions Wellcheck/Webapps/wellcheck/front/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
<div id="my-nav" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#buy">Buy</a></li>
<li class="nav-item"><a class="nav-link" href="#team">The Team</a></li>
<li class="nav-item"><a class="nav-link" href="#news">News</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
Expand Down Expand Up @@ -311,6 +312,47 @@ <h3>Get the details of your measures</h3>
</div>
</div>
</div>
<div class="container-fluid gtco-testimonials" id="buy">
<div class="container">
<div class="row">
<div class="offset-lg-3 col-lg-6"
style="box-shadow: 0 15px 40px 0 rgba(149, 179, 247, 0.69); padding: 24px; border-radius: 10px;">
<div class="text-center" data-wow-delay="0.3s"
style="visibility: visible;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
<div class="hidden" style="">
</div>
<div class="usualcenter infos">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="txt-lt">Buy devices</h1>
</div>
</div>
<br>
<div class="marge" style="height: inherit;">
<container note="Your basket"
name="My basket"
hover=true
style="height: 100%">
<div class="row justify-content-md-center">
<label class="col-md-4">Number of devices</label>
<input id="number" type="range" class="custom-range col-md-6" min="0" max="10" value="0" onchange="onDevicesChange(event)">
<span id="numberSpan" class="col-md-2">0</span>
</div>
<br>
<span>249€ / device + 10€ / month / device</span>
<br><br>
<span><span id="devicesPrice">0</span>€ now + <span id="subscriptionPrice">0</span>€ / month</span>
<br><br>
<button id="buyButton" type="button" class="btn btn-primary col-md-4" onclick="buy()" disabled>Buy</button>
</container>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid gtco-testimonials" id="team">
<div class="container">
<h2>The team</h2>
Expand Down Expand Up @@ -554,6 +596,30 @@ <h4 class="mt-5">Follow Us</h4>
}
});
}

var prices = {
"device": 249,
"subscription": 10
}

function onDevicesChange(event) {
document.querySelector("#numberSpan").innerText = event.target.value;
document.querySelector("#devicesPrice").innerText = event.target.value * prices.device;
document.querySelector("#subscriptionPrice").innerText = event.target.value * prices.subscription;
document.querySelector("#buyButton").disabled = event.target.value <= 0;
}
function buy() {
alert("You just bought " + document.querySelector("#number").value + " devices !");
}
//$("#number").on("change", (event) => {
// $("#numberSpan").text(event.target.value);
// $("#devicesPrice").text(event.target.value * this.prices.device);
// $("#subscriptionPrice").text(event.target.value * this.prices.subscription);
// $("#buyButton").attr("disabled", event.target.value <= 0);
//});
//$("#buyButton").on("click", (event) => {
// alert("You just bought " + $("#number").val() + " devices !");
//});
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
Expand Down

0 comments on commit 64c806d

Please sign in to comment.