added basic layout for overview page

app/Http/Controllers/AdgoalController.php

@@ -110,4 +110,53 @@ class AdgoalController extends Controller
     public static function generatePassword($affillink, $link){
         return hash_hmac("sha256", $affillink . $link, config('metager.metager.adgoal.private_key'));
     }
+
+
+    /**
+     * Routes for the Admin Interface
+     */
+    public function adminIndex(Request $request){
+        return view('admin.affiliates.index')
+            ->with('title', "Affilliates Overview - MetaGer")
+            ->with('css', [
+                mix('/css/admin/affilliates/index.css')
+            ])
+            ->with('darkcss', [
+                mix('/css/admin/affilliates/index-dark.css')
+            ])
+            ->with('js', [
+                mix('/js/admin/affilliates.js')
+            ]);
+    }
+
+    public function blacklistJson(Request $request){
+        $request->validate([
+            "blacklist" => 'boolean'
+        ]);
+
+        $count = 5; # How Many results to return
+        $skip = 0; # How many results to skip
+        $blacklist = $request->input('blacklist', true);
+
+        $total = DB::select("select count(*) as total_rows from affiliate_blacklist");
+        $total = intval($total[0]->{"total_rows"});
+        $blacklistItems = DB::select('select * from affiliate_blacklist where blacklist = ? order by created_at desc limit ? offset ?', [$blacklist, $count, $skip]);
+        
+        $result = [
+            "count" => $count,
+            "skip" => $skip,
+            "total" => $total,
+            "results" => $blacklistItems
+        ];
+
+        return response()->json($result);
+    }
+
+    public function whitelistJson(Request $request){
+        $input = $request->all();
+        $input["blacklist"] = true;
+        $request->replace($input);
+        return $this->blacklistJson($request);
+    }
+
 }

database/migrations/2021_10_05_154034_affiliate_blacklist.php

+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AffiliateBlacklist extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('affiliate_blacklist', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->string('hostname');
+            $table->boolean('blacklist')->default(true);
+            $table->timestamp('created_at')->nullable(false)->useCurrent();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('affiliate_blacklist');
+    }
+}

resources/js/admin/affilliates/index.js

+window.addEventListener("load", function () {
+    console.log("loaded");
+
+    refreshBlacklist();
+    refreshWhitelist();
+});
+
+function refreshBlacklist() {
+    fetch('/admin/affiliates/json/blacklist')
+        .then(response => response.json())
+        .catch(error => console.log(error))
+        .then(blacklist => {
+            document.querySelector("#blacklist-container > .blacklist > h3 > a").innerHTML = "Blacklist (" + blacklist.total + ")";
+            document.querySelector("#blacklist-container > .blacklist .skeleton").style.display = "none";
+            // Todo add returned Items to the list
+        })
+        .catch(error => console.log(error));
+}
+
+function refreshWhitelist() {
+    fetch('/admin/affiliates/json/whitelist')
+        .then(response => response.json())
+        .catch(error => console.log(error))
+        .then(blacklist => {
+            document.querySelector("#blacklist-container > .whitelist > h3 > a").innerHTML = "Whitelist (" + blacklist.total + ")";
+            document.querySelector("#blacklist-container > .whitelist .skeleton").style.display = "none";
+            // Todo add returned Items to the list
+        })
+        .catch(error => console.log(error));
+}
\ No newline at end of file

resources/less/metager/pages/admin/affilliates/index.less

