From 19d566dc8cc6a0bc61d846ee9bee5c4725447814 Mon Sep 17 00:00:00 2001 From: kikiouo Date: Sat, 13 Jun 2020 22:04:23 +0800 Subject: [PATCH 001/125] WIP --- package-lock.json | 68 +++++++++++++++++--- package.json | 10 +-- public/index.html | 2 + src/App.vue | 138 +++++++++++++++++++++++++++++------------ src/main.ts | 2 + src/plugins/vuetify.ts | 7 +++ src/styles/index.scss | 1 - tsconfig.json | 6 +- vue.config.js | 13 ++-- 9 files changed, 183 insertions(+), 64 deletions(-) create mode 100644 src/plugins/vuetify.ts diff --git a/package-lock.json b/package-lock.json index 1698624..4ec9b26 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4645,7 +4645,8 @@ "detect-libc": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", - "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=" + "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", + "dev": true }, "detect-node": { "version": "2.0.4", @@ -5731,9 +5732,10 @@ } }, "fibers": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/fibers/-/fibers-4.0.2.tgz", - "integrity": "sha512-FhICi1K4WZh9D6NC18fh2ODF3EWy1z0gzIdV9P7+s2pRjfRBnCkMDJ6x3bV1DkVymKH8HGrQa/FNOBjYvnJ/tQ==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/fibers/-/fibers-4.0.3.tgz", + "integrity": "sha512-MW5VrDtTOLpKK7lzw4qD7Z9tXaAhdOmOED5RHzg3+HjUk+ibkjVW0Py2ERtdqgTXaerLkVkBy2AEmJiT6RMyzg==", + "dev": true, "requires": { "detect-libc": "^1.0.3" } @@ -9682,11 +9684,6 @@ "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==", "dev": true }, - "normalize.css": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", - "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" - }, "npm-run-path": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", @@ -11189,6 +11186,15 @@ "readable-stream": "^2.0.2" } }, + "rechoir": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", + "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=", + "dev": true, + "requires": { + "resolve": "^1.1.6" + } + }, "regenerate": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", @@ -11886,6 +11892,17 @@ "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==", "dev": true }, + "shelljs": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.4.tgz", + "integrity": "sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==", + "dev": true, + "requires": { + "glob": "^7.0.0", + "interpret": "^1.0.0", + "rechoir": "^0.6.2" + } + }, "signal-exit": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", @@ -13352,6 +13369,24 @@ } } }, + "vue-cli-plugin-vuetify": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.5.tgz", + "integrity": "sha512-jtxcidjLT5f1H9QLYKLFjo/ZG42ud4pI9bK3WNO5DXyhiMDMTwSZ7b3NcJVRH7tKYbv5/ty0VPdDGlf4w22AMA==", + "dev": true, + "requires": { + "semver": "^7.1.2", + "shelljs": "^0.8.3" + }, + "dependencies": { + "semver": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", + "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", + "dev": true + } + } + }, "vue-eslint-parser": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-6.0.5.tgz", @@ -13439,6 +13474,21 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vuetify": { + "version": "2.2.31", + "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.2.31.tgz", + "integrity": "sha512-Ad9NgJr6S7iOd9oMtzOfswEQG4dmVOWaAMSk+3T5oSveVBiSWVLG5F0jVHL9Pe8VblcT4L4EXsTldGT9P3BzLA==" + }, + "vuetify-loader": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.4.4.tgz", + "integrity": "sha512-ryEtVZ/t+zvTM9UscEX5mWsbTOH5HGWITxlysYkkXtcgzgV21t7rRLHBhReH8oMBYddAij4AOosimhcfKnxFHQ==", + "dev": true, + "requires": { + "file-loader": "^4.0.0", + "loader-utils": "^1.2.0" + } + }, "w3c-hr-time": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz", diff --git a/package.json b/package.json index 90b2eea..0f5bdb5 100644 --- a/package.json +++ b/package.json @@ -13,12 +13,11 @@ "axios": "^0.19.0", "core-js": "^3.4.2", "exif-js": "^2.3.0", - "fibers": "^4.0.2", - "normalize.css": "^8.0.1", "register-service-worker": "^1.6.2", "vue": "^2.6.10", "vue-carousel": "^0.18.0", - "vue-gtag": "^1.1.1" + "vue-gtag": "^1.1.1", + "vuetify": "^2.2.11" }, "devDependencies": { "@types/chai": "^4.2.5", @@ -43,12 +42,15 @@ "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.1", "eslint-plugin-vue": "^6.0.1", + "fibers": "^4.0.3", "lint-staged": "^9.4.3", "ol": "^5.3.3", "sass": "^1.23.7", "sass-loader": "^8.0.0", "typescript": "^3.7.2", - "vue-template-compiler": "^2.6.10" + "vue-cli-plugin-vuetify": "~2.0.5", + "vue-template-compiler": "^2.6.10", + "vuetify-loader": "^1.3.0" }, "gitHooks": { "pre-commit": "lint-staged" diff --git a/public/index.html b/public/index.html index 09e6e6a..975cefe 100644 --- a/public/index.html +++ b/public/index.html @@ -27,6 +27,8 @@ 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-WK2GJPS'); + + diff --git a/src/App.vue b/src/App.vue index e8958e9..8c8d646 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,48 +1,93 @@ + + diff --git a/src/lib/appState.ts b/src/lib/appState.ts index a13c904..d3deba0 100644 --- a/src/lib/appState.ts +++ b/src/lib/appState.ts @@ -37,6 +37,8 @@ export const provideAppState = () => { factoryLocation: [] as number[], isCreateMode: computed(() => CreateFactoryPageState.includes(appState.pageState)), + createStepIndex: computed(() => CreateFactoryPageState.indexOf(appState.pageState) + 1), + isEditMode: computed(() => appState.pageState === PageState.UPDATE_FACTORY), selectFactoryMode: computed(() => appState.pageState === PageState.CREATE_FACTORY_1), formPageOpen: computed(() => CreateFactoryPageState.includes(appState.pageState) || appState.pageState === PageState.UPDATE_FACTORY) From 38ea501b0abe7ee10deb0ba3a4f83946055156a2 Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Mon, 20 Jul 2020 23:30:39 +0800 Subject: [PATCH 010/125] Impl step 1 finishing and navigation --- src/components/CreateFactorySteps.vue | 56 +++++++++++++++++++++++---- src/lib/appState.ts | 10 ++++- 2 files changed, 57 insertions(+), 9 deletions(-) diff --git a/src/components/CreateFactorySteps.vue b/src/components/CreateFactorySteps.vue index 980d386..294f3a6 100644 --- a/src/components/CreateFactorySteps.vue +++ b/src/components/CreateFactorySteps.vue @@ -5,7 +5,7 @@ color="white" >
- + mdi-keyboard-backspace
@@ -33,21 +33,28 @@ - + 選擇此地點 + - +
+ Step 2
+
+ Step 3 +
+ + +G diff --git a/src/styles/typography.scss b/src/styles/typography.scss new file mode 100644 index 0000000..5a01c9c --- /dev/null +++ b/src/styles/typography.scss @@ -0,0 +1,12 @@ +@import "./variables"; + +h2 { + color: $dark-green-color; + font-size: 20px; + line-height: 30px; +} + +p { + font-size: 16px; + line-height: 24px; +} From bc2f45558c15834f70b519640c865e0a6cc6e481 Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Tue, 21 Jul 2020 23:53:59 +0800 Subject: [PATCH 012/125] Remove FormPage component --- src/App.vue | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/App.vue b/src/App.vue index a395e91..2c882f6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -83,13 +83,6 @@ :setFactoryLocation="appActions.setFactoryLocation" :openFilterModal="modalActions.openFilterModal" /> - From cc6679e42290184b9554abd98f66607cf98aba10 Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Tue, 21 Jul 2020 23:54:25 +0800 Subject: [PATCH 013/125] Store factory location in appState --- src/components/Map.vue | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/components/Map.vue b/src/components/Map.vue index 9cb8baa..db5453a 100644 --- a/src/components/Map.vue +++ b/src/components/Map.vue @@ -42,9 +42,9 @@

- 經度：{{ factoryLngLat[0].toFixed(7) }} + 經度：{{ appState.mapLngLat[0].toFixed(7) }}
- 緯度：{{ factoryLngLat[1].toFixed(7) }} + 緯度：{{ appState.mapLngLat[1].toFixed(7) }}
以上經緯度版本為WGS84

@@ -148,8 +148,6 @@ export default createComponent({ const { event } = useGA() const root = ref(null) const popup = ref(null) - const factoryValid = ref(false) - const factoryLngLat = ref([]) const mapControllerRef = inject(MainMapControllerSymbol, ref()) const [, modalActions] = useModalState() @@ -250,8 +248,9 @@ export default createComponent({ permalink.zoom(zoom) window.location.hash = permalink.dumps() - factoryValid.value = canPlaceFactory - factoryLngLat.value = [longitude, latitude] + appState.canPlaceFactory = canPlaceFactory + appState.mapLngLat = [longitude, latitude] + event('moveMap') try { const factories = await getFactories(range, longitude, latitude) @@ -326,14 +325,14 @@ export default createComponent({ function onClickFinishSelectFactoryPositionButton () { if (!mapControllerRef.value) return - if (!factoryValid.value) { + if (!appState.canPlaceFactory) { alertActions.showAlert('此地點不在農地範圍內，\n請回報在農地範圍內的工廠。') return } mapControllerRef.value.mapInstance.setLUILayerVisible(false) - props.setFactoryLocation(factoryLngLat.value) + // props.setFactoryLocation(factoryLngLat.value) pageTransition.nextCreateStep() } @@ -342,7 +341,6 @@ export default createComponent({ root, modalActions, popup, - factoryValid, baseMapName, switchBaseMap, toggleLUILayerVisibility, @@ -382,7 +380,6 @@ export default createComponent({ locationTooltipVisibility, toggleLocationTooltipVisibility, locationTooltipControlText, - factoryLngLat, showLocationInput, onClickLocationSearch, onClickSubmitLocation, From 0e93f0e1a9859ee5616c736ff831483bd86263ae Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Wed, 22 Jul 2020 09:26:40 +0800 Subject: [PATCH 014/125] Layout step 3 --- src/components/ConfirmFactory.vue | 63 +++++++++++++++++++++++++++ src/components/CreateFactorySteps.vue | 20 ++++++--- src/components/ImageUploadForm.vue | 11 ++++- 3 files changed, 88 insertions(+), 6 deletions(-) create mode 100644 src/components/ConfirmFactory.vue diff --git a/src/components/ConfirmFactory.vue b/src/components/ConfirmFactory.vue new file mode 100644 index 0000000..8195722 --- /dev/null +++ b/src/components/ConfirmFactory.vue @@ -0,0 +1,63 @@ + + + + + +G diff --git a/src/components/CreateFactorySteps.vue b/src/components/CreateFactorySteps.vue index 22e2a4b..e520a73 100644 --- a/src/components/CreateFactorySteps.vue +++ b/src/components/CreateFactorySteps.vue @@ -39,7 +39,6 @@
- -
- Step 3 -
+
@@ -69,11 +71,13 @@ import { MapFactoryController } from '../lib/map' import { uploadImages, UploadedImage } from '../api' import ImageUploadForm from './ImageUploadForm.vue' +import ConfirmFactory from './ConfirmFactory.vue' export default createComponent({ name: 'CreateFactorySteps', components: { - ImageUploadForm + ImageUploadForm, + ConfirmFactory }, setup (props) { const [appState, { pageTransition, setFactoryLocation }] = useAppState() @@ -101,6 +105,11 @@ export default createComponent({ } } + const createFactoryFormState = reactive({ + nickname: '', + contact: '' + }) + const uploadedImages = ref([]) const imageUploadState = reactive({ error: null, @@ -135,6 +144,7 @@ export default createComponent({ return { appState, pageTransition, + formState: createFactoryFormState, cancelCreateFactory, onBack, diff --git a/src/components/ImageUploadForm.vue b/src/components/ImageUploadForm.vue index 54e223f..68b5f5a 100644 --- a/src/components/ImageUploadForm.vue +++ b/src/components/ImageUploadForm.vue @@ -13,6 +13,10 @@ + 上傳中 + 上傳成功 + 上傳錯誤 + {{ JSON.stringify(previewImages) }}
@@ -28,15 +32,17 @@ - + 下一步 @@ -67,6 +73,9 @@ export default createComponent({ valid: { type: Boolean, default: false + }, + formState: { + type: Object } }, name: 'ImageUploadForm', From bd72bbda05571ae74e70ae109900f916f544d890 Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Wed, 22 Jul 2020 17:07:10 +0800 Subject: [PATCH 015/125] Handle upload image error --- src/components/CreateFactorySteps.vue | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/CreateFactorySteps.vue b/src/components/CreateFactorySteps.vue index e520a73..09c3e8c 100644 --- a/src/components/CreateFactorySteps.vue +++ b/src/components/CreateFactorySteps.vue @@ -112,25 +112,31 @@ export default createComponent({ const uploadedImages = ref([]) const imageUploadState = reactive({ - error: null, + error: null as boolean | null, uploading: false }) const selectedImages = ref(null) watch(selectedImages, async () => { + imageUploadState.error = null + if (!selectedImages.value) { return } imageUploadState.uploading = true - // TODO: handle image upload error - const images = await uploadImages(selectedImages.value) + try { + const images = await uploadImages(selectedImages.value) - uploadedImages.value = [ - ...uploadedImages.value, - ...images - ] + uploadedImages.value = [ + ...uploadedImages.value, + ...images + ] + } catch (err) { + console.error(err) + imageUploadState.error = true + } imageUploadState.uploading = false }) From 739976b6ca3bc28aac4f6f15a450e9bed6b4e1b8 Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Wed, 22 Jul 2020 18:19:18 +0800 Subject: [PATCH 016/125] Render minimap --- src/components/ConfirmFactory.vue | 40 +++++++++++++++++++++++++++++-- src/lib/appState.ts | 4 ++++ src/styles/typography.scss | 5 ++++ 3 files changed, 47 insertions(+), 2 deletions(-) diff --git a/src/components/ConfirmFactory.vue b/src/components/ConfirmFactory.vue index 8195722..5bc2fcb 100644 --- a/src/components/ConfirmFactory.vue +++ b/src/components/ConfirmFactory.vue @@ -6,8 +6,10 @@

工廠地點

+
+

- 返回步驟一編輯 + 返回步驟一編輯

工廠照片

@@ -21,11 +23,17 @@

聯絡方式 (email或電話)

{{ formState.contact }}

+ +
diff --git a/src/lib/appState.ts b/src/lib/appState.ts index 7ab5d95..534c228 100644 --- a/src/lib/appState.ts +++ b/src/lib/appState.ts @@ -114,6 +114,10 @@ const registerMutator = (appState: AppState) => { event('exitSelectFactoryMode') }, + /** + * Goto create step + * Noted: **zero-based**, can be either 0, 1, 2 + */ gotoCreateStep (step: number) { const index = CreateFactoryPageState.indexOf(appState.pageState) if (index !== -1 && step < index) { diff --git a/src/styles/typography.scss b/src/styles/typography.scss index 5a01c9c..5c41e62 100644 --- a/src/styles/typography.scss +++ b/src/styles/typography.scss @@ -10,3 +10,8 @@ p { font-size: 16px; line-height: 24px; } + +a { + color: $second-color; + text-decoration: underline; +} \ No newline at end of file From bfe033970fe892c894448c3f69a37b91280677e7 Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Wed, 22 Jul 2020 20:06:02 +0800 Subject: [PATCH 017/125] Extract Minimap component --- src/components/ConfirmFactory.vue | 31 +++++++++++----------- src/components/Minimap.vue | 44 +++++++++++++++++++++++++++++++ 2 files changed, 59 insertions(+), 16 deletions(-) create mode 100644 src/components/Minimap.vue diff --git a/src/components/ConfirmFactory.vue b/src/components/ConfirmFactory.vue index 5bc2fcb..2d5f236 100644 --- a/src/components/ConfirmFactory.vue +++ b/src/components/ConfirmFactory.vue @@ -6,7 +6,11 @@

工廠地點

-
+

返回步驟一編輯 @@ -35,8 +39,13 @@ import { MainMapControllerSymbol } from '../symbols' import { MapFactoryController, initializeMinimap } from '../lib/map' import { useAppState } from '../lib/appState' +import Minimap from './Minimap.vue' + export default createComponent({ name: 'ConfirmFactory', + components: { + Minimap + }, props: { formState: { type: Object, @@ -51,22 +60,13 @@ export default createComponent({ const mapController = inject(MainMapControllerSymbol, ref()) const [appState, { pageTransition }] = useAppState() - const minimap = ref(null) - - onMounted(() => { - if (mapController.value) { - const controller = mapController.value - const center = controller.mapInstance.map.getView().getCenter() as number[] - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const minimapController = initializeMinimap(minimap.value!, center) - minimapController.addFactories(controller.factories) - - minimapController.mapInstance.setMinimapPin(...appState.factoryLocation as [number, number]) - } - }) + const initialFactories = mapController.value?.factories + const initialLocation = mapController.value?.mapInstance.map.getView().getCenter() return { - minimap, + appState, + initialFactories, + initialLocation, gotoStepOne () { if (mapController.value) { pageTransition.gotoCreateStep(0) @@ -96,4 +96,3 @@ export default createComponent({ } -G diff --git a/src/components/Minimap.vue b/src/components/Minimap.vue new file mode 100644 index 0000000..066aecb --- /dev/null +++ b/src/components/Minimap.vue @@ -0,0 +1,44 @@ + + + From 481f12dc76785da052121652c5436982958faf89 Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Wed, 22 Jul 2020 21:05:21 +0800 Subject: [PATCH 018/125] Add discard modal --- src/components/ConfirmFactory.vue | 22 ++++++++++++++++++++-- src/components/CreateFactorySteps.vue | 24 ++++++++++++++++++++---- 2 files changed, 40 insertions(+), 6 deletions(-) diff --git a/src/components/ConfirmFactory.vue b/src/components/ConfirmFactory.vue index 2d5f236..44af661 100644 --- a/src/components/ConfirmFactory.vue +++ b/src/components/ConfirmFactory.vue @@ -13,11 +13,15 @@ />

- 返回步驟一編輯 + 返回步驟(1/3)編輯

工廠照片

+

+ 返回步驟(2/3)編輯 +

+ {{ JSON.stringify(previewImages) }}

聯絡人暱稱

@@ -28,7 +32,11 @@

{{ formState.contact }}

- + + + 確認送出 + +
@@ -72,6 +80,9 @@ export default createComponent({ pageTransition.gotoCreateStep(0) mapController.value.mapInstance.setLUILayerVisible(true) } + }, + gotoStepTwo () { + pageTransition.gotoCreateStep(1) } } } @@ -95,4 +106,11 @@ export default createComponent({ padding: 20px 15px; } +.bottom-button-container { + background: white; + position: fixed; + bottom: 0; + left: 0; + padding: 10px 15px; +} diff --git a/src/components/CreateFactorySteps.vue b/src/components/CreateFactorySteps.vue index 09c3e8c..4c6c1f3 100644 --- a/src/components/CreateFactorySteps.vue +++ b/src/components/CreateFactorySteps.vue @@ -15,9 +15,21 @@
- - mdi-close - + + + + 放棄新增可疑工廠嗎？ + 放棄新增可疑工廠時，你將遺失所有已輸入的資料。下次需重新填寫。 + + 放棄新增 + 繼續填寫資料 + + +
@@ -82,12 +94,15 @@ export default createComponent({ setup (props) { const [appState, { pageTransition, setFactoryLocation }] = useAppState() const [, alertActions] = useAlertState() + const discardDialog = ref(false) const mapController = inject(MainMapControllerSymbol, ref()) function cancelCreateFactory () { if (mapController.value) { mapController.value.mapInstance.setLUILayerVisible(false) + discardDialog.value = false + // TODO: clear form value pageTransition.closeFactoryPage() } } @@ -172,7 +187,8 @@ export default createComponent({ imageUploadState, uploadedImages, onClickRemoveImage, - imageUploadFormValid + imageUploadFormValid, + discardDialog } } }) From d5997c2c073e2cc66e85468e6d4c019e6c106eb8 Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Sun, 26 Jul 2020 14:22:00 +0800 Subject: [PATCH 019/125] Add create factory api --- src/App.vue | 2 +- src/components/ConfirmFactory.vue | 32 +++++++++++++++- src/components/CreateFactorySteps.vue | 53 ++++++++++++++++++++++++--- src/components/ImageUploadForm.vue | 4 ++ 4 files changed, 83 insertions(+), 8 deletions(-) diff --git a/src/App.vue b/src/App.vue index 2c882f6..7f61a9e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -84,7 +84,7 @@ :openFilterModal="modalActions.openFilterModal" /> - + diff --git a/src/components/ConfirmFactory.vue b/src/components/ConfirmFactory.vue index 44af661..ee7fd27 100644 --- a/src/components/ConfirmFactory.vue +++ b/src/components/ConfirmFactory.vue @@ -32,8 +32,24 @@

{{ formState.contact }}

+

其他工廠資訊（非必填）

+ +

提供明確的工廠資訊能夠幫助我們更快速的填寫公文。

+ +

工廠描述

+ + + +

工廠外部文字

+ + + +

工廠類型

+ + + - + 確認送出 @@ -46,6 +62,7 @@ import { createComponent, inject, ref, onMounted } from '@vue/composition-api' import { MainMapControllerSymbol } from '../symbols' import { MapFactoryController, initializeMinimap } from '../lib/map' import { useAppState } from '../lib/appState' +import { FACTORY_TYPE } from '../types' import Minimap from './Minimap.vue' @@ -62,6 +79,9 @@ export default createComponent({ previewImages: { type: Array, default: [] + }, + submit: { + type: Function } }, setup () { @@ -71,6 +91,11 @@ export default createComponent({ const initialFactories = mapController.value?.factories const initialLocation = mapController.value?.mapInstance.map.getView().getCenter() + const factoryTypeItems: Array<{ text: string, value: string }> = [ + { text: '未選擇', value: '0' }, + ...FACTORY_TYPE + ] + return { appState, initialFactories, @@ -83,7 +108,8 @@ export default createComponent({ }, gotoStepTwo () { pageTransition.gotoCreateStep(1) - } + }, + factoryTypeItems } } }) @@ -104,6 +130,8 @@ export default createComponent({ overflow-x: hidden; padding: 20px 15px; + + padding-bottom: 72px; } .bottom-button-container { diff --git a/src/components/CreateFactorySteps.vue b/src/components/CreateFactorySteps.vue index 4c6c1f3..4bb3204 100644 --- a/src/components/CreateFactorySteps.vue +++ b/src/components/CreateFactorySteps.vue @@ -1,5 +1,5 @@ diff --git a/src/lib/appState.ts b/src/lib/appState.ts index 534c228..475df4c 100644 --- a/src/lib/appState.ts +++ b/src/lib/appState.ts @@ -1,4 +1,4 @@ -import { inject, provide, reactive, computed, toRefs } from '@vue/composition-api' +import { inject, provide, reactive, computed } from '@vue/composition-api' import { useGA } from './useGA' import { FactoryData } from '../types' @@ -28,8 +28,8 @@ export const provideAppState = () => { isCreateMode: boolean, createStepIndex: number, isEditMode: boolean, - selectFactoryMode: boolean - formPageOpen: boolean + selectFactoryMode: boolean, + formPageOpen: boolean, mapLngLat: number[], canPlaceFactory: boolean } = reactive({ @@ -46,7 +46,6 @@ export const provideAppState = () => { selectFactoryMode: computed(() => appState.pageState === PageState.CREATE_FACTORY_1), formPageOpen: computed(() => CreateFactoryPageState.includes(appState.pageState) || appState.pageState === PageState.UPDATE_FACTORY), - // map states mapLngLat: [] as number[], canPlaceFactory: false From 220704c6c99351412238be347bd777c38acbebaa Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Sat, 8 Aug 2020 16:49:36 +0800 Subject: [PATCH 025/125] Layout location select card --- src/components/CreateFactorySteps.vue | 60 ++++++++++++++++++++++----- src/components/Map.vue | 8 ++++ src/styles/variables.scss | 1 + 3 files changed, 58 insertions(+), 11 deletions(-) diff --git a/src/components/CreateFactorySteps.vue b/src/components/CreateFactorySteps.vue index f77e649..c19707d 100644 --- a/src/components/CreateFactorySteps.vue +++ b/src/components/CreateFactorySteps.vue @@ -35,17 +35,35 @@
- - 顯示經緯度 - - - + +

以下經緯度版本為WGS84

+
+

+ 經度：{{ appState.mapLngLat[0].toFixed(7) }} +
+ 緯度：{{ appState.mapLngLat[1].toFixed(7) }} +

+ + + 搜尋經緯度 + +
+ - - - 選擇此地點 +
+ + {{ showLongLat ? '隱藏經緯度' : '顯示經緯度' }} - + + + + + + 選擇此地點 + + +
+
{ + showLongLat.value = !showLongLat.value + } + return { appState, pageTransition, @@ -228,26 +251,41 @@ export default createComponent({ onClickRemoveImage, imageUploadFormValid, discardDialog, - submitFactory + submitFactory, + showLongLat, + toggleShowLongLat } } }) diff --git a/src/components/Map.vue b/src/components/Map.vue index 113a7e6..28c61ac 100644 --- a/src/components/Map.vue +++ b/src/components/Map.vue @@ -19,10 +19,13 @@ + +
+ + +
diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 68ab7a0..cc0d390 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -12,3 +12,4 @@ $red-color: #bb4a37; $blue-color: #447287; $gray-color: #58585B; $dark-green-color: #364516; +$light-green-color: #697F01; From 68b554d2871a9f832aba830e764c19f28dc9723b Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Mon, 10 Aug 2020 22:10:54 +0800 Subject: [PATCH 026/125] Add new set location modal --- src/components/CreateFactorySteps.vue | 71 ++++++++++++++++++++++++--- 1 file changed, 65 insertions(+), 6 deletions(-) diff --git a/src/components/CreateFactorySteps.vue b/src/components/CreateFactorySteps.vue index c19707d..71e9989 100644 --- a/src/components/CreateFactorySteps.vue +++ b/src/components/CreateFactorySteps.vue @@ -35,7 +35,7 @@
- +

以下經緯度版本為WGS84

@@ -44,11 +44,35 @@ 緯度：{{ appState.mapLngLat[1].toFixed(7) }}

- - 搜尋經緯度 - + + + + +

+ 以下經緯度版本為WGS84 +

+ +

精度

+ + + +

緯度

+ + +
+ 清空 + 定位 +
+ + + +
- +
@@ -224,6 +248,37 @@ export default createComponent({ showLongLat.value = !showLongLat.value } + const chooseLocationDialog = ref(false) + const locationInputState = reactive({ + longitude: '', + latitude: '' + }) + const clearLocationInput = () => { + locationInputState.longitude = '' + locationInputState.latitude = '' + } + const setLocation = () => { + if (!mapController.value) return + + const lng = parseFloat(locationInputState.longitude) + const lat = parseFloat(locationInputState.latitude) + if (!locationInputState.longitude || + !locationInputState.latitude || + isNaN(lng) || + isNaN(lat) + ) { + // TODO: show invalid input error + chooseLocationDialog.value = false + } else { + let zoom = mapController.value.mapInstance.map.getView().getZoom() + if (!zoom || zoom <= 17) { + zoom = 17 + } + mapController.value.mapInstance.setCoordinate(lng, lat, zoom) + chooseLocationDialog.value = false + } + } + return { appState, pageTransition, @@ -253,7 +308,11 @@ export default createComponent({ discardDialog, submitFactory, showLongLat, - toggleShowLongLat + toggleShowLongLat, + chooseLocationDialog, + locationInputState, + clearLocationInput, + setLocation } } }) From b9d4bf8c88815d982be923c08f483f14cb5b989d Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Mon, 10 Aug 2020 22:22:39 +0800 Subject: [PATCH 027/125] Cleanup map.vue --- src/components/Map.vue | 194 +---------------------------------------- 1 file changed, 1 insertion(+), 193 deletions(-) diff --git a/src/components/Map.vue b/src/components/Map.vue index 28c61ac..485845f 100644 --- a/src/components/Map.vue +++ b/src/components/Map.vue @@ -1,11 +1,5 @@