icons

Wonky.Client/Components/AdvisorActivityTableComponent.razor

@@ -27,10 +27,10 @@
             <th scope="col">Note</th>
             <th class="text-end" scope="col">sas</th>
             <th class="text-end" scope="col">Beløb</th>
-            <th class="text-center" scope="col"><i class="oi oi-phone"></i></th>
+            <th class="text-center" scope="col"><i class="bi-phone"></i></th>
-            <th class="text-center" scope="col"><i class="oi oi-flash"></i></th>
+            <th class="text-center" scope="col"><i class="bi-lightning"></i></th>
-            <th class="text-center" scope="col"><i class="oi oi-calculator"></i></th>
+            <th class="text-center" scope="col"><i class="bi-calculator"></i></th>
-            <th class="text-center" scope="col"><i class="bi bi-box"></i></th>
+            <th class="text-center" scope="col"><i class="bi-truck"></i></th>
         </tr>
         </thead>
         <tbody>
@@ -46,15 +46,15 @@
                 <td class="align-middle text-end">@(activity.StatusTypeEnum == "Quote" ? $"{0:N2}" : $"{activity.OrderAmount:N2}")</td>
                 <td class="align-middle text-center">
                     @if (activity.OurRef.Contains("T:"))
-                    {<i class="oi oi-phone"></i>}
+                    {<i class="bi-phone"></i>}
                 </td>
                 <td class="align-middle text-center">
                     @if (activity.Express)
-                    {<i class="oi oi-flash"></i>}
+                    {<i class="bi-lightning"></i>}
                 </td>
                 <td class="align-middle text-end">
                     @if (activity.StatusTypeEnum == "Quote")
-                    {<i class="oi oi-calculator"></i>}
+                    {<i class="bi-calculator"></i>}
                 </td>
                 <td class="align-middle state">
                     @if (activity.Lines.Any())

Wonky.Client/Components/ColorCoding.razor

@@ -1,61 +0,0 @@
-@*
-//    Copyright (C) 2022 FCS Frede's Computer Services.
-//    This program is free software: you can redistribute it and/or modify
-//    it under the terms of the GNU Affero General Public License as
-//    published by the Free Software Foundation, either version 3 of the
-//    License, or (at your option) any later version.
-//
-//    This program is distributed in the hope that it will be useful,
-//    but WITHOUT ANY WARRANTY; without even the implied warranty of
-//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-//    GNU Affero General Public License for more details.
-//
-//    You should have received a copy of the GNU Affero General Public License
-//    along with this program.  If not, see [https://www.gnu.org/licenses/agpl-3.0.en.html]
-//
-*@
-
-<table class="table">
-    <thead>
-    <tr>
-        <th scope="colgroup" colspan="2">Besøg status</th>
-        <th scope="colgroup" colspan="2">Pakning/Forsendelse</th>
-    </tr>
-    </thead>
-    <tr>
-        <td><img class="state the-good rounded-circle me-1" src="state.png" alt="state"/></td>
-        <td>Er nylig besøgt</td>
-        <td><img class="state the-ugly rounded-circle me-1" src="state.png" alt="state"/></td>
-        <td>Ubehandlet</td>
-    </tr>
-    <tr>
-        <td><img class="state the-bad rounded-circle me-1" src="state.png" alt="state"/></td>
-        <td>Planlagt</td>
-        <td><img class="state the-bad rounded-circle me-1" src="state.png" alt="state"/></td>
-        <td>Varer er plukket</td>
-    </tr>
-    <tr>
-        <td><img class="state the-ugly rounded-circle me-1" src="state.png" alt="state"/></td>
-        <td>Interval Overskredet</td>
-        <td><img class="state the-good rounded-circle me-1" src="state.png" alt="state"/></td>
-        <td>Ordre er pakket</td>
-    </tr>
-    <tr>
-        <td><img class="state the-draw rounded-circle me-1" src="state.png" alt="state"/></td>
-        <td>Ajourfør besøgsdato/interval</td>
-        <td><img class="state the-draw rounded-circle me-1" src="state.png" alt="state"/></td>
-        <td>Pakken er afsendt</td>
-    </tr>
-    <tr>
-        <td><img class="state the-dead rounded-circle me-1" src="state.png" alt="state"/></td>
-        <td>Virksomhed ophørt</td>
-        <td></td>
-        <td></td>
-    </tr>
-    <tr>
-        <td><img class="state no-vat rounded-circle me-1" src="state.png" alt="state"/></td>
-        <td>CVR/ORG nummer ugyldig</td>
-        <td></td>
-        <td></td>
-    </tr>
-</table>