+@import "../../../variables.less";
+
+#blacklist-container {
+    display: flex;
+    flex-wrap: wrap;
+
+    &>div {
+        flex-grow: 1;
+        padding: 24px;
+    }
+
+    .blacklist-items {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+}
+
+#affilliate-clicks {
+    padding: 24px;
+
+    &>input {
+        margin-bottom: 16px;
+        padding: 8px;
+        font-size: 1.1rem;
+        border-radius: .3rem;
+    }
+}
+
+.skeleton:empty {
+    box-sizing: content-box;
+    height: 170px;
+    background-color: @color-almost-white;
+    border-radius: 0px 0px 0px 0px;
+    background-image:
+        linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%),
+        linear-gradient(#cccccc 20px, transparent 0),
+        radial-gradient(circle 14px at 14px 14px, #cccccc 13px, transparent 14px),
+        linear-gradient(#cccccc 20px, transparent 0),
+        radial-gradient(circle 14px at 14px 14px, #cccccc 13px, transparent 14px),
+        linear-gradient(#cccccc 20px, transparent 0),
+        radial-gradient(circle 14px at 14px 14px, #cccccc 13px, transparent 14px);
+    background-repeat: repeat-y;
+    background-size: 50px 170px, 300px 170px, 28px 170px, 300px 170px, 28px 170px, 300px 170px, 28px 170px;
+    background-position: 0 0, 70px 125px, 20px 120px, 70px 75px, 20px 70px, 70px 25px, 20px 20px;
+    animation: shineForSkeleton 2s infinite;
+}
+
+@keyframes shineForSkeleton {
+    to {
+        background-position: 100% 0, 70px 125px, 20px 120px, 70px 75px, 20px 70px, 70px 25px, 20px 20px;
+    }
+}
\ No newline at end of file

resources/less/metager/variables.less

 // MetaGer Brand Color
-@metager-orange: #FF8000; 
+@metager-orange: #FF8000;
 // Shades of Gray
 @color-white: white;
 @color-almost-white: mix(@color-white, @color-black, 90%);
@@ -9,16 +9,15 @@
 @color-almost-black: mix(@color-white, @color-black, 10%);
 @color-black: black;
 // Default Background Color
-@background-color: white;
+@background-color: rgb(245, 245, 245);
 @background-color-mobile: #FAFAFA;
 @sidebar-list-hover-color: @color-almost-white;
 // Default Font
-@metager-font:
-"Liberation Sans",
-"Helvetica Neue",
-"Helvetica",
-"Arial",
-sans-serif;
+@metager-font: "Liberation Sans",
+    "Helvetica Neue",
+    "Helvetica",
+    "Arial",
+    sans-serif;
 // General text color.
 @text-color: @color-black;
 // Default textual link color.
@@ -64,21 +63,21 @@ sans-serif;
 @spruch-author-color: @color-strong-grey;
 
 @story-privacy-background: @color-almost-white;
-@story-privacy-color:@color-almost-black;
-@story-ngo-background:white;
-@story-ngo-color:#AD1A00;
-@story-diversity-background:#edfdff;
-@story-diversity-color:#0c4690;
-@story-eco-background:#e3ffe9;
-@story-eco-color:#0c621a;
-@story-plugin-background:white;
-@story-font-color:#474747;
-@icon-color:0;
+@story-privacy-color: @color-almost-black;
+@story-ngo-background: white;
+@story-ngo-color: #AD1A00;
+@story-diversity-background: #edfdff;
+@story-diversity-color: #0c4690;
+@story-eco-background: #e3ffe9;
+@story-eco-color: #0c621a;
+@story-plugin-background: white;
+@story-font-color: #474747;
+@icon-color: 0;
 
 @searchbar-background-color: white;
 
-@input-background:#fff;
-@input-text:#000;
+@input-background: #fff;
+@input-text: #000;
 
-@blacklist-entries-odd:rgb(240, 240, 240);
-@blacklist-entries-even:rgb(255, 215, 200);
\ No newline at end of file
+@blacklist-entries-odd: rgb(240, 240, 240);
+@blacklist-entries-even: rgb(255, 215, 200);
\ No newline at end of file

resources/views/admin/affiliates/index.blade.php

+@extends('layouts.subPages')
+
+@section('title', $title )
+
+@section('content')
+<div id="blacklist-container">
+    <div class="card blacklist">
+        <h3><a href="#">Blacklist (?)</a></h3>
+        <div class="skeleton"></div>
+        <ul class="blacklist-items">
+        </ul>
+    </div>
+    <div class="card whitelist">
+        <h3><a href="#">Whitelist (?)</a></h3>
+        <div class="skeleton"></div>
+        <ul class="blacklist-items">
+        </ul>
+    </div>
+</div>
+<div id="affilliate-clicks" class="card">
+    <input type="text" name="filter" id="filter" placeholder="Filter Results">
+    <div class="skeleton"></div>
+</div>
+@endsection

routes/web.php

@@ -221,6 +221,12 @@ Route::group(['middleware' => ['auth.basic'], 'prefix' => 'admin'], function ()
     Route::get('adgoal', 'AdgoalTestController@index')->name("adgoal-index");
     Route::post('adgoal', 'AdgoalTestController@post')->name("adgoal-generate");
     Route::post('adgoal/generate-urls', 'AdgoalTestController@generateUrls')->name("adgoal-urls");
+
+    Route::group(['prefix' => 'affiliates'], function() {
+        Route::get('/', 'AdgoalController@adminIndex');
+        Route::get('/json/blacklist', 'AdgoalController@blacklistJson');
+        Route::get('/json/whitelist', 'AdgoalController@whitelistJson');
+    });
 });
 
 Route::get('settings', function () {

webpack.mix.js

@@ -25,6 +25,8 @@ mix
   .less("resources/less/utility.less", "public/css/utility.css")
   .less("resources/less/metager/pages/count/style-dark.less", "public/css/count/dark.css")
   .less("resources/less/metager/pages/count/style.less", "public/css/count/style.css")
+  .less("resources/less/metager/pages/admin/affilliates/index.less", "public/css/admin/affilliates/index.css")
+  .less("resources/less/metager/pages/admin/affilliates/index-dark.less", "public/css/admin/affilliates/index-dark.css")
   .less("resources/less/metager/pages/asso/style-dark.less", "public/css/asso/dark.css")
   .less("resources/less/metager/pages/asso/style.less", "public/css/asso/style.css")
   .less("resources/less/metager/pages/spende/danke.less", "public/css/spende/danke.css")
@@ -60,6 +62,7 @@ mix
   )
   .babel("resources/js/widgets.js", "public/js/widgets.js")
   .babel("resources/js/scriptJoinPage.js", "public/js/scriptJoinPage.js")
+  .babel("resources/js/admin/affilliates/index.js", "public/js/admin/affilliates.js")
   // source maps
   .sourceMaps(false, "inline-source-map")
   // versioning