# SGC Mobile (Ionic Vue) - Service Api Docs (/docs/api/index.html) ## Install - required ```bash # https://nodejs.org/ko/download/ # node install npm uninstall -g ionic # uninstall if ionic is installed npm install -g @ionic/cli@latest # install npm install -g @vue/cli # Vue Cli ``` ## Install - optional ```bash npm install --save-dev node-sass sass-loader # Scss Loader optional npm install -g http-server # http server optional npm install --save-dev colors # for deploy command optional npm install --save-dev iconv-lite # for deploy command optional ``` ## Project Run & Build ```bash ionic serve # run server ionic serve -lab # run server for ios and android ionic build --prod # Build the application for production ionic build --aot # Perform ahead-of-time compilation for this build ionic build --minifyjs # Minify JS for this build ionic build --minifycss # Minify CSS for this build ionic build --optimizejs # Perform JS optimizations for this build # change package.json version npm install # if need when change the package ionic build --prod --minifyjs --minifycss --optimizejs # default origial command npm run format # file formatter not need. (if need run) npm run db2file # DB SQL(docs/DB_SQL.sql) to java, mapper, interface. (if need run) npm run translate # translate json file to other language. npm run compile # comple source to dist (ts to javascript) npm run deploy # copy dist folder to src/main/webapp/mobile. need npm install -g colors , npm install -g iconv-lite ``` ## ENV-Development * portal (임직원) * ./.env.development (change this file and run ionic serve again) * VUE_APP_TYPE=portal * _VUE_APP_TYPE=as * as (협력업체) * ./.env.development (change this file and run ionic serve again) * _VUE_APP_TYPE=portal * VUE_APP_TYPE=as ## Push Test * http://localhost:8100/#/pushdev * 개발 환경에서만 연결 가능합니다. ## VSCode Extension * Name: Beautify css/sass/scss/less * Id: michelemelluso.code-beautifier * Description: Beautify css, sass and less code (extension for Visual Studio Code) * Version: 2.3.3 * Publisher: michelemelluso * VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=michelemelluso.code-beautifier * Name: Comments in Typescript * Id: salbert.comment-ts * Description: Generates JSDoc comments in TypeScript files. * Version: 1.0.21 * Publisher: s.albert * VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=salbert.comment-ts * Name: Git Graph * Id: mhutchie.git-graph * Description: View a Git Graph of your repository, and perform Git actions from the graph. * Version: 1.30.0 * Publisher: mhutchie * VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph * Name: Prettier - Code formatter * Id: esbenp.prettier-vscode * Description: Code formatter using prettier * Version: 9.9.0 * Publisher: Prettier * VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode * Name: SCSS IntelliSense * Id: mrmlnc.vscode-scss * Description: Advanced autocompletion and refactoring support for SCSS * Version: 0.10.0 * Publisher: mrmlnc * VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss * Name: Vue 3 Snippets * Id: hollowtree.vue-snippets * Description: A Vue.js 3 And Vue.js 2 Code Snippets Extension * Version: 1.0.4 * Publisher: hollowtree * VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets * Name: Vue Language Features (Volar) * Id: Vue.volar * Description: Language support for Vue 3 * Version: 0.40.13 * Publisher: Vue * VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Vue.volar * Name: Vue VSCode Snippets * Id: sdras.vue-vscode-snippets * Description: Snippets that will supercharge your Vue workflow * Version: 3.1.1 * Publisher: sarah.drasner * VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets ## Menu Struct ### 모바일(공통) * 로그인 (views/common/LoginPage.vue) * 아이디 찾기 (views/common/modals/FindIdModal.vue) * 비밀번호 찾기 (views/common/modals/FindPwModal.vue) * 메인(홈) (views/common/HomePage.vue) ### 모바일(임직원) * 하자관리 * 하자작업지시 (views/po/PoDeftMangPage.vue - MO03010001U) * 하자작업지시 상세(views/po/PoDeftMangViewPage.vue - MO03010001U) * 하자조회 (views/po/PoDeftQuePage.vue - MO03020001U) * 하자조회 상세(views/po/PoDeftQueViewPage.vue - MO03020001U) * 회의실관리 * 회의실예약 (views/po/PoRoomRevPage.vue - MO01010001U) * 회의실예약승인 (views/po/PoRoomAppPage.vue - MO01020001) * 현장 주소록(views/common/SiteAddressPage.vue) * 현장 주소록 지도보기(views/common/modals/SiteAddressMapModal.vue) ### 모바일(협력업체) * 하자관리 * 하자처리 (views/as/AsDeftIngPage.vue - MO02010001U) * 하자처리 상세 (views/as/AsDeftIngViewPage.vue - MO02010001U) * 하자완료조회 (views/as/AsDeftDonePage.vue - MO02020001U) * 하자완료조회 상세(views/as/AsDeftDoneViewPage.vue - MO02020001U) ## SRC File Struct ```text mobile-src/src/ ├── App.vue ├── assets │ ├── SGC-CI.svg (로그인 페이지 하단 로고) │ ├── SGC.svg (페이지 홈 로고) │ ├── calendar-number-outline.svg (날자 선택 우측 아이콘) │ ├── checkmark-circle-outline.svg (라디오 박스) │ ├── checkmark-outline.svg (체크박스) │ ├── mobile-main-01.svg (홈 하자 권한이 없을 경우 대체 이미지) │ └── mobile-main.svg (홈 하자 권한이 없을 경우 대체 이미지) ├── main.ts (메인 index - 진입시 작동됨) ├── registerServiceWorker.ts (Service Worker) ├── router │ └── index.ts (Router - 라우터 패스 정보 관리 및 권한 체크) ├── services │ ├── api.service.ts (Api Service - WAS 와 통신을 위한 서비스) │ ├── code.service.ts (Code Service for checkbox, radio, select) │ ├── common.interface.ts (Interfaces) │ ├── common.service.ts (Common Service - 공통 작업 서비스) │ ├── i18n.ts (Translate text for multi localization) │ ├── icon.ts (Icons - 페이지에서 사용되는 아이콘을 적재하고 있음) │ ├── index.ts │ ├── shared.service.ts (Shared Data Service for login info, site info etc) │ └── utils.service.ts (Template Util) ├── shims-vue.d.ts ├── theme │ ├── global.scss ( Global style) │ └── variables.css ( Css Color variables) └── views ├── as (협력업체) │ ├── AsDeftDonePage.vue (하자완료조회) │ ├── AsDeftDoneViewPage.vue (하자완료조회 상세) │ ├── AsDeftIngPage.vue (하자처리) │ ├── AsDeftIngViewPage.vue (하자처리 상세) │ └── modals │ └── index.ts ├── common │ ├── ErrorPage.vue (오류 페이지) │ ├── HomePage.vue (홈, 메인) │ ├── LoginPage.vue (로그인) │ ├── PushDevPage.vue (푸시 테스트) │ ├── SamplePage.vue (디자인 가이드) │ ├── SiteAddressPage.vue (현장 주소록) │ └── modals │ ├── DeftCustsignModal.vue (고객 서명 모달) │ ├── DeftElpsRegModal.vue (하자 경과 등록 모달) │ ├── DeftElpsSmsModal.vue (하자 작업 지시 SMS&PUSH 전송 모달) │ ├── DeftElpsViewModal.vue (하자 작업 지시 보기 모달) │ ├── DeftPhotoModal.vue (하자 이미지 보기 모달) │ ├── FindIdModal.vue (아이디 찾기 모달) │ ├── FindPwModal.vue (암호 찾기 모달) │ ├── SettingModal.vue (설정 모달) │ ├── SiteAddressMapModal.vue (현장 지도보기 모달) │ └── index.ts ├── components │ ├── SgcCheckbox.vue (체크 박스) │ ├── SgcConsole.vue (콘솔 로그) │ ├── SgcDatetime.vue (날자 선택) │ ├── SgcDatetimeRange.vue (기간 범위) │ ├── SgcHourRange.vue (시간 범위) │ ├── SgcItemInput.vue (아이템 입력) │ ├── SgcItemView.vue (아이템 보기) │ ├── SgcLoading.vue (페이지 로딩) │ ├── SgcModal.vue (모달 외곽 템플릿) │ ├── SgcPage.vue (페이지 외곽 템플릿) │ ├── SgcRadio.vue (라디오 박스) │ ├── SgcSearchId.vue (현장 검색) │ ├── SgcSelect.vue (콤보 박스) │ ├── index.ts │ └── modals │ └── SearchCovendModal.vue (현장 검색) └── po ├── PoDeftMangPage.vue (하자작업지시) ├── PoDeftMangViewPage.vue (하자작업지시 상세) ├── PoDeftQuePage.vue (하자조회및완료처리) ├── PoDeftQueViewPage.vue (하자조회및완료처리 상세) ├── PoRoomAppPage.vue (회의실예약승인) ├── PoRoomRevPage.vue (회의실예약) └── modals ├── PoRoomRevRegModal.vue (회의실예약) ├── PoRoomRevViewModal.vue (회의실예약 상세) └── index.ts ``` ## Public File Struct ```text mobile-src/public/ ├── firebase-messaging-sw.js (구글 파이어 베이스 푸시 알림 정보) ├── img │ └── icons (어플 아이콘) │ ├── android-chrome-144x144.png (어플 아이콘) │ ├── android-chrome-167x167.png (어플 아이콘) │ ├── android-chrome-180x180.png (어플 아이콘) │ ├── android-chrome-192x192.png (어플 아이콘) │ ├── android-chrome-20x20.png (어플 아이콘) │ ├── android-chrome-29x29.png (어플 아이콘) │ ├── android-chrome-40x40.png (어플 아이콘) │ ├── android-chrome-512x512.png (로딩 아이콘) │ ├── android-chrome-76x76.png (어플 아이콘) │ ├── android-chrome-maskable-192x192.png (어플 아이콘) │ ├── android-chrome-maskable-512x512.png (어플 아이콘) │ ├── favicon-16x16.png (파비콘) │ ├── favicon-20x20.png (파비콘) │ ├── favicon-32x32.png (파비콘) │ ├── favicon.ico (파비콘) │ ├── favicon.svg (파비콘) │ ├── icon-messages-27x20.png (푸시 메세지 아이콘) │ ├── icon-messages-54x40.png (푸시 메세지 아이콘) │ ├── icon-messages-81x60.png (푸시 메세지 아이콘) │ ├── icon-messages-96x96.png (푸시 메세지 아이콘) │ ├── marker_blue.png (현장 지도 마크 아이콘) │ ├── marker_gray.png (현장 지도 마크 아이콘) │ ├── marker_green.png (현장 지도 마크 아이콘) │ ├── marker_orange.png (현장 지도 마크 아이콘) │ ├── marker_purple.png (현장 지도 마크 아이콘) │ ├── marker_red.png (현장 지도 마크 아이콘) │ ├── marker_yellow.png (현장 지도 마크 아이콘) │ ├── menu-deftdone-96x96.png (어플 간편 진입 아이콘) │ ├── menu-defting-96x96.png (어플 간편 진입 아이콘) │ ├── menu-deftmang-96x96.png (어플 간편 진입 아이콘) │ ├── menu-deftque-96x96.png (어플 간편 진입 아이콘) │ ├── menu-home-96x96.png (어플 간편 진입 아이콘) │ ├── menu-roomapp-96x96.png (어플 간편 진입 아이콘) │ ├── menu-roomrev-96x96.png (어플 간편 진입 아이콘) │ └── safari-pinned-tab.svg (사파리 아이콘) └── index.html (메인 index) ```