We Keep Coding

Getting highest score values from firebase database

In my website there are some films that i get from firebase. The scores of the movies are between 0 and 100. I already got all the movies in my website. I also want to display them in descending order.(for ex. top 5 rated movies) How can i achieve this? Thanks for your answers.
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const auth = getAuth(app);
const firebaseRef= ref(getDatabase());
var body = document.getElementById('movies');
var body2 = document.getElementById('series');
function AddItemsToTable(name, score, img, id) {
var movies = `<div class="content"><img src="${img}" ><p>${name}</p> <p> <i class="fa fa-star checked" id="star${id}"></i> <a class="scoretxt">${score}%</a> </p> </div>`;
body.innerHTML+=movies;
}
function AddItemsToTable2(name, score, img, id) {
var series = `<div class="content"><img src="${img}" ><p>${name}</p> <p> <i class="fa fa-star checked" id="star2${id}"></i> <a class="scoretxt">${score}%</a> </p> </div>`;
body2.innerHTML += series;
}
//*******************************I got the movies************************************************
function AddAllItemsToTable(TheMovies){
var counter=0;
TheMovies.forEach(element => {
if (counter===6) {
return;
}
AddItemsToTable(element.movieName, element.movieScore, element.movieImage, element.movieId);
counter++;
});
}
//************************I got tv series*********************************************
function AddAllItemsToTable2(TheSeries){
var counter=0;
TheSeries.forEach(element => {
if (counter===6) {
return;
}
AddItemsToTable2(element.seriesName, element.seriesScore, element.seriesImage, element.seriesId);
counter++;
});
}
function AddAllItemsToTable3(TheMovies){
var counter=0;
TheMovies.forEach(element => {
if (counter===6) {
return;
}
AddItemsToTable3(element.movieName, element.movieScore, element.movieImage, element.movieId);
counter++;
});
}
function getAllDataOnce(){
const dbRef=ref(db);
get(child(dbRef,"Movies"))
.then((snapshot)=>{
var movies=[];
snapshot.forEach(childSnapshot => {
movies.push(childSnapshot.val())
});
AddAllItemsToTable(movies);
});
}
function getAllDataOnce2(){
const dbRef=ref(db);
get(child(dbRef,"Series"))
.then((snapshot)=>{
var series=[];
snapshot.forEach(childSnapshot => {
series.push(childSnapshot.val())
});
AddAllItemsToTable2(series);
});
}
window.onload = (event) => {
getAllDataOnce();
getAllDataOnce2();
};
<div class="grid-container">
<header class="header">
<div class="solheader">
<img src="img/sonlogo3.png" alt="logo">
<img src="img/logosmall.png" alt="logo" style="width:60px;height:48px;margin:5px;">
</div>
<div class="ortaheader">
<input type="text" placeholder="Movies or TV series.." class="searchbox"><i class="fa fa-search arama"></i> </input>
<ul>
<li class="categories">Categories <i class="fa fa-caret-down" style="font-size:16px;"> </i>
<ul class="dropdown">
<li>TV Series</li>
<li>Movies</li>
</ul>
</li>
</ul>
</div>
<div class="menu sagheader">
<ul>
<li>
<button class="ikon dropdown-toggle" type="button" data-toggle="dropdown"><i class="far fa-user"></i> </button>
<ul class="dropdown-menu">
<li class="accountname"><b><script>document.write(document.cookie.substring(5))</script></b></li>
<li class="login"><i class="fa fa-sign-in-alt" style="color:red;"></i> Login </li>
<li class="signup"><i class="fa fa-user-plus" style="color:red;"></i> Sign up </li>
<li class="logout"><a onclick="deletecookie()" style="cursor:pointer;"><i class="fas fa-door-open" style="color:red;"></i> Log out</a></li>
</ul>
</li>
</ul>
</div>
</header>
<div class="body" id="body">
<div class="baslik">Movies</div>
<div class="baslik2">See all</div>
<div id="movies">
</div>
<div class="baslik">Series</div>
<div class="baslik2">See all</div>
<div id="series">
</div>
<div class="baslik">Top Rated Movies</div>
<div class="baslik2">See all</div>
<div id="toprated">
</div>
</div>
<div class="footer">
<div class="">
<img src="img/sonlogo3.png" alt="logo">
<ul>
<li>Help</li>
<li>About</li>
<li>Contact</li>
<li>Terms and Policies</li>
</ul><br><br>
<ul>
<li>© 2021 Cinemeter</li>
<li class="destroy">|</li>
<li>All rights reserved.</li>
</ul>
</div>
</div>
</div>
Firebase Database
This is my website

