mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-01 04:10:06 -05:00
recipe rating
This commit is contained in:
78
cookbook/templates/include/log_cooking.html
Normal file
78
cookbook/templates/include/log_cooking.html
Normal 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">×</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>
|
||||
@@ -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">×</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>
|
||||
Reference in New Issue
Block a user