|
1 | 1 | import { Head } from '@inertiajs/react'; |
2 | 2 |
|
3 | | -export default function Welcome({ settings }) { |
| 3 | +export default function Welcome({ userFilaments, machines, filamentTypes, colors }) { |
4 | 4 | return ( |
5 | 5 | <> |
6 | 6 | <Head title="Welcome" /> |
7 | 7 | <div className="flex min-h-screen flex-col items-center bg-[#EDEDFC] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]"> |
8 | 8 | <div className="flex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0"> |
9 | 9 | <main className="flex w-full flex-col-reverse lg:max-w-4xl lg:flex-row"> |
10 | | - <table className="w-full border-collapse border border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800"> |
11 | | - <thead> |
12 | | - <tr> |
13 | | - <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
14 | | - Printer |
15 | | - </th> |
16 | | - <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
17 | | - Filament |
18 | | - </th> |
19 | | - <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
20 | | - Color |
21 | | - </th> |
22 | | - <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
23 | | - Pressure Advance |
24 | | - </th> |
25 | | - <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
26 | | - Flow Ratio |
27 | | - </th> |
28 | | - <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
29 | | - Max Volumetric Speed |
30 | | - </th> |
31 | | - <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
32 | | - Nozzle Temperature |
33 | | - </th> |
34 | | - </tr> |
35 | | - </thead> |
36 | | - <tbody> |
37 | | - { settings.map((setting) => ( |
38 | | - <tr key={ setting.id }> |
39 | | - <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
40 | | - { setting.machine.vendor.title } |
41 | | - { setting.machine.title } |
42 | | - </td> |
43 | | - <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
44 | | - { setting.filament.vendor.title } |
45 | | - { setting.filament.type.title }<br /> |
46 | | - </td> |
47 | | - <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
48 | | - { setting.color.title } |
49 | | - </td> |
50 | | - <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
51 | | - { setting.pressure_advance } |
52 | | - </td> |
53 | | - <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
54 | | - { setting.filament_flow_ratio } |
55 | | - </td> |
56 | | - <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
57 | | - { setting.filament_max_volumetric_speed } |
58 | | - </td> |
59 | | - <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
60 | | - { setting.nozzle_temperature } |
61 | | - </td> |
62 | | - </tr> |
63 | | - )) } |
64 | | - </tbody> |
65 | | - </table> |
| 10 | + <div className="w-full"> |
| 11 | + <table className="w-full border-collapse border border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800 mb-4"> |
| 12 | + <thead> |
| 13 | + <tr> |
| 14 | + <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">Printer</th> |
| 15 | + <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">Filament</th> |
| 16 | + <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">Color</th> |
| 17 | + </tr> |
| 18 | + </thead> |
| 19 | + <tbody> |
| 20 | + <tr> |
| 21 | + <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 22 | + <select name="machines" id="machine" className="w-full"> |
| 23 | + <option value="0">- All -</option> |
| 24 | + |
| 25 | + { machines.map((item) => ( |
| 26 | + <option value={ item.id }>{ item.vendor.title } { item.title }</option> |
| 27 | + )) } |
| 28 | + </select> |
| 29 | + </td> |
| 30 | + |
| 31 | + <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 32 | + <select name="machines" id="machine" className="w-full"> |
| 33 | + <option value="0">- All -</option> |
| 34 | + |
| 35 | + { filamentTypes.map((item) => ( |
| 36 | + <option value={ item.id }>{ item.title }</option> |
| 37 | + )) } |
| 38 | + </select> |
| 39 | + </td> |
| 40 | + |
| 41 | + <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 42 | + <select name="machines" id="machine" className="w-full"> |
| 43 | + <option value="0">- All -</option> |
| 44 | + |
| 45 | + { colors.map((item) => ( |
| 46 | + <option value={ item.id }>{ item.title }</option> |
| 47 | + )) } |
| 48 | + </select> |
| 49 | + </td> |
| 50 | + </tr> |
| 51 | + </tbody> |
| 52 | + </table> |
| 53 | + |
| 54 | + <table className="border-collapse border border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800"> |
| 55 | + <thead> |
| 56 | + <tr> |
| 57 | + <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 58 | + Printer |
| 59 | + </th> |
| 60 | + <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 61 | + Filament |
| 62 | + </th> |
| 63 | + <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 64 | + Color |
| 65 | + </th> |
| 66 | + <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 67 | + Pressure Advance |
| 68 | + </th> |
| 69 | + <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 70 | + Flow Ratio |
| 71 | + </th> |
| 72 | + <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 73 | + Max Volumetric Speed |
| 74 | + </th> |
| 75 | + <th className="border border-gray-300 p-3 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 76 | + Nozzle Temperature |
| 77 | + </th> |
| 78 | + </tr> |
| 79 | + </thead> |
| 80 | + <tbody> |
| 81 | + { userFilaments.map((item) => ( |
| 82 | + <tr key={ item.id }> |
| 83 | + <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 84 | + { item.machine.vendor.title } |
| 85 | + { item.machine.title } |
| 86 | + </td> |
| 87 | + <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 88 | + { item.filament.vendor.title } |
| 89 | + { item.filament.type.title }<br /> |
| 90 | + </td> |
| 91 | + <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 92 | + { item.color.title } |
| 93 | + </td> |
| 94 | + <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 95 | + { item.pressure_advance } |
| 96 | + </td> |
| 97 | + <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 98 | + { item.filament_flow_ratio } |
| 99 | + </td> |
| 100 | + <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 101 | + { item.filament_max_volumetric_speed } |
| 102 | + </td> |
| 103 | + <td className="border border-gray-300 p-3 text-left text-gray-900 dark:border-gray-600 dark:text-gray-200"> |
| 104 | + { item.nozzle_temperature } |
| 105 | + </td> |
| 106 | + </tr> |
| 107 | + )) } |
| 108 | + </tbody> |
| 109 | + </table> |
| 110 | + </div> |
66 | 111 | </main> |
67 | 112 | </div> |
68 | 113 | </div> |
|
0 commit comments