Start of changing tabled to flexboxes

Reviewed-on: #29

.gitignore

@@ -3,4 +3,3 @@
 *.sqlite
 var/cache/
 .env.local
-/node_modules/

Dockerfile

@@ -7,9 +7,7 @@ RUN apt-get update && apt-get install -y \
     git \
     unzip \
     libicu-dev \
-    libzip-dev \
+    libzip-dev
-    nodejs \
-    npm
 
 RUN docker-php-ext-install zip intl
 

bin/cachewarmup

@@ -0,0 +1,2 @@
+#!/usr/bin/env bash
+bin/cli php console.php app:cache:warm-twig

bin/composer

@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
-[ -z "$1" ] && echo "Please specify a Composer command (ex. install)" && exit
+[ -z "$1" ] && bin/cli composer list && exit
 bin/cli composer "$@"

package.json

@@ -1,20 +0,0 @@
-{
-  "name": "ryobi-crawler",
-  "version": "1.0.0",
-  "description": "## Project start",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "npx @tailwindcss/cli -i ./templates/input/style.css -o ./templates/output/style.css --watch"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://git.techtube.pl/krzysiej/ryobi-crawler.git"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@tailwindcss/cli": "^4.1.7",
-    "tailwindcss": "^4.1.7"
-  }
-}

src/Command/CacheWarmCommand.php

@@ -16,7 +16,7 @@ use Symfony\Component\Console\Output\OutputInterface;
 use Symfony\Component\HttpFoundation\RequestStack;
 use Twig\Environment;
 
-#[AsCommand(name: 'app:cache:warm-twig', description: '')]
+#[AsCommand(name: 'app:cache:warm-twig', description: 'Warmup twig cache')]
 class CacheWarmCommand extends Command
 {
     public function __construct(

src/Command/ScrapeWebsite.php

@@ -21,15 +21,13 @@ class ScrapeWebsite extends Command
 {
     private Client $client;
 
+    public function __construct(protected Capsule $database)
+    {
+        parent::__construct();
+    }
+
     protected function configure(): void
     {
-        $capsule = new Capsule;
-        $capsule->addConnection([
-            'driver' => 'sqlite',
-            'database' => __DIR__ . '/../../database.sqlite',
-        ]);
-        $capsule->setAsGlobal();
-        $capsule->bootEloquent();
         $this->client = new Client();
     }
 

src/Controller/BaseController.php

@@ -11,11 +11,7 @@ class BaseController extends AbstractController
 {
     protected Environment $twig;
 
-    public function __construct(protected FilesystemAdapter $cache)
+    public function __construct(protected FilesystemAdapter $cache, protected Capsule $database)
     {
-        $capsule = new Capsule;
-        $capsule->addConnection(['driver' => 'sqlite', 'database' => __DIR__ . '/../../database.sqlite']);
-        $capsule->setAsGlobal();
-        $capsule->bootEloquent();
     }
 }

src/Controller/SearchController.php

@@ -17,6 +17,6 @@ final class SearchController extends BaseController
             ->orWhere([['name', 'like', "%$search%"]])
             ->orWhere([['subTitle', 'like', "%$search%"]])->get();
 
-        return $this->render('productList.html.twig', ['products' => $products ?? [], 'search' => $search]);
+        return $this->render('productList.html.twig', ['products' => $products ?? [], 'search' => $search, 'listType' => 'search_'.$search]);
     }
 }

src/DatabaseFactory.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace Krzysiej\RyobiCrawler;
+
+use Illuminate\Database\Capsule\Manager as Capsule;
+class DatabaseFactory
+{
+    public static function create(Capsule $capsule): void
+    {
+        $capsule->addConnection(['driver' => 'sqlite', 'database' => __DIR__ . '/../database.sqlite']);
+        $capsule->setAsGlobal();
+        $capsule->bootEloquent();
+    }
+}

src/Kernel.php

@@ -2,6 +2,7 @@
 
 namespace Krzysiej\RyobiCrawler;
 
+use Illuminate\Database\Capsule\Manager;
 use Krzysiej\RyobiCrawler\Twig\AppExtension;
 use Symfony\Bundle\FrameworkBundle\FrameworkBundle;
 use Symfony\Bundle\FrameworkBundle\Kernel\MicroKernelTrait;
@@ -34,8 +35,9 @@ class Kernel extends BaseKernel
             'secret' => 'S0ME_SECRET'
         ]);
         $services = $container->services()->defaults()->autowire()->autoconfigure();
