recipe rating

This commit is contained in:
vabene1111
2020-05-02 17:31:35 +02:00
parent 4c08ade3ee
commit 6a963c26b2
9 changed files with 143 additions and 82 deletions

View File

@@ -0,0 +1,78 @@
{% load i18n %}
<div class="modal" tabindex="-1" role="dialog" id="id_modal_cook_log">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{% trans 'Log Recipe Cooking' %}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>{% trans 'All fields are optional and can be left empty.' %}</p>
<form>
<label for="id_log_servings">{% trans 'Servings' %} </label>
<input class="form-control" type="number" id="id_log_servings">
<br/>
<label for="id_log_rating">{% trans 'Rating' %} - <span id="id_rating_show">0/5</span></label>
<input type="range" class="custom-range" min="0" max="5" id="id_log_rating" name="log_rating"
value="0">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans 'Close' %}</button>
<button type="button" class="btn btn-primary" onclick="logCook()">{% trans 'Save' %}</button>
</div>
</div>
</div>
</div>
<script type="application/javascript">
let modal = $('#id_modal_cook_log')
let rating = $('#id_log_rating')
function openCookLogModal(id) {
modal.data('recipe_id', id)
modal.modal('show')
}
//TODO there is definitely a nicer way to do this than this ugly shit
function logCook() {
let id = modal.data('recipe_id');
let url = "{% url 'api_log_cooking' recipe_id=12345 %}".replace(/12345/, id);
let val_servings = $('#id_log_servings').val()
if (val_servings !== '' && val_servings !== 0) {
url += '?s=' + val_servings
}
let val_rating = rating.val()
if (val_rating !== '' && val_rating !== 0) {
if (val_servings !== '' && val_servings !== 0) {
url += '&'
}else {
url += '?'
}
url += 'r=' + val_rating
}
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
};
request.open("GET", url, true);
request.send();
modal.modal('hide')
}
rating.on("input", () => {
$('#id_rating_show').html(rating.val() + '/5')
});
</script>

View File

@@ -1,79 +0,0 @@
{% load i18n %}
<style>
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div class="modal" tabindex="-1" role="dialog" id="modal_recipe">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{% trans 'Recipe' %}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" style="text-align: center">
<div class="loader" id="div_loader"></div>
<a href="" id="a_recipe_open" target="_blank" onclick="afterClick()" style="font-size: 250%"></a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans 'Close' %}</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function openRecipe(id) {
var link = $('#a_recipe_open');
link.hide();
$('#div_loader').show();
var url = "{% url 'api_get_external_file_link' recipe_id=12345 %}".replace(/12345/, id);
link.text("{% trans 'Open Recipe' %}");
$('#modal_recipe').modal('show');
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
link.attr("href", this.responseText);
link.show();
} else {
window.open(this.responseText);
$('#modal_recipe').modal('hide');
}
$('#div_loader').hide();
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function afterClick() {
$('#modal_recipe').modal('hide');
return true;
}
</script>