From a239e2dd6e408f5bca9a9b50a26df30c405bb180 Mon Sep 17 00:00:00 2001 From: Adam Goldsmith Date: Tue, 10 Mar 2020 17:15:33 -0400 Subject: [PATCH] Migrate to Vue, slightly redesign labels to fit more text --- .editorconfig | 9 +++ .prettierrc | 3 + App.vue | 13 +++++ ComputerLabel.vue | 142 +++++++++++++++++++++++++++++++++++++++++++++ ToolLabels.vue | 23 ++++++++ computerLabel.css | 58 ------------------ computerLabel.html | 17 ------ computerLabel.js | 39 ------------- getAssets.py | 31 ++++++++++ index.html | 4 ++ index.ts | 7 +++ package.json | 10 +++- snipeit.d.ts | 63 ++++++++++++++++++++ tsconfig.json | 8 +++ 14 files changed, 312 insertions(+), 115 deletions(-) create mode 100644 .editorconfig create mode 100644 .prettierrc create mode 100644 App.vue create mode 100644 ComputerLabel.vue create mode 100644 ToolLabels.vue delete mode 100644 computerLabel.css delete mode 100644 computerLabel.html delete mode 100644 computerLabel.js create mode 100755 getAssets.py create mode 100644 index.html create mode 100644 index.ts create mode 100644 snipeit.d.ts create mode 100644 tsconfig.json diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..81ded28 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +# EditorConfig is awesome: https://EditorConfig.org + +[*] +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true +charset = utf-8 +indent_style = space +indent_size = 2 diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..ee6d53c --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +trailingComma: es5 +singleQuote: true +jsxBracketSameLine: true diff --git a/App.vue b/App.vue new file mode 100644 index 0000000..0ebbeee --- /dev/null +++ b/App.vue @@ -0,0 +1,13 @@ + + + diff --git a/ComputerLabel.vue b/ComputerLabel.vue new file mode 100644 index 0000000..caa42b8 --- /dev/null +++ b/ComputerLabel.vue @@ -0,0 +1,142 @@ + + + + + diff --git a/ToolLabels.vue b/ToolLabels.vue new file mode 100644 index 0000000..bb98638 --- /dev/null +++ b/ToolLabels.vue @@ -0,0 +1,23 @@ + + + diff --git a/computerLabel.css b/computerLabel.css deleted file mode 100644 index ee83d6a..0000000 --- a/computerLabel.css +++ /dev/null @@ -1,58 +0,0 @@ -@page { - size: calc(146.64pt - 4.32pt) calc(69.12pt - 4.08pt); - margin: 1mm; -} - -body { - margin: 0; -} - -.label { - background-size: cover; - page-break-after: always; - clear: both; - width: calc(146.64pt - 4.32pt); - height: calc(69.12pt - 4.08pt); - position: relative; - padding-top: 1.9mm; - - overflow: hidden; -} - -@media screen { - .label { - border: 1px solid red; - } -} - -.content { - display: flex; - height: 70%; -} - -.qrcode { - height: 100%; -} - -.text-content { - margin-left: 1ex; - font-family: monospace; - line-height: 0.9; -} - -.name { - font-size: 30; - line-height: 0.8; - margin-bottom: .1em; -} - -.mac { - font-size: 10; -} - -.barcode { - margin-top: 2%; - bottom: 0; - width: 90%; - height: 24%; -} diff --git a/computerLabel.html b/computerLabel.html deleted file mode 100644 index 6280a98..0000000 --- a/computerLabel.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - diff --git a/computerLabel.js b/computerLabel.js deleted file mode 100644 index 0b5f5e8..0000000 --- a/computerLabel.js +++ /dev/null @@ -1,39 +0,0 @@ -import JsBarcode from "jsbarcode"; -import { toWords as numberToWords } from "number-to-words"; -import QRCode from "qrcode"; - -import data from "./export-computers-assets-2020-01-30.json"; - -async function renderLabels() { - const template = document.querySelector("#labelTemplate"); - - const URL_BASE = "https://inv.claremontmakerspace.org/"; - - for (const asset of data.data) { - const { - "Asset Tag": assetTag, - "Asset Name": assetName, - "MAC Address": mac - } = asset; - let clone = document.importNode(template.content, true); - - let qrcode = await QRCode.toDataURL(URL_BASE + assetTag, { margin: 0 }); - clone.querySelector(".qrcode").src = qrcode; - - JsBarcode(clone.querySelector(".barcode"), assetTag, { - displayValue: false, - margin: 0 - }); - - let name = numberToWords(assetName.match(/[0-9]+$/)[0]).toUpperCase(); - - clone.querySelector(".name").textContent = name; - clone.querySelector(".hostname").textContent = assetName; - clone.querySelector(".mac").textContent = mac; - clone.querySelector(".tag").textContent = assetTag; - - document.body.appendChild(clone); - } -} - -window.addEventListener("load", renderLabels); diff --git a/getAssets.py b/getAssets.py new file mode 100755 index 0000000..092b493 --- /dev/null +++ b/getAssets.py @@ -0,0 +1,31 @@ +#!/usr/bin/env python3 + +import json +import requests +import sys + +BASE_URL = 'https://inventory.claremontmakerspace.org/api/v1/' + +token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjlmODA4ZDhlNGNiNTExNDJhZmZkNzc3YzVmYmFjOTAzN2U4ZGVkMmJhNWMxZDY2M2YzODhhOWQ3ODQ1MWFhMDIwN2E1NWVmNDNlNTlkZTRlIn0.eyJhdWQiOiIxIiwianRpIjoiOWY4MDhkOGU0Y2I1MTE0MmFmZmQ3NzdjNWZiYWM5MDM3ZThkZWQyYmE1YzFkNjYzZjM4OGE5ZDc4NDUxYWEwMjA3YTU1ZWY0M2U1OWRlNGUiLCJpYXQiOjE1ODM4NTg3ODIsIm5iZiI6MTU4Mzg1ODc4MiwiZXhwIjoxNjE1Mzk4MzgyLCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.RaUpwGEQOyQHKF9toXgtI2gMetCXpokux6SeLlF-6OXMpGPv64YPIWYFWfpwF8PrKTKIJiEW_gOyg15sHdEs1VLchQLYUrO7Fv9jK8_S3jj1PkXx_OQpork7nO19hEJUpi64d5RPuyyprTgR2Yu9VAi37bwTjBz2TbpggOaqWjH1gpX7BvZqpFFgTgg-A-KO9TCYurPst4GrNpR4DG0SYxqDCOlpQoMa6bnzlZ3ZbW0Xt2Z8E8JiEWjZ6FalNs3EoQAyGIyW_f66qiouR0EzFqa9-EHt0TdZvr_n6KG0Rdq4RBmKGG0-b4l3VIDbCKe9DeSVZa8oZOamfAiwBIhADOMIXrNJNov7-T25c9h2PznuaXLZrh1JydJxreFpoWwvME4G-HBQWHL9EVY3Kdi-6gB8Bh0kWdfoEkFFcio-40iE4eL5h5AnE-nyMKSFeqrhw_A1mhNaGgJixIzD0gDxnVBNT1RpjEDxBFXV1_bQd8pWOG6gWP263PY8fWf4vGE8_WPt95F-DYYrOJ7QsmZ1iTy4FKHo5CvuIgvExMXg3eLol7Rc0P6e1MA-OITi6taT7GG4T26R9_fukXJYe15vVyV-sR8_wBE9CeYIQLoW69R4vzAzKXwBJ5zrjFAog13iq5Vmyy9koY1vRGOvKuXIO5TZxlQTznZSJFy86FoANww' + +categories = { + "tools": "4", + "computers": "5" +} + +headers = { + 'Authorization': 'Bearer ' + token, + 'Accept': "application/json", + 'Content-Type': "application/json" +} + +r = requests.get( + BASE_URL + "hardware/", + params={ + "limit": "1000", + "category_id": categories[sys.argv[1]] + }, + headers=headers) + +with open(sys.argv[1] + '.json', 'w') as f: + f.write(r.text) diff --git a/index.html b/index.html new file mode 100644 index 0000000..a0434ae --- /dev/null +++ b/index.html @@ -0,0 +1,4 @@ + +
+ + diff --git a/index.ts b/index.ts new file mode 100644 index 0000000..844b31f --- /dev/null +++ b/index.ts @@ -0,0 +1,7 @@ +import Vue from 'vue'; + +import App from './App'; + +let app = new Vue({ + render: h => h(App), +}).$mount('#app'); diff --git a/package.json b/package.json index fd0d085..816c9fa 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,14 @@ "dependencies": { "jsbarcode": "^3.11.0", "number-to-words": "^1.2.4", - "qrcode": "^1.4.4" + "qrcode": "^1.4.4", + "vue": "^2.6.11", + "vue-hot-reload-api": "^2.3.4", + "vue-property-decorator": "^8.4.0" + }, + "devDependencies": { + "@vue/component-compiler-utils": "^3.1.1", + "typescript": "^3.8.3", + "vue-template-compiler": "^2.6.11" } } diff --git a/snipeit.d.ts b/snipeit.d.ts new file mode 100644 index 0000000..b7a3b73 --- /dev/null +++ b/snipeit.d.ts @@ -0,0 +1,63 @@ +export interface Hardware { + id: number; + name: string; + asset_tag: string; + serial: string; + model: IdName; + model_number: string; + eol?: string; // TODO + status_label: IdName & { + status_type: 'deployable' | 'pending' | 'undeployable' | 'archived'; + status_meta: 'deployed' | 'pending'; // TODO + }; + category: IdName; + manufacturer: IdName; + supplier?: IdName; + notes?: string; + order_number?: string; + company?: IdName; // TODO + location?: IdName; + rtd_location?: IdName; + image: string; + assigned_to: IdName & { type: string }; + warranty_months?: string; + warranty_expires?: string; + created_at: DatetimeFormatted; + updated_at: DatetimeFormatted; + last_audit_date?: DatetimeFormatted; + next_audit_date?: DatetimeFormatted; + deleted_at?: DatetimeFormatted; + purchase_date: DatetimeFormatted; + last_checkout: DatetimeFormatted; + expected_checkin: DatetimeFormatted; + purchase_cost: number; + checkin_counter: number; + checkout_counter: number; + requests_counter: number; + user_can_checkout: boolean; + custom_fields: { + [key: string]: { + field: string; + value?: string; + field_format: string; + }; + }; + available_actions: { + checkout: boolean; + checkin: boolean; + clone: boolean; + restore: boolean; + update: boolean; + delete: boolean; + }; +} + +export interface IdName { + id: number; + name: string; +} + +export interface DatetimeFormatted { + datetime: string; + formatted: string; +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..cc57508 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es6", + "strict": true, + "module": "es2015", + "moduleResolution": "node" + } +}