+        $services->set(Manager::class)->configurator([DatabaseFactory::class, 'create']);
         $services->load('Krzysiej\\RyobiCrawler\\', __DIR__ )
-            ->exclude('../src/{Models,Twig,Kernel.php}');
+            ->exclude('../src/{Models,Twig,DatabaseFactory.php,Kernel.php}');
         $services->set('twig.extension.cache', AppExtension::class)->tag('twig.extension');
         $services->set(CacheExtension::class)->tag('twig.extension');
         $services->set(FilesystemAdapter::class)->args([

templates/input/style.css

@@ -1 +0,0 @@
-@import "tailwindcss";

templates/output/style.css

@@ -1,340 +0,0 @@
-/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */
-@layer properties;
-@layer theme, base, components, utilities;
-@layer theme {
-  :root, :host {
-    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
-    --spacing: 0.25rem;
-    --text-3xl: 1.875rem;
-    --text-3xl--line-height: calc(2.25 / 1.875);
-    --font-weight-bold: 700;
-    --default-font-family: var(--font-sans);
-    --default-mono-font-family: var(--font-mono);
-  }
-}
-@layer base {
-  *, ::after, ::before, ::backdrop, ::file-selector-button {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    border: 0 solid;
-  }
-  html, :host {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
-    font-feature-settings: var(--default-font-feature-settings, normal);
-    font-variation-settings: var(--default-font-variation-settings, normal);
-    -webkit-tap-highlight-color: transparent;
-  }
-  hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-  }
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-  h1, h2, h3, h4, h5, h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-  a {
-    color: inherit;
-    -webkit-text-decoration: inherit;
-    text-decoration: inherit;
-  }
-  b, strong {
-    font-weight: bolder;
-  }
-  code, kbd, samp, pre {
-    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
-    font-feature-settings: var(--default-mono-font-feature-settings, normal);
-    font-variation-settings: var(--default-mono-font-variation-settings, normal);
-    font-size: 1em;
-  }
-  small {
-    font-size: 80%;
-  }
-  sub, sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-  :-moz-focusring {
-    outline: auto;
-  }
-  progress {
-    vertical-align: baseline;
-  }
-  summary {
-    display: list-item;
-  }
-  ol, ul, menu {
-    list-style: none;
-  }
-  img, svg, video, canvas, audio, iframe, embed, object {
-    display: block;
-    vertical-align: middle;
-  }
-  img, video {
-    max-width: 100%;
-    height: auto;
-  }
-  button, input, select, optgroup, textarea, ::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    border-radius: 0;
-    background-color: transparent;
-    opacity: 1;
-  }
-  :where(select:is([multiple], [size])) optgroup {
-    font-weight: bolder;
-  }
-  :where(select:is([multiple], [size])) optgroup option {
-    padding-inline-start: 20px;
-  }
-  ::file-selector-button {
-    margin-inline-end: 4px;
-  }
-  ::placeholder {
-    opacity: 1;
-  }
-  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
-    ::placeholder {
-      color: currentcolor;
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-  }
-  textarea {
-    resize: vertical;
-  }
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  ::-webkit-date-and-time-value {
-    min-height: 1lh;
-    text-align: inherit;
-  }
-  ::-webkit-datetime-edit {
-    display: inline-flex;
-  }
-  ::-webkit-datetime-edit-fields-wrapper {
-    padding: 0;
-  }
-  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
-    padding-block: 0;
-  }
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
-    appearance: button;
-  }
-  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [hidden]:where(:not([hidden="until-found"])) {
-    display: none !important;
-  }
-}
-@layer utilities {
-  .collapse {
-    visibility: collapse;
-  }
-  .container {
-    width: 100%;
-    @media (width >= 40rem) {
-      max-width: 40rem;
-    }
-    @media (width >= 48rem) {
-      max-width: 48rem;
-    }
-    @media (width >= 64rem) {
-      max-width: 64rem;
-    }
-    @media (width >= 80rem) {
-      max-width: 80rem;
-    }
-    @media (width >= 96rem) {
-      max-width: 96rem;
-    }
-  }
-  .me-2 {
-    margin-inline-end: calc(var(--spacing) * 2);
-  }
-  .me-auto {
-    margin-inline-end: auto;
-  }
-  .mb-0 {
-    margin-bottom: calc(var(--spacing) * 0);
-  }
-  .mb-2 {
-    margin-bottom: calc(var(--spacing) * 2);
-  }
-  .block {
-    display: block;
-  }
-  .grid {
-    display: grid;
-  }
-  .table {
-    display: table;
-  }
-  .flex-row {
-    flex-direction: row;
-  }
-  .rounded {
-    border-radius: 0.25rem;
-  }
-  .border {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-  }
-  .border-1 {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-  }
-  .p-1 {
-    padding: calc(var(--spacing) * 1);
-  }
-  .text-end {
-    text-align: end;
-  }
-  .align-middle {
-    vertical-align: middle;
-  }
-  .text-3xl {
-    font-size: var(--text-3xl);
-    line-height: var(--tw-leading, var(--text-3xl--line-height));
-  }
-  .font-bold {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .underline {
-    text-decoration-line: underline;
-  }
-  .shadow-sm {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-font-weight: initial;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-    }
-  }
-}

