Add temporary signage widget

emfcamp · May 24, 2024 · 3987477 · 3987477
1 parent ab764be
commit 3987477
Show file tree

Hide file tree

Showing 4 changed files with 434 additions and 0 deletions.
diff --git a/temporary-sign/exampleData.js b/temporary-sign/exampleData.js
@@ -0,0 +1,99 @@
+export const exampleData = {
+    "id": 1,
+    "Area": "Main",
+    "Structure": "Stage A",
+    "Capacity": 1000,
+    "Cost": 8960,
+    "Supplier": "Carlinden",
+    "Area_m2_": "1276",
+    "Funding": "Event",
+    "Flooring_Coverage": 0.7,
+    "Flooring_m2_": 893.1999999999999,
+    "Weeks": 1,
+    "Flooring_Cost": 4019.3999999999996,
+    "Status": "Ordered",
+    "Type": "Big Top 29x44",
+    "Units": 1,
+    "Placed": true,
+    "Ready_By": "2024-05-27T17:00:00.000Z",
+    "Needed_Until": "2024-06-04T11:00:00.000Z",
+    "Notes": "asdfasddf",
+    "Location": "52.03992, -2.378563",
+    "References": {
+        "Area": "Main",
+        "Area_m2_": "1276",
+        "Capacity": 1000,
+        "Cost": 8960,
+        "Flooring_Cost": 4019.3999999999996,
+        "Flooring_Coverage": 0.7,
+        "Flooring_m2_": 893.1999999999999,
+        "Funding": {
+            "Flooring_Cost": 14585.06,
+            "Name": "Event",
+            "Structures_Cost": 58460,
+            "Total_Cost": 73045.06,
+            "id": 1
+        },
+        "Furniture": [
+            {
+                "Area": "Main",
+                "Confirmed_by": "SamLR",
+                "Cost": 1300,
+                "Item_Quantity": 1000,
+                "Item_Type": "Folding Chairs",
+                "Location": {
+                    "tableId": "Event_Structures",
+                    "rowId": 1
+                },
+                "Notes": "",
+                "Point_of_contact": "SamLR",
+                "Status": "Confirmed",
+                "id": 68
+            },
+            {
+                "Area": "Main",
+                "Confirmed_by": "SamLR",
+                "Cost": 15,
+                "Item_Quantity": 5,
+                "Item_Type": "6' Trestle Tables",
+                "Location": {
+                    "tableId": "Event_Structures",
+                    "rowId": 1
+                },
+                "Notes": "",
+                "Point_of_contact": "SamLR",
+                "Status": "Confirmed",
+                "id": 69
+            }
+        ],
+        "Location": "52.03992,-2.378563",
+        "Needed_Until": "2024-06-04T11:00:00.000Z",
+        "Notes": "",
+        "Placed": true,
+        "Ready_By": "2024-05-27T17:00:00.000Z",
+        "Status": "Ordered",
+        "Structure": "Stage A",
+        "Supplier": "Carlinden",
+        "Type": {
+            "Event": 1,
+            "Link": "",
+            "Notes": "",
+            "Ordered": 1,
+            "Price": 8960,
+            "Price_sq_m": 7.021943573667712,
+            "Size": 1276,
+            "Supplier": "Carlinden",
+            "Total": 1,
+            "Type": "Big Top",
+            "Type_Variant": "Big Top 29x44",
+            "Variant": "29x44",
+            "Villages": 0,
+            "X": 29,
+            "Y": 44,
+            "id": 1
+        },
+        "Units": 1,
+        "Weeks": 1,
+        "id": 1
+    }
+};
diff --git a/temporary-sign/index.html b/temporary-sign/index.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>EMF Structure Sheet</title>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
+        <script src="https://grist.orga.emfcamp.org/grist-plugin-api.js"></script>
+        <script src="temporary-sign.ts" type="module"></script>
+    </head>
+    <body>
+        <div id="app">
+            <div class="status" v-if="status">
+                <template v-if="status === 'waiting'">
+                    <p>Waiting for data...</p>
+                    <ul>
+                        <li v-bind:class="[tableConnected ? 'done' : '']">
+                            I need <b>read table</b> access.
+                        </li>
+                        <li v-bind:class="[haveRows ? 'done' : '']">I need at least one row of data.</li>
+                        <li v-bind:class="[rowConnected ? 'done' : '']">I need <b>Select By</b> set.</li>
+                    </ul>
+                </template>
+                <template v-else> {{ status }} </template>
+            </div>
+            <template v-if="structure">
+                <h1 :style="{fontSize: `${structure.fontSize}px` }">{{structure.Structure}}</h1>
+
+                <div class="furniture" v-if="structure.Furniture">
+                    <h2>Furniture</h2>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Item</th>
+                                <th>Quantity</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="item in structure.Furniture">
+                                <td class="money">{{ item.Item_Type }}</td>
+                                <td class="number">{{ item.Item_Quantity }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="print">
+                    <a href="javascript:window.print()">Print</a>
+                </div>
+            </template>
+        </div>
+    </body>
+</html>
diff --git a/temporary-sign/temporary-sign.css b/temporary-sign/temporary-sign.css
@@ -0,0 +1,123 @@
+html {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    margin: 0 auto;
+    border-radius: 5px;
+    padding-top: 0px;
+    height: 100vh;
+    width: 100vw;
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    padding: 4px;
+    margin-top: 0px !important;
+}
+
+#app {
+    margin: 0 auto;
+    width: 1000px;
+    height: 700px;
+    padding: 4px;
+    position: relative;
+}
+
+h1 {
+    text-align: center;
+}
+
+h2 {
+    border-top: 1px solid #999;
+    margin-top: 10px;
+    margin-bottom: 5px;
+    margin-left: -5px;
+    margin-right: -5px;
+    padding: 5px;
+}
+
+.row {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.attribute {
+    white-space: nowrap;
+    flex: 1;
+    min-width: 50%;
+}
+
+.attribute .name {
+    font-weight: bold;
+    margin: 5px;
+}
+
+.attribute .name::after {
+    content: ':';
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+table th {
+    text-align: left;
+}
+
+tbody tr:nth-child(odd) {
+    background-color: #f0f0f0;
+}
+
+.furniture {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    padding: 4px 10px;
+}
+
+.qrcode img {
+    display: block;
+    margin: auto;
+}
+
+
+@media print {
+    div.print {
+        display: none;
+    }
+}
+
+div.print {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 1000;
+}
+
+div.print a {
+    background: #c83200;
+    display: block;
+    font-size: 200%;
+    color: white;
+    text-decoration: none;
+    padding: 0.25em;
+    padding-top: 0.5em;
+    padding-right: 0.5em;
+    border-top-right-radius: 0.5em;
+    text-transform: uppercase;
+}
+
+div.print a:hover {
+    background: #4682b4;
+}
+
+.done {
+    text-decoration: line-through;
+}
+
+.status {
+    padding: 4px;
+}