Wonky.Client/Components/ColorCodingComponent.razor

@@ -0,0 +1,104 @@
+@*
+//    Copyright (C) 2022 FCS Frede's Computer Services.
+//    This program is free software: you can redistribute it and/or modify
+//    it under the terms of the GNU Affero General Public License as
+//    published by the Free Software Foundation, either version 3 of the
+//    License, or (at your option) any later version.
+//
+//    This program is distributed in the hope that it will be useful,
+//    but WITHOUT ANY WARRANTY; without even the implied warranty of
+//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//    GNU Affero General Public License for more details.
+//
+//    You should have received a copy of the GNU Affero General Public License
+//    along with this program.  If not, see [https://www.gnu.org/licenses/agpl-3.0.en.html]
+//
+*@
+@using Wonky.Client.Components
+
+<table class="table">
+    <thead>
+    <tr>
+        <th scope="colgroup" colspan="2">Kunde / Besøg Status</th>
+        <th scope="colgroup" colspan="2">Pakning / Forsendelse</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td class="align-middle">
+            <div class="color-code">
+                <DisplayStateComponent StateClass="the-good"/>
+            </div>
+        </td>
+        <td class="align-middle">Er nylig besøgt</td>
+        <td class="align-middle">
+            <div class="color-code">
+                <DisplayStateComponent StateClass="the-good"/>
+            </div>
+        </td>
+        <td class="align-middle">Ubehandlet</td>
+    </tr>
+    <tr>
+        <td class="align-middle">
+            <div class="color-code">
+                <DisplayStateComponent StateClass="the-bad"/>
+            </div>
+        </td>
+        <td class="align-middle">Planlæg</td>
+        <td class="align-middle">
+            <div class="color-code">
+                <DisplayStateComponent StateClass="the-bad"/>
+            </div>
+        </td>
+        <td class="align-middle">Varer er plukket</td>
+    </tr>
+    <tr>
+        <td class="align-middle">
+            <div class="color-code">
+                <DisplayStateComponent StateClass="the-ugly"/>
+            </div>
+        </td>
+        <td class="align-middle">Interval Overskredet</td>
+        <td class="align-middle">
+            <div class="color-code">
+                <DisplayStateComponent StateClass="the-ugly"/>
+            </div>
+        </td>
+        <td class="align-middle">Varer er pakket</td>
+    </tr>
+    <tr>
+        <td class="align-middle">
+            <div class="color-code">
+                <DisplayStateComponent StateClass="the-draw"/>
+            </div>
+        </td>
+        <td class="align-middle">Ajourfør besøgsdato/interval</td>
+        <td class="align-middle">
+            <div class="color-code">
+                <DisplayStateComponent StateClass="the-dead"/>
+            </div>
+        </td>
+        <td class="align-middle">Varer er afsendt</td>
+    </tr>
+    <tr>
+        <td class="align-middle">
+            <div class="color-code">
+                <DisplayStateComponent StateClass="the-dead"/>
+            </div>
+        </td>
+        <td class="align-middle">Virksomhed ophørt</td>
+        <td></td>
+        <td></td>
+    </tr>
+    <tr>
+        <td class="align-middle">
+            <div class="color-code">
+                <DisplayStateComponent StateClass="no-vat"/>
+            </div>
+        </td>
+        <td class="align-middle">CVR/ORG nummer ugyldig</td>
+        <td></td>
+        <td></td>
+    </tr>
+    </tbody>
+</table>

Wonky.Client/Components/DisplayStateComponent.razor.css

@@ -0,0 +1,26 @@
+/* begin state elements */
+.state {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    min-height: 16px;
+}
+.the-good {
+    background-color: green;
+}
+.the-bad {
+    background-color: orange;
+}
+.the-ugly {
+    background-color: #ff0000;
+}
+.the-draw {
+    background-color: #9b02fc;
+}
+.no-vat {
+    background-color: red;
+}
+.the-dead {
+    background-color: #0dcaf0;
+}
+/* end state elements */

Wonky.Client/Components/OfficeActivityTableComponent.razor.cs

