resources/js/app.js

];

Till sist returnerar man view admin.home med 'statistics' =>

$statistics som parameter.

4.14.3 Views/admin/home.blade.php

Home.blade.php visar CMS-systemets dashboard eller startsida. Efter

@extends i filens början lägger man @inject('productCont', 'App\Http\

Controllers\ProductController'), som gör att man kan använda

productCont som en instans till classen ProductController.

Denna view innehåller en div med class .card och .card-header med titel

”Dasboard”. I .card-body finns en h4 med titel ”Välkommen till adminpanelen”, sedan en h5 med titel ”Här har du några snabblänkar som kan komma väl till pass”. Därefter följer en ul med class .list-group samt

.list-group-flush, där varje li-element har class .list-group-item. Det finns tre li-element med en länk i varje. Dessa är ”Gå till din butik”

-route('shop'), ”Skapa ny produkt” - route('adminProduct.create') samt

”Visa dina beställningar” - route('adminOrder.index').

Efter listan följer en h5 med titel ”Försäljningsöversikt”, därefter en div med class .row. I denna lägger man en foreach-loop som loopar $statistics as

$statistic och en div med class .col-md-4 bildar sedan en tre-kolumns-layout. I denna div ligger ytterligare en div med class .card. I .card-header

ligger en strong-tagg och inuti denna skriver man ut

$statistic['header']. Därefter skapar man en ul med class .list-group

samt .list-group-flush. Listan innehåller två li-element och dessa har class .list-group-item .d-flex .justify-content-between .align-items-center som bidrar till att inneliggande text placeras till vänster och

span-elementet till höger. Texten i li-elementet är ”Antal ordrar” samt

”Försäljning”. Span-elementet innehåller sedan $statistic['orders']

respektive $productCont→format_price($statistic['sale']), där den sistnämnda formaterar priset i ProductController. (Se funktion format_price under 4.12.3)

4.15 resources/js/app.js

Denna fil innehåller samtlig JavaScript-kod som används i administrations-gränssnittet. Koden är skriven med jQuery.

Visa leveransadress vid ifylld checkbox

En if-sats kollar om #change_shipping_address är checked från start. På

.add_shipping_address om true sätter man .show() och om false sätter man .hide().

Visa input för företagsnamn om customer_type company är checkad

En .on(’change’, function(){}) på input[name='customer_type']

innehåller en if-sats som kollar om #customer_type_comp är checked. På

#customer_company_name om true sätter man .show() och om false sätter man .hide().

En likadan funktion skapas för input[name='edit_customer_type’]. Radera bild vid redigering av kategori

$('.featured-image .close').click(function(){}) anropas när man klickar på krysset bredvid bilden, om det finns någon, vid redigering av kategori. $(this).prev('img').remove() tar bort img-taggen. Därefter skriver man ut ett likadant fil-element som ligger om det inte finns någon bild.

Denna lägger man i html för $(this).parent().

Därefter lägger man till en .on(’change’, function(){}) på

#cat_image_upload som är beskriven nedan.

Visa bildnamn som filnamn i file-input

En .on(’change’, function(){}) på #cat_image_upload sparar $ (this).val() i variabeln fileName. Variabeln fileNameIndex hämtar index av ”\\” med fileName.lastIndexOf("\\") + 1 för att sedan i variabeln

filename göra en substring på fileName med fileNameIndex som parameter. Detta resulterar i bild-namnet utan base-url.

I html för $(this).next('.custom-file-label') lägger man till filename. Visa leveransadress om checkbox checkas

En .on(’click’, function(){}) på #change_shipping_address innehåller samma element som beskrivet i Visa leveransadress vid ifylld checkbox ovan.

Lägg till val på produkt

Vid klick på #add_product_option sparar man $('#product_id').val() i variabeln id och $('#add_product_option_name').val() i variabeln name. Detta är id:t på huvudprodukten samt namnet på det option man vill lägga till.

Därefter skriver man ett ajax-anrop till url /admin/product/option/create

av type POST med datan _token: $('meta[name="csrf-token"]').attr('content'), id: id och name: name. Vid success gör man en location.reload().

Lägg till valalternativ i val på produkt

Vid klick på #add_product_option_value_btn sparar man $ ('#product_option_id').val() i variabeln option_id och $ ('#add_product_option_value').val() i variabeln option_value. Detta är option id:t samt namnet på det valalternativ man vill lägga till.

Därefter sparar man följande variabler:

Man gör sedan ett ajax-anrop mot url

/admin/product/option/value/create av type POST med datan av de variabeln id sparar man $(this).data('id'), som är id:t på valet.

Därefter gör man ett ajax-anrop mot /admin/product/option/order av type

POST och datan med _token, id: id och order: i. Vid success gör man en

location.reload().

Hämta valalternativ (option values) och sortera

En .click(function(){}) på .add_product_option_values sparar $ (this).data('option') i variabeln option. Det är information om det aktuella optionet. Därefter sätter man option.name i html för

#option_name_for_value och option.id som value i #product_option_id. Sedan kommer en variabel med namn arr som innehåller en tom array, samt en variabel med namn values_html som innehåller en tom sträng.

En for-loop tar var i = option.option_values.length - 1; i >= 0;

i-- som parametrar och inuti den i variabeln optionVal sparar man

option.option_values[i]. Detta är varje valalternativ som finns. Man gör sedan en .push() mot arr med optionVal.

Efter loopen lägger man en arr.sort(function(a, b) {}) som innehåller en sortering av arrayen. Variabeln orderA tar a.order och orderB tar b.order. Sedan kollar en if-sats om orderA är mindre än orderB, den returnerar isåfall -1. Sedan kollar en if-sats om orderA är större än orderB, den returnerar isåfall 1. Annars returnerar den 0.

En each-loop följer som loopar arr som key, option_val. Där plussar man på values_html med ett li-element med data-id option_val.id,

option_val.value som text och en button av typ button med class

.delete-option-value som har en soptunne-ikon. values_html skriver man sedan i html för #sortable_option_values, som blir en lista av alla valalternativ i respektive val.

Nedanför detta gör man en likadan funktion som beskrivet under Sortera val (options) ovan, fast för #sortable_option_values. Loopen går genom

#sortable_option_values li. Ajax-anrop gör man mot

/admin/product/option/value/order istället.

Radera val (option)

$(document).on(’click’, ’.delete-option’, function(){}) anropas när man klickar för att radera ett val. En if-sats skickar en confirm() och om

true sparar den $(this).closest('.row') i variabeln row, samt

row.data(’id’) i variabeln id. Detta är id:t för valet.

Sedan kommer variabeln option som hämtar .data(’option’) från

.add_product_option_values. Därefter sparar man option.product_id i variabeln parent_id, som då är id:t för huvudprodukten.

Efter det gör man ett ajax-anrop mot /admin/product/option/{id}/destroy, där {id} byts ut mot variabeln id, av type GET med data _token samt

parent_id: parent_id. Vid success gör man en location.reload(). Radera valalternativ (option value)

$(document).on(’click’, ’.delete-option-value’, function(){})

anropas när man klickar för att radera ett valalternativ. Funktionen ser likadan ut som beskrivet under Radera val (option) ovan, men variabeln row har värdet av $(this).parent() och url i ajax-anropet är

/admin/product/option/value/{id}/destroy där {id} byts ut till variabeln

id.