While Firebase can order results, the results are always ascending. If you want to show them in descending order, you'll have to reverse them in your application code.
Something like this:
const query = query(child(dbRef,"Movies"), orderByChild("movieScore"));
get(query).then((snapshot)=>{
var movies=[];
snapshot.forEach(childSnapshot => {
movies.push(childSnapshot.val())
});
movies.reverse
});
If you want to get the top scores, you can use limitToLast in the query too:
const query = query(child(dbRef,"Movies"), orderByChild("movieScore"), limitToLast(5));
Also see the Firebase documentation on ordering and filtering data and limiting the number of results.
A few notes on your data structure:
Using sequential numeric keys for you nodes is an anti-pattern in Firebase, and it is typically better to use push keys. Also see Best Practices: Arrays in Firebase.
You're storing the score as a string, which is bound to lead to problems as strings are sorted lexicographically. I recommend converting your data to store the scores as numbers (so without " quotes around them).

I want to show only one input clicked (on vue.js)

I would like to show an input on the click, but being in a for loop I would like to show only the clicked one
<div v-for="(todo, n) in todos">
<i class="fas fa-minus ml-2"></i>
<li class="mt-2 todo">
{{ todo }}
</li>
<li class="button-container">
<button class="ml-1 btn btn-primary rounded-circle btn-sm" v-if="isHidden" v-on:click="isHidden = false"><i
class="THIS-CLICK"></i></button>
<input class="ml-5 border border-primary rounded" v-if="!isHidden" v-model="todo">
<button class="ml-1 btn btn-success rounded-circle btn-sm" v-if="!isHidden" v-on:click="isHidden = true"
#click="modifyTodo(n, todo)"><i class="far fa-save"></i></button>
</li>
</div>
I would like that on clicking on THIS-CLICK, only one input (that of the button clicked) is visible, but being in a for loop I don't know if it can be done