@@ -27,11 +27,11 @@ public partial class OfficeActivityTableComponent
     {
         return processStatus.ToLower() switch
         {
-            "none" => "the-ugly-fg",
+            "none" => "the-good-fg",
             "picked" => "the-bad-fg",
-            "packed" => "the-good-fg",
+            "packed" => "the-ugly-fg",
-            "shipped" => "the-draw-fg",
+            "shipped" => "the-dead-fg",
-            _ => "the-dead"
+            _ => "the-draw"
         };
     }
 

Wonky.Client/Components/ProcessStateComponent.razor

@@ -15,7 +15,7 @@
 //
 *@
 
-<i class="bi bi-@_icon @StateClass"></i>
+<i class="bi-@_icon @StateClass"></i>
 
 @code{
     [Parameter] public string StateClass { get; set; } = "";
@@ -25,10 +25,10 @@
     {
         _icon = StateClass switch
         {
-            "the-ugly-fg" => "file-earmark",
+            "the-good-fg" => "file-earmark",
             "the-bad-fg" => "file-earmark-check",
-            "the-good-fg" => "box2-fill",
+            "the-ugly-fg" => "box2-fill",
-            "the-draw-fg" => "truck",
+            "the-dead-fg" => "truck",
             _ => "question-square"
             };
     }

Wonky.Client/Components/WarehouseListComponent.razor

@@ -19,13 +19,13 @@
     <div class="col-md-4">
         <div class="btn-group" role="group" aria-label="Ordre status">
             <input type="radio" class="btn-check" name="btn-order" id="btn-order1" autocomplete="off" checked @onchange="@GetOrderStatusNone" />
-            <label class="btn btn-outline-danger" for="btn-order1">Ubehandlet</label>
+            <label class="btn btn-outline-success" for="btn-order1">Ubehandlet</label>
 
             <input type="radio" class="btn-check" name="btn-order" id="btn-order2" autocomplete="off" @onchange="@GetOrderStatusPicked"/>
             <label class="btn btn-outline-warning" for="btn-order2">Plukket</label>
 
             <input type="radio" class="btn-check" name="btn-order" id="btn-order3" autocomplete="off" @onchange="@GetOrderStatusPacked" />
-            <label class="btn btn-outline-success" for="btn-order3">Pakket</label>
+            <label class="btn btn-outline-danger" for="btn-order3">Pakket</label>
             
             <input type="radio" class="btn-check" name="btn-order" id="btn-order4" autocomplete="off" @onchange="@GetOrderStatusShipped" />
             <label class="btn btn-outline-info" for="btn-order4">Afsendt</label>

Wonky.Client/Pages/InfoPage.razor

@@ -33,7 +33,7 @@
 <div class="row mb-2">
     <div class="col">
         <h2 class="text-center">Piktogrammer</h2>
-        <ColorCoding></ColorCoding>
+        <ColorCodingComponent></ColorCodingComponent>
     </div>
 </div>
 <div class="row mb-2">

Wonky.Client/wwwroot/css/app-v0.22.0.css

@@ -12,36 +12,6 @@ body {
 .workDate {
     font-variant: small-caps;
 }
-/* begin state elements */
-.state {
-    width: 16px;
-    height: 16px;
-    min-width: 16px;
-    min-height: 16px;
-}
-.text-inno {
-    color: #ffaa00;
-}
-.the-good {
-    background-color: green;
-}
-.the-bad {
-    background-color: orange;
-}
-.the-ugly {
-    background-color: #ff0000;
-}
-.the-draw {
-    background-color: #9b02fc;
-}
-.no-vat {
-    background-color: yellow;
-}
-.the-dead {
-    background-color: black;
-}
-
-/* end state elements */
 
 .btn.btn-edit {
     color: #030303;
@@ -66,6 +36,10 @@ a, .btn-link {
     border-color: #1861ac;
 }
 
+.text-inno {
+    color: #ffaa00;
+}
+
 .content {
     padding-top: 1.1rem;
 }

Wonky.Client/wwwroot/index.html

@@ -18,7 +18,7 @@
     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
     <link href="bootstrap/css/bootstrap-icons.css" rel="stylesheet" />
     <link href="flag-icons/flag-icons.css" rel="stylesheet" />
-    <link href="css/app-v0.20.0.css" rel="stylesheet" />
+    <link href="css/app-v0.22.0.css" rel="stylesheet" />
     <link href="Wonky.Client.styles.css" rel="stylesheet" />
     <link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />
 </head>