use mammoth to show docx
This commit is contained in:
NoeBerdoz
232
frontend/package-lock.json
generated
232
frontend/package-lock.json
generated
@ -11,7 +11,8 @@
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"alpinejs": "^3.14.9",
|
||||
"bootstrap": "^5.3.5"
|
||||
"bootstrap": "^5.3.5",
|
||||
"mammoth": "^1.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.86.3",
|
||||
@ -1065,6 +1066,15 @@
|
||||
"integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@xmldom/xmldom": {
|
||||
"version": "0.8.10",
|
||||
"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
|
||||
"integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/alpinejs": {
|
||||
"version": "3.14.9",
|
||||
"resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.14.9.tgz",
|
||||
@ -1074,6 +1084,41 @@
|
||||
"@vue/reactivity": "~3.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/argparse": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
|
||||
"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"sprintf-js": "~1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/base64-js": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
|
||||
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/feross"
|
||||
},
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/feross"
|
||||
},
|
||||
{
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
],
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/bluebird": {
|
||||
"version": "3.4.7",
|
||||
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
|
||||
"integrity": "sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/bootstrap": {
|
||||
"version": "5.3.5",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.5.tgz",
|
||||
@ -1123,6 +1168,12 @@
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
}
|
||||
},
|
||||
"node_modules/core-util-is": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
|
||||
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
|
||||
@ -1137,6 +1188,21 @@
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/dingbat-to-unicode": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dingbat-to-unicode/-/dingbat-to-unicode-1.0.1.tgz",
|
||||
"integrity": "sha512-98l0sW87ZT58pU4i61wa2OHwxbiYSbuxsCBozaVnYX2iCnr3bLM3fIes1/ej7h1YdOKuKt/MLs706TVnALA65w==",
|
||||
"license": "BSD-2-Clause"
|
||||
},
|
||||
"node_modules/duck": {
|
||||
"version": "0.1.12",
|
||||
"resolved": "https://registry.npmjs.org/duck/-/duck-0.1.12.tgz",
|
||||
"integrity": "sha512-wkctla1O6VfP89gQ+J/yDesM0S7B7XLXjKGzXxMDVFg7uEn706niAtyYovKbyq1oT9YwDcly721/iUWoc8MVRg==",
|
||||
"license": "BSD",
|
||||
"dependencies": {
|
||||
"underscore": "^1.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.25.2",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.2.tgz",
|
||||
@ -1207,6 +1273,12 @@
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/immediate": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
|
||||
"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.1.tgz",
|
||||
@ -1214,6 +1286,12 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/inherits": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/is-extglob": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
@ -1250,6 +1328,68 @@
|
||||
"node": ">=0.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/isarray": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/jszip": {
|
||||
"version": "3.10.1",
|
||||
"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
|
||||
"integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
|
||||
"license": "(MIT OR GPL-3.0-or-later)",
|
||||
"dependencies": {
|
||||
"lie": "~3.3.0",
|
||||
"pako": "~1.0.2",
|
||||
"readable-stream": "~2.3.6",
|
||||
"setimmediate": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/lie": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
|
||||
"integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"immediate": "~3.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/lop": {
|
||||
"version": "0.4.2",
|
||||
"resolved": "https://registry.npmjs.org/lop/-/lop-0.4.2.tgz",
|
||||
"integrity": "sha512-RefILVDQ4DKoRZsJ4Pj22TxE3omDO47yFpkIBoDKzkqPRISs5U1cnAdg/5583YPkWPaLIYHOKRMQSvjFsO26cw==",
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"duck": "^0.1.12",
|
||||
"option": "~0.2.1",
|
||||
"underscore": "^1.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/mammoth": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/mammoth/-/mammoth-1.9.0.tgz",
|
||||
"integrity": "sha512-F+0NxzankQV9XSUAuVKvkdQK0GbtGGuqVnND9aVf9VSeUA82LQa29GjLqYU6Eez8LHqSJG3eGiDW3224OKdpZg==",
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"@xmldom/xmldom": "^0.8.6",
|
||||
"argparse": "~1.0.3",
|
||||
"base64-js": "^1.5.1",
|
||||
"bluebird": "~3.4.0",
|
||||
"dingbat-to-unicode": "^1.0.1",
|
||||
"jszip": "^3.7.1",
|
||||
"lop": "^0.4.2",
|
||||
"path-is-absolute": "^1.0.0",
|
||||
"underscore": "^1.13.1",
|
||||
"xmlbuilder": "^10.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"mammoth": "bin/mammoth"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/micromatch": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
|
||||
@ -1292,6 +1432,27 @@
|
||||
"license": "MIT",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/option": {
|
||||
"version": "0.2.4",
|
||||
"resolved": "https://registry.npmjs.org/option/-/option-0.2.4.tgz",
|
||||
"integrity": "sha512-pkEqbDyl8ou5cpq+VsnQbe/WlEy5qS7xPzMS1U55OCG9KPvwFD46zDbxQIj3egJSFc3D+XhYOPUzz49zQAVy7A==",
|
||||
"license": "BSD-2-Clause"
|
||||
},
|
||||
"node_modules/pako": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
|
||||
"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
|
||||
"license": "(MIT AND Zlib)"
|
||||
},
|
||||
"node_modules/path-is-absolute": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
|
||||
"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||
@ -1342,6 +1503,27 @@
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/process-nextick-args": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/readable-stream": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
|
||||
"integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.3",
|
||||
"isarray": "~1.0.0",
|
||||
"process-nextick-args": "~2.0.0",
|
||||
"safe-buffer": "~5.1.1",
|
||||
"string_decoder": "~1.1.1",
|
||||
"util-deprecate": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
|
||||
@ -1396,6 +1578,12 @@
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.86.3",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.86.3.tgz",
|
||||
@ -1417,6 +1605,12 @@
|
||||
"@parcel/watcher": "^2.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/setimmediate": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
|
||||
"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
@ -1427,6 +1621,21 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sprintf-js": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
|
||||
"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/to-regex-range": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
@ -1441,6 +1650,18 @@
|
||||
"node": ">=8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/underscore": {
|
||||
"version": "1.13.7",
|
||||
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.7.tgz",
|
||||
"integrity": "sha512-GMXzWtsc57XAtguZgaQViUOzs0KTkk8ojr3/xAxXLITqf/3EMwxC0inyETfDFjH/Krbhuep0HNbbjI9i/q3F3g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.2.6",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.6.tgz",
|
||||
@ -1512,6 +1733,15 @@
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/xmlbuilder": {
|
||||
"version": "10.1.1",
|
||||
"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-10.1.1.tgz",
|
||||
"integrity": "sha512-OyzrcFLL/nb6fMGHbiRDuPup9ljBycsdCypwuyg5AAHvyWzGfChJpCXMG88AGTIMFhGZ9RccFN1e6lhg3hkwKg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"alpinejs": "^3.14.9",
|
||||
"bootstrap": "^5.3.5"
|
||||
"bootstrap": "^5.3.5",
|
||||
"mammoth": "^1.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.86.3",
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
border: 1px solid #dee2e6; /* Bootstrap border color */
|
||||
border-radius: 0.375rem; /* Bootstrap border radius */
|
||||
}
|
||||
|
||||
.document-viewer pre {
|
||||
min-height: 600px;
|
||||
max-height: 70vh; /* Limit height for long text */
|
||||
@ -67,34 +68,48 @@
|
||||
<ul class="nav nav-tabs" id="docTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="passport-tab" data-bs-toggle="tab"
|
||||
data-bs-target="#passport-pane" type="button" role="tab" aria-controls="passport-pane"
|
||||
aria-selected="true">Passport (PNG)</button>
|
||||
data-bs-target="#passport-pane" type="button" role="tab"
|
||||
aria-controls="passport-pane"
|
||||
aria-selected="true">Passport (PNG)
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="account-pdf-tab" data-bs-toggle="tab" data-bs-target="#account-pdf-pane"
|
||||
type="button" role="tab" aria-controls="account-pdf-pane" aria-selected="false">Account (PDF)</button>
|
||||
<button class="nav-link" id="account-pdf-tab" data-bs-toggle="tab"
|
||||
data-bs-target="#account-pdf-pane"
|
||||
type="button" role="tab" aria-controls="account-pdf-pane" aria-selected="false">
|
||||
Account (PDF)
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="profile-docx-tab" data-bs-toggle="tab" data-bs-target="#profile-docx-pane"
|
||||
type="button" role="tab" aria-controls="profile-docx-pane" aria-selected="false">Profile (DOCX)</button>
|
||||
<button class="nav-link" id="profile-docx-tab" data-bs-toggle="tab"
|
||||
data-bs-target="#profile-docx-pane"
|
||||
type="button" role="tab" aria-controls="profile-docx-pane" aria-selected="false">
|
||||
Profile (DOCX)
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="description-txt-tab" data-bs-toggle="tab" data-bs-target="#description-txt-pane"
|
||||
type="button" role="tab" aria-controls="description-txt-pane" aria-selected="false">Description (TXT)</button>
|
||||
<button class="nav-link" id="description-txt-tab" data-bs-toggle="tab"
|
||||
data-bs-target="#description-txt-pane"
|
||||
type="button" role="tab" aria-controls="description-txt-pane" aria-selected="false">
|
||||
Description (TXT)
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content pt-3 document-viewer" id="docTabContent">
|
||||
<div class="tab-pane fade show active" id="passport-pane" role="tabpanel" aria-labelledby="passport-tab" tabindex="0">
|
||||
<div class="tab-pane fade show active" id="passport-pane" role="tabpanel"
|
||||
aria-labelledby="passport-tab" tabindex="0">
|
||||
<template x-if="passportSrc">
|
||||
<img :src="passportSrc" class="img-fluid border rounded" alt="Passport Document">
|
||||
</template>
|
||||
<template x-if="!passportSrc && gameData?.client_data">
|
||||
<div class="alert alert-secondary">Passport document not available.</div>
|
||||
</template>
|
||||
<template x-if="!gameData?.client_data && !isLoading"> <div class="alert alert-secondary">Loading document...</div>
|
||||
<template x-if="!gameData?.client_data && !isLoading">
|
||||
<div class="alert alert-secondary">Loading document...</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="account-pdf-pane" role="tabpanel" aria-labelledby="account-pdf-tab" tabindex="0">
|
||||
<div class="tab-pane fade" id="account-pdf-pane" role="tabpanel"
|
||||
aria-labelledby="account-pdf-tab" tabindex="0">
|
||||
<template x-if="accountSrc">
|
||||
<iframe :src="accountSrc" type="application/pdf"></iframe>
|
||||
</template>
|
||||
@ -105,28 +120,38 @@
|
||||
<div class="alert alert-secondary">Loading document...</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="profile-docx-pane" role="tabpanel" aria-labelledby="profile-docx-tab" tabindex="0">
|
||||
<template x-if="profileSrc">
|
||||
<div class="alert alert-info d-flex align-items-center" role="alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-info-circle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Info:">
|
||||
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
|
||||
</svg>
|
||||
<div>
|
||||
DOCX files cannot be previewed directly. Please download the file.
|
||||
</div>
|
||||
</div>
|
||||
<a :href="profileSrc" :download="(gameData?.client_id || 'client') + '_profile.docx'" class="btn btn-primary mt-2">
|
||||
Download Profile Document (.docx)
|
||||
</a>
|
||||
<div class="tab-pane fade" id="profile-docx-pane" role="tabpanel"
|
||||
aria-labelledby="profile-docx-tab" tabindex="0">
|
||||
<template x-if="profileHtml">
|
||||
<div x-html="profileHtml" class="docx-preview border rounded p-3 bg-white"></div>
|
||||
</template>
|
||||
<template x-if="!profileSrc && gameData?.client_data">
|
||||
<div class="alert alert-secondary">Profile document not available.</div>
|
||||
<template x-if="!profileHtml && gameData?.client_data && typeof mammoth !== 'undefined'">
|
||||
<div class="alert alert-secondary">Profile document preview not available or empty.
|
||||
</div>
|
||||
<a x-show="gameData?.client_data?.profile_b64"
|
||||
:href="'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,'+gameData.client_data.profile_b64"
|
||||
:download="(gameData?.client_id || 'client') + '_profile.docx'"
|
||||
class="btn btn-secondary mt-2">
|
||||
Download Original (.docx)
|
||||
</a>
|
||||
</template>
|
||||
<template x-if="!gameData?.client_data && !isLoading">
|
||||
<div class="alert alert-secondary">Loading document...</div>
|
||||
</template>
|
||||
<template x-if="typeof mammoth === 'undefined'">
|
||||
<div class="alert alert-warning">Cannot preview DOCX. Required library (Mammoth.js) is
|
||||
missing.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="description-txt-pane" role="tabpanel" aria-labelledby="description-txt-tab" tabindex="0">
|
||||
<a x-show="gameData?.client_data?.profile_b64"
|
||||
:href="'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,'+gameData.client_data.profile_b64"
|
||||
:download="(gameData?.client_id || 'client') + '_profile.docx'"
|
||||
class="btn btn-secondary mt-2">
|
||||
Download Original (.docx)
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="description-txt-pane" role="tabpanel"
|
||||
aria-labelledby="description-txt-tab" tabindex="0">
|
||||
<template x-if="descriptionText !== null">
|
||||
<pre x-text="descriptionText"></pre>
|
||||
</template>
|
||||
@ -148,10 +173,13 @@
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Game Information</h5></div>
|
||||
<div class="card-body">
|
||||
<p class="mb-1"><strong>Client ID:</strong> <code x-text="gameData?.client_id || 'N/A'"></code></p>
|
||||
<p class="mb-1"><strong>Session ID:</strong> <code x-text="gameData?.session_id || 'N/A'"></code></p>
|
||||
<p class="mb-1"><strong>Client ID:</strong> <code x-text="gameData?.client_id || 'N/A'"></code>
|
||||
</p>
|
||||
<p class="mb-1"><strong>Session ID:</strong> <code
|
||||
x-text="gameData?.session_id || 'N/A'"></code></p>
|
||||
<p class="mb-1"><strong>Score:</strong> <code x-text="gameData?.score || '0'"></code></p>
|
||||
<p class="mb-1"><strong>Status:</strong> <span class="badge bg-info" x-text="gameData?.status || 'N/A'"></span></p>
|
||||
<p class="mb-1"><strong>Status:</strong> <span class="badge bg-info"
|
||||
x-text="gameData?.status || 'N/A'"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card shadow-sm mb-3">
|
||||
|
||||
@ -4,6 +4,7 @@ import '../scss/styles.scss'
|
||||
import * as bootstrap from 'bootstrap'
|
||||
|
||||
import Alpine from 'alpinejs'
|
||||
import mammoth from "mammoth";
|
||||
|
||||
window.Alpine = Alpine
|
||||
|
||||
@ -16,7 +17,7 @@ Alpine.data('gameManager', () => ({
|
||||
// --- Document State (add properties for each document type) ---
|
||||
passportSrc: null, // For PNG data URL
|
||||
accountSrc: null, // For PDF data URL
|
||||
profileSrc: null, // For DOCX data URL (download link)
|
||||
profileHtml: null, // For DOCX data URL
|
||||
descriptionText: null, // For decoded TXT content
|
||||
|
||||
init() {
|
||||
@ -24,13 +25,29 @@ Alpine.data('gameManager', () => ({
|
||||
this.startNewGame();
|
||||
},
|
||||
|
||||
// Helper to convert Base64 to ArrayBuffer (needed for Mammoth)
|
||||
base64ToArrayBuffer(base64) {
|
||||
try {
|
||||
const binary_string = atob(base64);
|
||||
const len = binary_string.length;
|
||||
const bytes = new Uint8Array(len);
|
||||
for (let i = 0; i < len; i++) {
|
||||
bytes[i] = binary_string.charCodeAt(i);
|
||||
}
|
||||
return bytes.buffer;
|
||||
} catch (e) {
|
||||
console.error("Error decoding base64 string:", e);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
// --- Helper Function to Process Document Data ---
|
||||
processClientData(clientData) {
|
||||
async processClientData(clientData) {
|
||||
if (!clientData) {
|
||||
console.log('No client data to process.');
|
||||
this.passportSrc = null;
|
||||
this.accountSrc = null;
|
||||
this.profileSrc = null;
|
||||
this.profileHtml = null;
|
||||
this.descriptionText = null;
|
||||
return;
|
||||
}
|
||||
@ -55,9 +72,11 @@ Alpine.data('gameManager', () => ({
|
||||
|
||||
// --- Profile (DOCX) - Create download link ---
|
||||
if (clientData.profile) {
|
||||
this.profileSrc = `data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,${clientData.profile}`;
|
||||
const arrayBuffer = this.base64ToArrayBuffer(clientData.profile);
|
||||
const result = await mammoth.convertToHtml({ arrayBuffer: arrayBuffer });
|
||||
this.profileHtml = result.value;
|
||||
} else {
|
||||
this.profileSrc = null; // Reset if not provided
|
||||
this.profileHtml = null; // Reset if not provided
|
||||
console.log('Profile base64 data not found.');
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user