I would suggest to change the structure a bit in your app. You can clean up your code a lot by using v-if inside the button instead of two different buttons.
Also, moving as much javascript out from the markup as possible is a good practice.
I have an example below where this is done.
Regarding your question, you would have to add the key to each todo item.
new Vue({
el: "#app",
data() {
return {
todos: [{
name: 'wash hands',
isHidden: true
},
{
name: 'Stay home',
isHidden: true
}
],
};
},
methods: {
toggleTodo(n, todo) {
const hidden = todo.isHidden;
if (hidden) {
this.modifyTodo(n, todo);
todo.isHidden = false;
} else {
todo.isHidden = true;
}
},
modifyTodo(n, todo) {
//Some logic...
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(todo, n) in todos">
<i class="fas fa-minus ml-2"></i>
<li class="mt-2 todo">
{{ todo.name }}
</li>
<li class="button-container">
<input class="ml-5 border border-primary rounded" v-if="!todo.isHidden" v-model="todo.name">
<button #click="toggleTodo(n, todo)">
<i v-if="todo.isHidden" class="THIS-CLICK">click-this</i>
<i v-else class="far fa-save">save</i>
</button>
</li>
</div>
</div>
If you cannot do this, you could go with adding a new key to data like: hiddenTodos that would be an array of ids/a unique identifier to the todo you selected to hide.
in the template, it would be something like this:
<button #click="hiddenTodos.push(todo)">
...
<div v-if="hiddenTodos.includes(todo)"

data is not shown in vue js component after getting request

hello. after clicking on gallery component this component would be shown and get request in methods but wouldn't show gallery data :(
I wasn't having problem like this last time. maybe that's because my component is look like modal .
I know my talking is ridiculous :/
<template>
<section class="ShowGallery">
<div class="panelGallery">
<div class="topBlock">
<div class="close" #click="$emit('btnCloseGallery')"><i class="icon-error"></i></div>
</div>
<div class="bottomBlock">
<div class="block first">
<div class="image">
<img :src="gallery.url">
</div>
</div>
<div class="block second">
<h3>info gallery</h3>
{{gallery}}
<ul class="listInfo">
<li><span>{{gallery.size}}</span><span> : size </span></li>
<li><span v-text="gallery.type"></span><span> : format </span></li>
<li><span v-text="gallery.resolution"></span><span> : resolution </span></li>
<li><span v-text="gallery.name"></span><span> : name </span></li>
<li><span v-text="gallery.url"></span><span> : url </span></li>
<li><span v-text="gallery.path"></span><span> : path </span></li>
</ul>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
props : ['gallery_id'],
name: "ShowGallery",
data(){
return {
gallery : {} ,
}
},
methods : {
async getGallery(){
const data = await axios.get(`/admin/gallery/${this.gallery_id}`);
this.gallery = data.data;
console.log(this.gallery)
}
},
mounted(){
this.getGallery();
},
}
</script>

Kendo UI List View - switches model instance on Edit

I have a simple Kendo List view, with static data from an array of four Note objects
var notes = [{"note_id":1,"content":"This is Note 1","created":"2019-05-08 00:39:34"},
{"note_id":2,"content":"This is note 2","created":"2015-06-04 15:49:26"},
{"note_id":3,"content":"This is note 3","created":"2015-06-03 15:49:26"},
{"note_id":4,"content":"This is note 4","created":"2015-06-02 15:49:26"}];
I've got separate templates for display and edit of the Notes
<script type="text/x-kendo-tmpl" id="NoteTemplate">
<div class="product-view k-widget">
<dl>
<dt>#:kendo. toString(created, "dd/MM/yyyy HH:mm")#</dt>
<dd>#=(content)#</dd>
</dl>
<div class="edit-buttons">
<a class="k-button k-edit-button" href="\\#"><span class="k-icon k-i-edit"></span></a>
<a class="k-button k-delete-button" href="\\#"><span class="k-icon k-i-close"></span></a>
</div>
</div>
<input type="hidden" name="type_id" value="0" data-bind="value:type_id" />
</script>
<script type="text/x-kendo-tmpl" id="NoteEditTemplate">
<div class="product-view k-widget">
<dl>
<dt>#:kendo. toString(created, "dd/MM/yyyy HH:mm")#</dt>
<dd>
<div data-bind="value:content">
#=content#
</div>
</dd>
<div class="edit-buttons">
<a class="k-button k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a>
<a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a>
</div>
</div>
</script>
The issue is, when the user clicks the "pencil" icon to edit "Note 2", the edit template is rendered but with the model for Note 3
If the user cancels edit more, they again see the display template rendering Note 2
So it seems like the Kendo component is switching from Note 2 to note 3 when we go into edit mode... Why is it doing this?
See the running demo here:
https://dojo.telerik.com/oNosOCUv/3

I made 3 changes:-
Adding schema to the datasource.
Closing dl tag in EditNoteTemplate.
Move the hidden input into the the parent div, because Kendo is assigning the data uid to this element.
<script type="text/x-kendo-tmpl" id="NoteTemplate">
<div class="product-view k-widget">
<dl>
<dt>#:kendo. toString(created, "dd/MM/yyyy HH:mm")#</dt>
<dd >#=(content)#</dd>
<input type="hidden" name="type_id" value="0" data-bind="value:type_id" />
</dl>
<div class="edit-buttons">
<a class="k-button k-edit-button" href="\\#"><span class="k-icon k-i-edit"></span></a>
<a class="k-button k-delete-button" href="\\#"><span class="k-icon k-i-close"></span></a>
</div>
</div>
</script>
<script type="text/x-kendo-tmpl" id="NoteEditTemplate">
<div class="product-view k-widget">
<dl>
<dt>#:kendo. toString(created, "dd/MM/yyyy HH:mm")#</dt>
<dd>
<div data-bind="value:content">
#=content#
</div>
</dd>
</dl>
<div class="edit-buttons">
<a class="k-button k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a>
<a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a>
</div>
</div>
</script>
<script>
var notes = [
{"note_id":1,"content":"This is Note 1","created":"2019-05-08 00:39:34"},
{"note_id":2,"content":"This is note 2","created":"2015-06-04 15:49:26"},
{"note_id":3,"content":"This is note 3","created":"2015-06-03 15:49:26"},
{"note_id":4,"content":"This is note 4","created":"2015-06-02 15:49:26"}
];
$(document).ready(
function() {
var dataSource = new kendo.data.DataSource({
data: notes,
schema: {
model: {
id: "note_id",
fields: {
note_id: { type: "number" },
content: { type: "string" },
created: { type: "date" }
}
}
}});
var listView = $("#notes-list").kendoListView({
dataSource: dataSource,
template: kendo.template($("#NoteTemplate").html()),
editTemplate: kendo.template($("#NoteEditTemplate").html())
}).data("kendoListView");
});
</script>
<div id="notes-list"></div>

Output data and messages directly in the view

I am currently working on ajax, jquery and javascript. I have slight problems with it.
I can use this code to send the data and they are stored in the database.
But the data will not be displayed directly after sending in the view, until I have reloaded the page.
How can I output the data directly in the view without reloading the page?
How can I output errors and success messages as flashmessage (toastr) message?
how can I rewrite this code that works? I get the error message that it is a duplicate of the selectors.
$('#todolist-create-modal').modal('hide');
$('#todolist-create-modal').on('keypress', ":input:not(textarea)", function(event) {
return event.keyCode != 13;
});
Code
<script type="application/javascript">
$(document).ready(function () {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$('#add-todo-list').click(function(e) {
e.preventDefault();
var _token = $("input[name='_token']").val(); // get csrf field.
var title = $("input[name='title']").val();
var description = $("textarea[name='description']").val();
var privacy = $("select[name='privacy']").val();
var listid = $("select[name='privcy']").val();
$.ajax({
url:'{{ route('todolists.store') }}',
type: 'POST',
data: {_token:_token, title:title, description:description, privacy:privacy},
success: function (data) {
console.log(data);
if (privacy = 0) {
//go to the left side
} else {
//go to the right side
}
},
error: function(data){
console.log(data);
}
});
$('#todolist-create-modal').modal('hide');
$('#todolist-create-modal').on('keypress', ":input:not(textarea)", function(event) {
return event.keyCode != 13;
});
});
});
</script>
view
<div id="content" class="dashboard padding-10">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<a data-toggle="modal" data-target=".todolist-create-modal" class="btn btn-success btn-block btn-sm margin-bottom-10">Neue Liste erstellen</a>
</div>
<div class="col-md-6">
<div id="panel-misc-portlet-l3" class="panel panel-default text-center">
<div class="panel-heading nohover">
<span class="elipsis">
<strong>Öffentliche Tasks</strong>
</span>
</div>
</div>
<div class="alert alert-danger margin-bottom-30 {{ $todolistpublic->count() ? 'hidden' : '' }}">
Es wurden keine <strong>Einträge</strong> gefunden.
</div>
#foreach ($todolistpublic as $list)
<div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
<div class="panel-heading panel-pointer">
<span class="elipsis"><!-- panel title -->
<strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
</span>
<ul class="options pull-right relative list-unstyled hover-visible">
<li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden">
<i class="fa fa-plus"></i> Erstellen
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-info btn-xs white hover-hidden">
<i class="fa fa-edit"></i> Bearbeiten
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-delete-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-danger btn-xs white hover-hidden">
<i class="fa fa-times"></i> Löschen
</a>
</li>
<li></li>
</ul>
</div>
<div class="panel-body">
<div class="slimscroll" data-always-visible="false" data-rail-visible="false" data-railOpacity="1" data-height="100">
{{ $list->description }}
</div>
</div>
</div>
#endforeach
<div class="panel-footer mtm-10">
<span id="todo-list-counter-public">{{ $todolistpublic->count() }}</span> <span>{{ $todolistpublic->count() > 1? 'Listen' : 'Liste' }}</span>
</div>
</div>
<div class="col-md-6">
<div id="panel-misc-portlet-l3" class="panel panel-default text-center">
<div class="panel-heading nohover">
<span class="elipsis">
<strong>Private Tasks</strong>
</span>
</div>
</div>
<div class="alert alert-danger margin-bottom-30 {{ $todolistprivate->count() ? 'hidden' : '' }}">
Es wurden keine <strong>Einträge</strong> gefunden.
</div>
#foreach ($todolistprivate as $list)
<div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
<div class="panel-heading panel-pointer">
<span class="elipsis"><!-- panel title -->
<strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
</span>
<ul class="options pull-right relative list-unstyled hover-visible">
<li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden"><i class="fa fa-plus"></i> Erstellen</a></li>
<li><a data-toggle="modal" data-target=".todolist-modal" class="btn btn-info btn-xs white hover-hidden"><i class="fa fa-edit"></i> Bearbeiten</a></li>
<li><i class="fa fa-times"></i> Löschen</li>
<li></li>
</ul>
</div>
<div class="panel-body">
<div class="slimscroll" data-always-visible="false" data-rail-visible="false" data-railOpacity="1" data-height="100">
{{ $list->description }}
</div>
</div>
</div>
#endforeach
<div class="panel-footer mtm-10">
<span id="todo-list-counter-private">{{ $todolistprivate->count() }}</span> <span>{{ $todolistprivate->count() > 1? 'Listen' : 'Liste' }}</span>
</div>
</div>
#include('elements.addTodoList')
#include('elements.createTodoList')
#include('elements.addTask')
</div>
</div>
Controller
public function store(Request $request)
{
$validator = Validator::make($request->all(), [
'title' => 'required|min:5',
'description' => 'required|min:10',
'privacy' => 'required|integer'
]);
$attributeNames = array(
'title' => 'Title',
'description' => 'Description',
);
$validator->setAttributeNames($attributeNames);
//Redirect back if validation fails
if($validator->fails()) {
return response()->json(['error'=>$validator->errors()->all()]);
}
else{
$todolists = new Todolists();
$todolists->admin_id = Auth::id();
$todolists->title = $request->title;
$todolists->description = $request->description;
$todolists->privacy = $request->privacy;
$todolists->save();
return response()->json(['Your enquiry has been successfully submitted!']);
}
}
EDIT
I have revised and adapted the code. Currently I have two more problems:
The flashmessage is only output as 'empty'. Without text content. Where is the problem?
The div is also reloaded. But after it was loaded I can not send the same request again. Do I have to reset something or what is the error?
When I issue the errors in the console with console.log(data); I get the following error messages:
{error: Array(2)}
error
:
(2) ["The Title ist erforderlich.", "The Description ist erforderlich."]
<script type="application/javascript">
$(document).ready(function () {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$('#add-todo-list').click(function(e) {
e.preventDefault();
$('.todolist-create-modal').on('keypress', ":input:not(textarea)", function(event) {
return event.keyCode != 13;
});
var _token = $("input[name='_token']").val(); // get csrf field.
var title = $("input[name='title']").val();
var description = $("textarea[name='description']").val();
var privacy = $("select[name='privacy']").val();
$.ajax({
url:'{{ route('todolists.store') }}',
type: 'POST',
data: {_token:_token, title:title, description:description, privacy:privacy},
success: function (response) {
if (response.error) {
_toastr((response),"top-full-width","error",false);
}
else{
$('.todolist-create-modal').modal('hide');
$("#content").load(location.href+" #content>*","");
_toastr((response),"top-full-width","success",false);
}
}
});
});
});
</script>

Q: How can I output the data directly in the view without reloading the page?
One way with jQuery was loading partial content, this will request again the page, get the contents of #content div and replace the HTML, fast and without reload the page:
$("#content").load("/url-of-page > #content > *");
Q: How can I output errors and success messages as flashmessage (toastr) message?
Just write the message on a HTML element:
success: function(data){
$(".alert-danger").addClass("hidden");
$(".alert-success").html(data.msg).removeClass("hidden");
},
error: function(data){
$(".alert-success").addClass("hidden");
$(".alert-danger").html(data.error).removeClass("hidden");
}