templates/productList.html.twig

@@ -3,21 +3,22 @@
 {% block content %}
 {% cache 'list_' ~ listType %}
 <div class="table-responsive">
-    <table class='table table-hover'>
+{#    <table class='table table-hover'>#}
-        <thead>
+{#        <thead>#}
-        <tr>
+{#        <tr>#}
-            <th></th>
+{#            <th></th>#}
-            <th></th>
+{#            <th></th>#}
-            <th>Name</th>
+{#            <th>Name</th>#}
-            <th>Categories</th>
+{#            <th>Categories</th>#}
-            <th></th>
+{#            <th></th>#}
-            <th class="text-end">Lowest Price</th>
+{#            <th class="text-end">Lowest Price</th>#}
-            <th class="text-end">Current Price</th>
+{#            <th class="text-end">Current Price</th>#}
-            <th></th>
+{#            <th></th>#}
-        </tr>
+{#        </tr>#}
-        </thead>
+{#        </thead>#}
         {% for product in products %}
-            <tr>
+            <div class="d-inline-flex">
+
                 <td class="align-middle font-weight-bold h3"><a class="text-warning text-decoration-none"
                                                                 href="{{ path('app_star', {'productId': product.id}) }}">{% if product.starred == true %}★{% else %} ☆ {% endif %}</a></td>
                 <td class="align-middle" style="width: 120px;"><img src='{{ product.image }}&width=70' class='img-thumbnail' alt='{{ product.name }}'/></td>
@@ -38,7 +39,7 @@
                 </td>
                 <td class="align-middle">
                     <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';" >
-                        <ol class="breadcrumb">
+                        <ol class="breadcrumb mb-0">
                             {% for category in product.categories %}
                                 <li class="breadcrumb-item" aria-current="page"><a class="breadcrumb-item text-decoration-none"  href="{{ path('app_category', {'category': category}) }}">{{ category }}</a></li>
                             {%  endfor %}
@@ -51,14 +52,14 @@
                 <td class="align-middle">
                     <div class="d-flex flex-row">
                         {% if product.price.last.price != product.price.last.productStandardPrice %}<span
-                                class="badge text-bg-warning text-decoration-line-through flex-fill">{{ product.price.last.productStandardPrice | format_currency('PLN', {}, 'pl') }}</span>&nbsp;<span
+                                class="badge text-bg-warning text-decoration-line-through flex-fill">{{ product.price.last.productStandardPrice | format_currency('PLN', {}, 'pl') }}</span> <span
                                 class="badge text-bg-success flex-fill">{{ ((1 - product.price.last.price / product.price.last.productStandardPrice)*100)|number_format(0) }}%</span>
                         {% endif %}
                     </div>
                 </td>
-            </tr>
+            </div>
         {% endfor %}
-    </table>
+{#    </table>#}
 </div>
 {% endcache %}
 {% endblock %}

templates/template.html.twig

@@ -5,11 +5,10 @@
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Ryobi crawler</title>
-    <link href="/templates/output/style.css" rel="stylesheet" />
+    <link href="/templates/css/bootstrap.min.css" rel="stylesheet" />
     <script src="/templates/js/script.js" defer></script>
 </head>
 <body>
-<h1 class="text-3xl font-bold underline">test header</h1>
 <nav class="navbar navbar-expand-lg sticky-top bg-body-tertiary border-bottom border-secondary border-1">
     <div class="container-fluid">
         <a class="navbar-brand" href="{{ path('app_home') }}">Crawler</a>