<template>
<div class="page" data-name="Appreciation">
<!-- Top Navbar -->
<div class="navbar navbar-large">
<div class="navbar-bg"></div>
<div class="navbar-inner">`// base template for pages across app
<div class="left">
<a href="/home/" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title sliding">Appreciation Entry & Mood Tracker</div>
<div class="title-large">
<div class="title-large-text">Appreciation Entry & Mood Tracker</div>
</div>
</div>
</div>
// where the gauge starts
<div class="page-content">
<div class="block-title">Mood Tracker</div>
<div class="block block-strong text-align-center">
<div class="gauge demo-gauge" ></div>
<p>How happy are you feeling today?</p>
<div class="gauge gauge-init" id ="demo-gauge"
data-type="circle"
data-value="0"
data-value-text="0%"
data-value-text-color="##2196f3"
data-border-color="#2196f3"/></div>
<p class="segmented segmented-raised"> // buttons for the gauge
<a href="#" class="button" data-value="0">0%</a>
<a href="#" class="button" data-value="25">25%</a>
<a href="#" class="button" data-value="50">50%</a>
<a href="#" class="button" data-value="75">75%</a>
<a href="#" class="button" data-value="100">100%</a>
</p>
</div>
// slider for sadness mood tracker
<div><p class="text-align-center">How sad are you feeling today?</p></div>
<div class="item-input-wrap">
<div class="range-slider range-slider-init" id = "slider1" data-label="true">
<input type="range" value="50" min="0" max="100" step="1" />
</div>
</div>
// code for the entry editor
<div class="block block-strong">
<div class="block-title">Entry Editor</div>
<div> // explaining to the user what this page is for
<p>The aim for this editor is to write a few things you appreicate about yourself everyday. You can also use it to write a little entry about what has happened throughout your day. It's a place for writing positive thoughts and appreications in your life.</p>
</div>
// setting up the text editor
<div class="text-editor text-editor-init" class ="resizbale"type="text" name="entry" id="entry" placeholder="Enter your appreication thoughts here..." action="send-here.html" method="GET" class = "form-ajax-submit-onchange" ><link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"></div>
// setting up the save, delete and get buttons for user interaction with the entry
<div class="col-30">
<p><a href="#" class="button button-raised button-fill get-storage-data" >Get Entry</a></p>
</div>
<div class="col-30">
<p><a href="#" class="button button-raised button-fill delete-storage-data">Delete Entry</a></p>
</div>
<div class="col-30">
<p><a href="#" class="button button-raised button-fill save-storage-data">Save Entry</a></p>
</div>
</div>
</div>
</div>
</div>
</template>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $ = Dom7
// functionality for saving, deleting and getting the entry the user has written.
$('.get-storage-data').on('click', function() {
var storedData = myApp.formGetData('entry');
if(storedData) {
window.alert(JSON.stringify(storedData));
}
else {
window.alert('There is no stored data for this entry yet. Try to enter some text.')
}
});
$('.delete-storage-data').on('click', function() {
var storedData = myApp.formDeleteData('entry');
window.alert('Form data deleted')
});
$('.save-storage-data').on('click', function() {
var storedData = myApp.formStoreData('entry', {
""
});
window.alert('Entry data replaced, refresh app to see changes')
});
// fucntionality for text editor and buttonss
var textEditor = app.textEditor.create({
el: '.my-text-editor',
customButtons: {
// property key is the button id
hr: {
// button html content
content: '<hr>',
// button click handler
onClick(event, buttonEl) {
document.execCommand('insertHorizontalRule', false);
},
},
},
// now we use custom button id "hr" to add it to buttons
buttons: [["bold", "italic", "underline", "strikeThrough"], "hr"],
})
// create method for the gauge
var gauge = myApp.gauge.create({
el: '.demo-gauge',
type: 'circle',
value: 0.5,
size: 250,
borderColor: '#2196f3',
borderWidth: 10,
valueText: '50%',
valueFontSize: 41,
valueTextColor: '#2196f3',
labelText: 'amount of something',
});
// Change gauge on button click
myApp('.button').on('click', function () {
var value = myApp(this).attr('data-value');
gauge.update({
value: value / 100,
valueText: value + '%'
});
});
}
</script>
I’m working on a project and I’m trying to use a gauge to track how happy a user is. I’m using the gauge docs to get my code for now but I can’t figure out why the buttons don’t work to display the chosen % on the gauge.