Skip to content
Snippets Groups Projects
Commit 6b9431da authored by Karl Hasselbring's avatar Karl Hasselbring
Browse files

Improved: Resultsaver grundsätzlich eingebaut

parent 4cd2a31a
No related branches found
No related tags found
5 merge requests!1262WIP: Resolve "Spendenseite Texte anpassen",!1207WIP: Resolve "Rechtschreibfehler",!1198Meta ger redesign,!1131Meta ger redesign,!1114640
Hide whitespace changes
Inline Side-by-side
Showing
with 187 additions and 149 deletions
resources/assets/js/results.js
+ 137
− 110
View file @ 6b9431da
/*
* This object gathers all stored Result Objects and can Update the Interface to show them.
*/
function Results(sort){
if(!localStorage) return;
this.prefix = "result_";
function Results (sort) {
if (!localStorage) return;
this.prefix = 'result_';
this.sort = sort;
this.results = [];
this.updateResults();
......@@ -11,146 +11,153 @@ function Results(sort){
this.sortResults();
}
Results.prototype.sortResults = function(){
if(this.sort === undefined) this.sort = "chronological";
Results.prototype.sortResults = function () {
if (this.sort === undefined) this.sort = 'chronological';
var sortType = this.sort;
switch(sortType){
case "chronological":
this.results.sort(function(a,b){
if(a.added > b.added) return -1;
if(a.added < b.added) return 1;
switch (sortType) {
case 'chronological':
this.results.sort(function (a, b) {
if (a.added > b.added) return -1;
if (a.added < b.added) return 1;
return 0;
});
break;
case "rank":
this.results.sort(function(a,b){
if(a.rank > b.rank) return -1;
if(a.rank < b.rank) return 1;
case 'rank':
this.results.sort(function (a, b) {
if (a.rank > b.rank) return -1;
if (a.rank < b.rank) return 1;
return 0;
});
break;
case "alphabetical":
this.results.sort(function(a,b){
if(b.hostname > a.hostname) return -1;
if(b.hostname < a.hostname) return 1;
case 'alphabetical':
this.results.sort(function (a, b) {
if (b.hostname > a.hostname) return -1;
if (b.hostname < a.hostname) return 1;
return 0;
});
break;
}
}
};
Results.prototype.updateResults = function(){
Results.prototype.updateResults = function () {
// Iterate over all Keys in the LocalStorage
for(var i = 0; i < localStorage.length; i++){
if(localStorage.key(i).indexOf(this.prefix) === 0){
for (var i = 0; i < localStorage.length; i++) {
if (localStorage.key(i).indexOf(this.prefix) === 0) {
var key = localStorage.key(i);
key = key.substr(this.prefix.length);
var tmpResult = new Result(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, key);
var tmpResult = new Result(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, key);
tmpResult.setIndex(i);
this.results.push(tmpResult);
}
}
}
};
Results.prototype.deleteResults = function(){
Results.prototype.deleteResults = function () {
var keys = [];
for(var i = 0; i < localStorage.length; i++){
if(localStorage.key(i).indexOf(this.prefix) === 0){
for (var i = 0; i < localStorage.length; i++) {
if (localStorage.key(i).indexOf(this.prefix) === 0) {
var key = localStorage.key(i);
keys.push(key);
}
}
$.each(keys, function(index, value){
$.each(keys, function (index, value) {
localStorage.removeItem(value);
});
}
};
Results.prototype.updateResultPageInterface = function(){
Results.prototype.updateResultPageInterface = function () {
var sortType = this.sort;
if(this.results.length === 0){
$("#savedFokiTabSelector, #savedFoki").remove();
$($("#foki > li[data-loaded=1]").get(0)).find(">a").tab("show");
if (this.results.length === 0) {
$('#savedFokiTabSelector, #savedFoki').remove();
return;
}
if($("#savedFokiTabSelector").length === 0){
/*if ($('#savedFokiTabSelector').length === 0) {
var savedFoki = $('\
<li id="savedFokiTabSelector" data-loaded="1" class="tab-selector" role="presentation">\
<div id="savedFokiTabSelector">\
<a aria-controls="savedFoki" href="#savedFoki" role="tab" data-toggle="tab">\
<span class="glyphicon glyphicon-floppy-disk"></span> gespeicherte Ergebnisse\
<span class="badge">' + this.results.length + '</span>\
</a>\
</li>\
');
$("#foki").append(savedFoki);
}else{
$("#savedFokiTabSelector span.badge").html(this.results.length);
}
if($("#savedFoki").length === 0){
// Now append the Tab Panel
var tabPanel = $('\
<div role="tabpanel" class="tab-pane" id="savedFoki">\
</div>\
')
$('#foki').append(savedFoki)
} else {
$('#savedFokiTabSelector span.badge').html(this.results.length)
}*/
if ($('#savedFoki').length === 0) {
// Now append the Tab Panel
var tabPanel = $('\
<div id="savedFoki">\
</div>\
');
$("#main-content-tabs").append(tabPanel);
}else{
$("#savedFoki").html("");
var tabPanel = $("#savedFoki");
}
this.addToContainer(tabPanel, sortType);
}
$('#additions-container').append(tabPanel);
} else {
$('#savedFoki').html('');
var tabPanel = $('#savedFoki');
}
this.addToContainer(tabPanel, sortType);
};
Results.prototype.addToContainer = function(container){
Results.prototype.addToContainer = function (container) {
var sortType = this.sort;
$.each(this.results, function(index, result){
$.each(this.results, function (index, result) {
$(container).append(result.toHtml());
});
var options = $('\
<div class="saver-options row">\
<input class="form-control" type="text" placeholder="Filtern">\
<select class="form-control">\
<option value="chronological">Chronologisch</option>\
<option value="rank">MetaGer-Ranking</option>\
<option value="alphabetical">Alphabetisch (Hostname)</option>\
</select>\
<button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-trash"></span> <span class="hidden-xs">Ergebnisse</span> löschen</button>\
<div id="saver-options">\
<div class="saver-option saver-option-filter">\
<input class="form-control" type="text" placeholder="&#xf0b0 Filtern">\
</div>\
<div class="saver-option saver-option-sort">\
<select class="form-control" style="font-family: FontAwesome, sans-serif;">\
<option value="chronological" style="font-family: FontAwesome, sans-serif;">&#xf017 Chronologisch</option>\
<option value="rank" style="font-family: FontAwesome, sans-serif;">&#xf162 MetaGer-Ranking</option>\
<option value="alphabetical" style="font-family: FontAwesome, sans-serif;">&#xf15d Alphabetisch (Hostname)</option>\
</select>\
</div>\
<div class="saver-option saver-option-delete">\
<button class="btn btn-danger btn-md" id="saver-options-btn">\
<i class="fa fa-trash-o" aria-hidden="true"></i>\
<span class="hidden-xs">Ergebnisse</span> löschen</button>\
</div>\
</div>\
');
$(options).find("select").val(sortType);
$(options).find('select').val(sortType);
$(container).prepend(options);
$(options).find("select").change(function(){
$(options).find('select').change(function () {
new Results($(this).val()).updateResultPageInterface();
});
$(options).find("button").click({caller: this}, function(event){
event.data.caller.deleteResults();
new Results().updateResultPageInterface();
$(options).find('button').click({caller: this}, function (event) {
event.data.caller.deleteResults();
new Results().updateResultPageInterface();
});
$(options).find("input").keyup(function(){
$(options).find('input').keyup(function () {
var search = $(this).val();
$("#savedFoki > div.result").each(function(index, value){
$('#savedFoki > div.result').each(function (index, value) {
var html = $(this).html();
if(html.toLowerCase().indexOf(search.toLowerCase()) === -1){
$(value).addClass("hidden");
}else{
$(value).removeClass("hidden");
if (html.toLowerCase().indexOf(search.toLowerCase()) === -1) {
$(value).addClass('hidden');
}else {
$(value).removeClass('hidden');
}
});
});
};
}
function Result(title, link, anzeigeLink, gefVon, hoster, anonym, description, color, rank, hash){
this.prefix = "result_"; // Präfix for the localStorage so we can find all Items
function Result (title, link, anzeigeLink, gefVon, hoster, anonym, description, rank, hash) {
this.prefix = 'result_'; // Präfix for the localStorage so we can find all Items
if(hash !== null && hash !== undefined){
if (hash !== null && hash !== undefined) {
this.hash = hash;
this.load();
}else{
} else {
console.log('Result: ', title, link, anzeigeLink, gefVon, hoster, anonym, description);
this.hash = MD5(title + link + anzeigeLink + gefVon + hoster + anonym + description);
this.title = title;
......@@ -160,20 +167,19 @@ function Result(title, link, anzeigeLink, gefVon, hoster, anonym, description, c
this.hoster = hoster;
this.anonym = anonym;
this.description = description;
this.color = color;
this.rank = rank;
this.added = new Date().getTime();
var parser = document.createElement('a');
parser.href = this.anzeigeLink;
this.hostname = parser.hostname;
this.save()
this.save();
}
}
Result.prototype.load = function(){
if(localStorage){
var result = localStorage.getItem(this. prefix + this.hash);
if(result === null) return false;
Result.prototype.load = function () {
if (localStorage) {
var result = localStorage.getItem(this.prefix + this.hash);
if (result === null) return false;
result = b64DecodeUnicode(result);
result = JSON.parse(result);
this.title = result.title;
......@@ -184,21 +190,19 @@ Result.prototype.load = function(){
this.anonym = result.anonym;
this.description = result.description;
this.added = result.added;
this.color = result.color;
this.rank = result.rank;
this.hostname = result.hostname;
return true;
}else{
}else {
return false;
}
}
};
Result.prototype.save = function(){
Result.prototype.save = function () {
/*
* This function will save the data of this Result to the LocalStorage
*/
if(localStorage){
if (localStorage) {
var result = {
title: this.title,
link: this.link,
......@@ -208,7 +212,6 @@ Result.prototype.save = function(){
anonym: this.anonym,
description: this.description,
added: this.added,
color: this.color,
rank: this.rank,
hostname: this.hostname
};
......@@ -219,34 +222,33 @@ Result.prototype.save = function(){
localStorage.setItem(this.prefix + this.hash, result);
return true;
}else{
}else {
return false;
}
}
};
function b64EncodeUnicode(str) {
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
return String.fromCharCode('0x' + p1);
}));
function b64EncodeUnicode (str) {
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
return String.fromCharCode('0x' + p1);
}));
}
function b64DecodeUnicode(str) {
return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
function b64DecodeUnicode (str) {
return decodeURIComponent(Array.prototype.map.call(atob(str), function (c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
}
Result.prototype.setIndex = function(index){
Result.prototype.setIndex = function (index) {
this.index = index;
}
};
Result.prototype.remove = function(){
Result.prototype.remove = function () {
localStorage.removeItem(this.prefix + this.hash);
new Results().updateResultPageInterface();
}
};
Result.prototype.toHtml = function(){
Result.prototype.toHtml = function () {
var result = $('\
<div class="result row">\
<div class="col-sm-1 glyphicon glyphicon-trash remover" title="Ergebnis aus dem Speicher löschen">\
......@@ -278,8 +280,33 @@ Result.prototype.toHtml = function(){
<div class="description">' + this.description + '</div>\
</div>\
</div>');
$(result).find(".remover").click({caller: this}, function(event){
$(result).find('.remover').click({caller: this}, function (event) {
event.data.caller.remove();
});
return result;
}
\ No newline at end of file
};
/**
* Saves the result at the given index
* @param {int} index The index of the result to save
*/
function resultSaver (index) {
// Read the necessary data from the result html
var title = $('.result[data-count=' + index + '] .result-title a').html();
var link = $('.result[data-count=' + index + '] .result-title a').attr('href');
var anzeigeLink = $('.result[data-count=' + index + '] .result-link a').html();
var gefVon = $('.result[data-count=' + index + '] .result-hoster a').html();
var hoster = $('.result[data-count=' + index + '] .result-hoster a').attr('href');
var anonym = $('.result[data-count=' + index + '] .result-proxy').attr('href');
var description = $('.result[data-count=' + index + '] .result-description').html();
// Create the result object
new Result(title, link, anzeigeLink, gefVon, hoster, anonym, description, index, undefined);
// Animate the result transfer to the saved results
/*var transferTarget = $('#savedFokiTabSelector').length ? $('#savedFokiTabSelector') : $('#foki')
$('.result[data-count=' + index + ']').transfer({to: transferTarget, duration: 1000});*/
// Update the saved results
new Results().updateResultPageInterface();
}
resources/assets/js/scriptResultPage.js
+ 0
− 16
View file @ 6b9431da
......@@ -375,19 +375,3 @@ function initialLoadContent (fokus) {
getDocumentReadyForUse(fokus);
});
}
function resultSaver (index) {
var title = $('div.tab-pane.active .result[data-count=' + index + '] a.title').html();
var link = $('div.tab-pane.active .result[data-count=' + index + '] a.title').attr('href');
var anzeigeLink = $('div.tab-pane.active .result[data-count=' + index + '] div.link-link > a').html();
var gefVon = $('div.tab-pane.active .result[data-count=' + index + '] span.hoster').html();
var hoster = $('div.tab-pane.active .result[data-count=' + index + '] a.title').attr('data-hoster');
var anonym = $('div.tab-pane.active .result[data-count=' + index + '] a.proxy').attr('href');
var description = $('div.tab-pane.active .result[data-count=' + index + '] div.description').html();
var color = $('div.tab-pane.active .result[data-count=' + index + '] div.number').css('color');
var rank = parseFloat($('div.tab-pane.active .result[data-count=' + index + ']').attr('data-rank'));
new Result(title, link, anzeigeLink, gefVon, hoster, anonym, description, color, rank, undefined);
var to = $('#savedFokiTabSelector').length ? $('#savedFokiTabSelector') : $('#foki');
$('div.tab-pane.active .result[data-count=' + index + ']').transfer({to: to, duration: 1000});
new Results().updateResultPageInterface();
}
resources/assets/less/metager/result-page.less
+ 5
− 4
View file @ 6b9431da
/* Ergebnisseite */
@import "./quicktips.less";
@import "./result-saver.less";
@import "./result.less";
@import "./product.less";
//
......@@ -342,12 +343,12 @@ a {
@result-width: 700px;
@quicktip-width: 500px;
.resultpage-container {
#resultpage-container {
width: @result-width + @quicktip-width;
align-self: center;
@media (max-width: (@result-width + @quicktip-width - 1px)) {
width: @result-width;
#quicktips {
#additions-container {
display: none;
}
}
......@@ -356,11 +357,11 @@ a {
}
display: flex;
justify-content: center;
#results {
#results-container {
max-width: @result-width;
width: 100%;
}
#quicktips {
#additions-container {
padding-left: 50px;
width: @quicktip-width;
}
......
resources/assets/less/metager/result-saver.less 0 → 100644
+ 25
− 0
View file @ 6b9431da
#savedFoki {
padding-top: 50px;
#saver-options {
display: flex;
flex-direction: column;
align-items: stretch;
>* {
margin: 5px 0px;
display: flex;
align-items: center;
}
.saver-option-filter>input {
font-family: FontAwesome, sans-serif;
}
.saver-option-sort>select {
&,
option {
font-family: FontAwesome, sans-serif;
}
}
.saver-option-delete button {
width: 100%;
}
}
}
\ No newline at end of file
resources/views/layouts/researchandtabs.blade.php
+ 16
− 12
View file @ 6b9431da
......@@ -8,18 +8,22 @@
</div>
</div>
@endif
<div class="content-wrapper">
<header id="research-bar">
<div id="header-logo">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">MetaGer</h1></a>
</div>
<div id="header-searchbar">
@include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
</div>
</header>
<div id="research-bar-placeholder">
<header id="research-bar">
<div id="header-logo">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">MetaGer</h1></a>
</div>
<div id="header-searchbar">
@include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
</div>
<main class="resultpage-container">
</header>
<div id="research-bar-placeholder"></div>
<div id="resultpage-container">
<div id="results-container">
@yield('results')
</main>
</div>
<div id="additions-container">
@if( $metager->showQuicktips() )
<div id="quicktips"></div>
@endif
</div>
</div>
\ No newline at end of file
resources/views/layouts/result.blade.php
+ 1
− 1
View file @ 6b9431da
......@@ -48,7 +48,7 @@
</div>
</div>
<span class="result-hoster">
<span>von {!! $result->gefVon !!}</span>
von {!! $result->gefVon !!}
</span>
@if( isset($result->partnershop) && $result->partnershop === TRUE )
<span class="partnershop-info">
......
resources/views/layouts/resultPage.blade.php
+ 1
− 1
View file @ 6b9431da
......@@ -25,7 +25,7 @@
@include('modals.create-focus-modal')
@include('layouts.researchandtabs')
@else
<div class="resultpage-container">
<div id="resultpage-container">
@yield('results')
</div>
@endif
......
resources/views/metager3.blade.php
+ 2
− 5
View file @ 6b9431da
......@@ -21,7 +21,7 @@
</ul>
</div>
@endif
<div id="results">
<main id="results">
{{-- Show initial products or ads --}}
@if($metager->hasProducts())
@if( $metager->getFokus() !== "produktsuche" && !$apiAuthorized)
......@@ -54,8 +54,5 @@
<a @if($metager->nextSearchLink() !== "#") href="{{ $metager->nextSearchLink() }}" @endif>{{ trans('results.weiter') }}</a>
</div>
</nav>
</div>
@if( $metager->showQuicktips() )
<div id="quicktips"></div>
@endif
</main>
@endsection
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment