RFDSort/test.html at main · michaelsboost/RFDSort · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html lang="en" data-theme="dark">
  <head>
    <title>RFDSort – Rockford UPS Air Hub Sorting Guide</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, interactive-widget=resizes-content">
    <meta name="description" content="RFDSort is a quick visual lookup tool for the Rockford UPS Air Hub (6119N). Find the correct chute, belt, and destination by ZIP code or state to reduce missorts and speed up training.">
    <meta name="author" content="Michael Schwartz">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="RFDSort – Rockford UPS Air Hub Sorting Guide">
    <meta name="theme-color" content="#13171f">
    <meta name="apple-mobile-web-app-title" content="RFDSort – Rockford UPS Air Hub Sorting Guide">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="msapplication-starturl" content="./index.html">
    <meta name="msapplication-navbutton-color" content="#13171f">
    <meta property="og:url" content="https://michaelsboost.com/RFDSort" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="RFDSort – Rockford UPS Air Hub Sorting Guide" />
    <meta property="og:description" content="RFDSort is a quick visual lookup tool for the Rockford UPS Air Hub (6119N). Find the correct chute, belt, and destination by ZIP code or state to reduce missorts and speed up training." />
    <link rel="shortcut icon" type="image/x-icon" href="imgs/logo.svg">
    <link rel="icon" type="image/svg+xml" href="imgs/logo.svg" />
    <link rel="apple-touch-icon" href="imgs/logo.svg">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/picocss/2.0.6/pico.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js" defer></script>

    <link rel="stylesheet" href="src/bundle.css">
  </head>
  <body>

<div class="absolute inset-0" x-data="App()">
  <div class="flex absolute inset-0">
    <!-- Sidebar (Belts) -->
    <aside class="p-2 w-36 text-white grid grid-cols-2 gap-2 overflow-y-auto">
      <template x-for="belt in belts" :key="belt.chute">
        <button @click="showBelt(belt.chute)" :title="belt.chute" :class="[
            'flex items-center border-0 justify-center rounded outline-none cursor-pointer',
            isHighlighted(belt.chute) ? 'ring-4 ring-white' : '',
            belt.color
          ]">
          <span class="text-[10px] font-bold" x-text="belt.short"></span>
        </button>
      </template>
    </aside>

    <!-- Main Panel -->
    <main class="flex-1 p-4 overflow-y-auto">
      <div class="flex flex-col justify-between h-full">

        <!-- Top bar -->
        <header class="flex items-center mb-3">
          <div class="w-auto">
            <a x-show="selectedState" class="my-3 text-lg font-thin no-underline cursor-pointer text-current" @click="clear" target="_blank" x-text="selectedState"></a>
            <a x-show="selectedBelt" class="my-3 text-lg font-thin no-underline cursor-pointer text-current" @click="clear" target="_blank" x-text="selectedBelt"></a>

            <a x-show="!selectedState &amp;&amp; !selectedBelt" class="my-3 text-lg font-thin no-underline cursor-pointer text-current" @click="openMenu=true" target="_blank">
              <img alt="logo" class="h-8 mx-3 rounded-full" :src="logo" loading="lazy">
              <span class="text-lg font-thin" x-text="name"></span>
            </a>
          </div>

          <div class="ml-auto flex items-center gap-2">
            <button @click="openMenu=true" class="px-3 py-1 rounded bg-transparent border-0" style="color:unset;">
              <svg class="p-1 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <g fill="none" stroke="currentColor" stroke-dasharray="16" stroke-dashoffset="16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                  <path d="M5 5h14">
                    <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="16;0"></animate>
                  </path>
                  <path d="M5 12h14">
                    <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="16;0"></animate>
                  </path>
                  <path d="M5 19h14">
                    <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.4s" dur="0.2s" values="16;0"></animate>
                  </path>
                </g>
              </svg>
            </button>
          </div>
        </header>

        <!-- State picker -->
        <article x-show="!selectedState &amp;&amp; !selectedBelt">
          <h2 class="text-base font-thin mb-2">Select a State</h2>
          <div class="grid grid-cols-1 sm:grid-cols-4 gap-2 mb-4">
            <template x-for="s in states" :key="s">
              <button @click="showState(s)">
                <span x-text="s"></span>
              </button>
            </template>
          </div>
        </article>

        <!-- STATE → BELTS result -->
        <div x-show="selectedState">
          <div class="grid gap-4 grid-cols-2">
            <template x-for="(match, i) in matches" :key="match._key">
              <article class="mb-2 p-3 w-full" :class="{ 'col-span-2': matches.length % 2 === 1 &amp;&amp; i === matches.length - 1 }">
                <div class="mb-1">
                  <strong>Chute(s):</strong>
                  <template x-for="c in asArray(match.chute)" :key="match._key + '::' + c">
                    <kbd class="inline-block px-2 py-0.5 mr-1 mb-1 rounded border" x-text="c"></kbd>
                  </template>
                </div>
                <div><strong>Dest (Slick):</strong> <span x-text="match.dest || '—'"></span></div>
                <div><strong>ZIPs:</strong> <span x-text="match.zips.join(', ')"></span></div>
                <div><strong>Pull:</strong> <span x-text="match.pull || '—'"></span></div>
                <div><strong>Wave:</strong> <span x-text="match.wave || '—'"></span></div>
              </article>
            </template>
          </div>

          <div class="mt-2">
            <button @click="clear" class="block w-full">Back</button>
          </div>
        </div>

        <!-- BELT → STATES result -->
        <div x-show="selectedBelt">
          <div class="grid gap-4 grid-cols-2">
            <template x-for="(m, i) in beltMatches" :key="m._key ?? i">
              <article class="mb-2 p-3 w-full" :class="{ 'col-span-2': beltMatches.length % 2 === 1 &amp;&amp; i === beltMatches.length - 1 }">
                <div><strong>State:</strong> <span x-text="m.state"></span></div>
                <div><strong>Dest (Slick):</strong> <span x-text="m.dest || '—'"></span></div>
                <div><strong>ZIPs:</strong> <span x-text="m.zips.join(', ')"></span></div>
                <div><strong>Pull:</strong> <span x-text="m.pull || '—'"></span></div>
                <div><strong>Wave:</strong> <span x-text="m.wave || '—'"></span></div>
              </article>
            </template>
          </div>

          <div class="mt-2">
            <button @click="clear" class="block w-full">Back</button>
          </div>
        </div>

        <!-- Footer disclaimer -->
        <footer class="p-4 text-center text-sm text-gray-600">
          ⚠️ Not UPS official. Use only when stopped — never while driving or on equipment.
        </footer>
      </div>
    </main>
  </div>

  <dialog x-bind:open="openMenu" x-transition.opacity="">
    <article class="rounded-md">
      <header class="flex justify-between items-center">
        <h1 class="text-lg font-thin m-0 capitalize">
          file menu
        </h1>
        <button class="text-xs w-auto px-3 py-2 m-0 capitalize rounded-md bg-transparent border-0" style="color: unset;" aria-label="Close" @click="openMenu=false">
          <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
  </svg>
        </button>
      </header>
      <main>
        <ul class="py-4 px-0 font-thin">
          <li class="list-none">
            <div class="items-center text-center">
              <div>
                <a aria-label="project homepage" name="project homepage" target="_blank" :href="url">
                  <img alt="logo" class="my-4 w-24 m-auto rounded-full" :src="logo" loading="lazy">
                </a>
                <div class="text-2xl">
                  About <span x-text="name"></span>
                </div>
                <div class="my-2 text-xs" x-text="version"></div>
                <a target="_blank" class="text-sm underline mb-2 text-blue-500" :href="license">
                    Open Source License
                </a>
              </div>
            </div>
          </li>
          <li class="p-0 list-none">
            <hr>
          </li>
          <li class="p-0 list-none">
            <nav class="flex justify-between mt-5 items-center">
              <label for="theme" class="mb-2 flex justify-between items-center cursor-pointer">
                Dark:
              </label>

              <input id="theme" class="m-0" type="checkbox" role="switch" name="toggle dark mode" @change="toggleTheme()">
            </nav>
          </li>
          <li class="p-0 list-none">
            <hr>
          </li>
          <li class="p-0 list-none">
            <nav class="flex justify-between mt-5 items-center">
              <strong>Shift:</strong>

              <!-- Shift selector -->
              <div class="ml-auto flex items-center gap-2">
                <select id="shift" class="px-3 py-1 m-0 text-sm" x-model="shift" @change="applyShift()">
                  <template x-for="s in shiftOrder" :key="s">
                    <option :value="s" :selected="shift === s" x-text="labelForShift(s)"></option>
                  </template>
                </select>
              </div>
            </nav>
          </li>
          <li class="p-0 list-none">
            <hr>
          </li>
          <li class="p-0 list-none">
            <nav class="flex justify-between mt-5 items-center">
              <strong class="mb-2">Share:</strong>
              <div class="text-sm">
                <div class="w-full bg-white p-2 rounded">
                  <img src="imgs/qrcode.png" alt="Share RFDSort">
                </div>
              </div>
            </nav>
          </li>
          <li class="p-0 list-none">
            <hr>
          </li>
          <li class="list-none">
            <strong class="mb-2">Developer:</strong>
            <blockquote class="pt-4 text-sm text-center">
                📦 Made with ❤️, ☕ &amp; 👨‍💻 by <a href="https://michaelsboost.com/" target="_blank">Michael Schwartz</a> 🚀
            </blockquote>
          </li>
        </ul>
      </main>
      <footer>
        <button class="text-xs w-auto px-3 py-2 m-0 capitalize rounded-md bg-transparent border border-gray-600" style="color: unset;" aria-label="Close" @click="openMenu=false">
          close
        </button>
      </footer>
    </article>
  </dialog>
</div>

<script src="https://michaelsboost.com/TailwindCSSMod/tailwind-mod-noreset.min.js"></script>

<script src="dist/script.js"></script>
  </body>
</html>