diff --git a/.env b/.env new file mode 100644 index 000000000..6241bfbbd --- /dev/null +++ b/.env @@ -0,0 +1,6 @@ +FIREBASE_API_KEY = AIzaSyAaOxlvdJlsMMUZHDi325Y4SOUI2-wvO6U +FIREBASE_AUTH_DOMAIN = myplant-21025.firebaseapp.com +FIREBASE_PROJECT_ID = myplant-21025 +FIREBASE_STORAGE_BUCKET = myplant-21025.appspot.com +FIREBASE_MESSAGING_SENDER_ID = 258161978128 +FIREBASE_APP_ID = 1:258161978128:web:4228fd8ad30674909c5395 \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..a7dfb30e2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.DS_Store +.env \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6b665aaa0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/README.md b/README.md index b1efd6d14..e4f5c0277 100644 --- a/README.md +++ b/README.md @@ -1,50 +1,55 @@ +# 🪴 우리집 식물 관리 서비스 - 마이플랜트 🪴 -# :camera: 직원 사진 관리 서비스 - -직원들의 사진을 관리할 수 있는 사진 관리자 서비스를 만들어 보세요. - -과제 수행 및 리뷰 기간은 별도 공지를 참고하세요! -## [과제 수행 및 제출 방법] -1. 현재 저장소를 로컬에 클론(Clone)합니다. -2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름) -3. 자신의 본명 브랜치에서 과제를 수행합니다. -4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름) -5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름) -6. Pull Request 링크를 LMS로도 제출해 주셔야 합니다. -7. main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요! -8. Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요! -9. Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요! -10. 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요! - -## [필수 요구사항] -- “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요. -- 프로필 페이지를 개발하세요. -- 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요. -- 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요. -- 사진을 등록, 수정, 삭제가 가능해야 합니다. -- 유저 플로우를 제작하여 리드미에 추가하세요. -* CSS - * 애니메이션 구현 - * 상대수치 사용(rem, em) -* JavaScript - * DOM event 조작 - -## [선택 요구사항] -- 사진 관리 페이지와 관련된 기타 기능도 고려해 보세요. -- 페이지가 보여지기 전에 로딩 애니메이션이 보이도록 만들어보세요. -- 직원을 등록, 수정, 삭제가 가능하게 해보세요. -- 직원 검색 기능을 추가해 보세요. -- infinity scroll 기능을 추가해 보세요. -- 사진을 편집할 수 있는 기능을 추가해 보세요. -- LocalStorage 사용 +우리집에서 키우는 식물들의 정보를 쉽게 추가하고 관리할 수 있게 해주는 서비스입니다! +
+ +## [배포 링크] + +https:// +
+ +## 기술 스택 + + + + + + + + +## [필수 요구사항 - 구현 완료] + +✔️ Firebase 서비스를 이용하여 사진을 관리할 수 있는 페이지 구현 +✔️ 프로필 페이지 개발 +✔️ 스크롤이 가능한 형태의 리스팅 페이지 개발 +✔️ 전체 페이지 데스크탑-모바일 반응형 페이지를 개발 +✔️ 사진 등록, 수정, 삭제 기능 추가 +✔️ 유저 플로우를 제작하여 리드미에 추가 +✔️ CSS - 애니메이션 구현 & 상대수치 사용(rem, em) +✔️ JavaScript - DOM event 조작 +
+ +## [선택 요구사항 중 구현한 기능] + +✔️ 직원 등록, 수정, 삭제 기능 추가 + +## 아쉬운점 & 느낀점 + +- HTML, CSS 부터 먼저 완성한 뒤 Database 연결 작업을 시작했는데, 기존에 만들어져있던 무수한 클래스명과 각종 요소들을 다시 Firebase와 연결하는 과정에서 꽤나 애를 먹었다. 때문에 시간이 촉박하여 완전히 구현하지 못한 기능들도 많고 개인적으로 아쉬움이 많이 남는다. 이번 과제를 계기로 추후에는 DB 연결부터 먼저 해놓고 디자인을 시작하는게 훨씬 효율적일 것 같다. +- 구현하는 과정에서 아직 어려운 개념들이 너무 많다고 느껴졌고, 자바스크립트와 친해지기 위해서 앞으로도 부단히 노력해야겠다는 생각이 들었다. ## [화면 예시] -![111](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/f1afed4b-547e-4289-8e83-2f0fa188cccb) -![222](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/72f1ea35-8965-4050-9d0b-b9f27c933f64) +### 리스트 조회 + +!사진 +

+### 식물 정보 추가 / 수정 -## [흐름] -![333](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/44707a0e-6c5a-4d04-a6bd-58e46f02a9a9) +!사진 +

+## [유저플로우] +image diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 000000000..700479b9a --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,637 @@ +html { + font-size: 20px; +} + +body, +input, +button, +textarea { + font-family: "Gowun Batang", serif; + font-size: 15px; + background-color: #fffcf3; +} + +.mobile-sidebar { + display: none; +} + +@media screen and (max-width: 430px) { + html, + body { + overflow-x: hidden; + height: 100%; + font-size: 13px; + } + + input { + font-size: 1.2em; + } + + .header { + position: relative; + margin: 0 auto; + z-index: 0; + } + + .header__title span { + font-size: 2rem !important; + white-space: nowrap; + } + + .header__myinfo { + position: absolute; + top: -7rem; + right: -3rem; + z-index: 1; + } + .header__myinfo span, + .header__myinfo a, + .header__myinfo-sub { + width: 90%; + font-size: 0.9em; + } + + .header__myinfo-deco img { + position: absolute; + width: 60vw; + top: 6rem; + right: 3rem; + } + .list__util-search { + position: absolute; + top: -3em; + left: 0; + width: 0.7em; + z-index: 2; + } + .list__util-search input { + font-size: 0.95em; + } + + .btn-regi { + position: absolute; + top: -3em; + right: 0; + } + .btn-edit { + color: #000; + } + + .btn-delete { + color: #000; + } + + .mobile-sidebar { + display: block; + } + + .mobile-btn-totop { + display: block; + position: fixed; + bottom: 0rem; + right: 0rem; + z-index: 999; + } + .mobile-button { + border: 0px; + } + + .mobile-button img { + width: 3em; + height: auto; + } + + .list__actual { + background-image: url("/assets/images/bg_bot.png"); + background-repeat: no-repeat; + border: 1px dashed #c8c8c8; + border-radius: 20px; + max-width: 100vw; + height: 100vh; + z-index: 0; + margin-left: 0.2em; + margin-right: 0.2em; + } + + .list__actual th:nth-child(4), + .list__actual th:nth-child(5), + .list__actual td:nth-child(4), + .list__actual td:nth-child(5) { + display: none; + } + + /* Adjust the remaining columns' widths */ + .list__actual th, + .list__actual td { + width: calc( + (100% - 2 * 4%) / 4 + ); /* Assuming there are 4 columns remaining */ + } + + /* Styles for modal container */ + .modal { + display: none; + position: fixed; + top: 20%; + left: 15%; + max-width: 70vw; + justify-content: space-between; + } + + /* Styles for modal content */ + .modal-content { + background-color: #f7efd2; + background-image: url("/assets/images/register_bg.png"); + background-repeat: no-repeat; + border-radius: 8px; + } + + .modal-content span { + background-color: rgba(255, 229, 116, 0.8); + font-size: 2.1em; + font-weight: 500; + font-style: italic; + writing-mode: vertical-rl; + padding: 0.2em; + } + + .modal-form { + text-align: right; + padding: 1em; + } + + .modal-form label { + line-height: 0.8em; + background-color: rgba(255, 255, 255, 0.7); + font-size: 1.1em; + } + + .modal-form input, + .modal-form textarea { + border: 1px solid #c8c8c8; + font-size: 1.1em; + } + .modal-form textarea { + font-size: 1.1em; + } +} + +.header { + background-image: url(/assets/images/bg_top.png); + max-width: 100%; + height: 253px; + object-fit: cover; + margin: 0 auto; + display: flex; + justify-content: space-evenly; + align-items: center; +} + +.header__title { + padding: 15px; + margin: 0 0 0 -10px; + position: relative; + z-index: 0; +} + +.header__title span { + display: block; + font-size: 1.4rem; + font-weight: 600; + color: #343434; + letter-spacing: -1.5px; + rotate: -2.5deg; +} + +.header__title-deco { + position: absolute; + float: left; + top: -25px; + left: -70px; + z-index: -1; +} + +.header__myinfo { + display: flex; + flex-direction: column; + padding: 1.2em; + margin-right: 4rem; + position: relative; + z-index: 2; +} + +.header__myinfo a { + text-decoration: underline; + font-size: 1.3em; + color: #000000; +} + +.header__myinfo a:hover { + color: #6f9605; + transition: color 0.1s; +} + +.header__myinfo:hover .header__myinfo-sub { + height: 50px; + opacity: 1; + z-index: 1; + background-color: #fff; +} + +.header__myinfo-sub { + display: flex; + flex-direction: column; + width: 60%; + position: absolute; + top: 90%; + left: 0; + opacity: 0; + transition: ease-out 0.1s; + z-index: -2; + margin-left: 15px; + background-color: #fff; +} + +.header__myinfo-sub ul li { + margin-left: 10px; + margin-bottom: 5px; +} + +.header__myinfo-sub ul li a { + text-decoration: none; + font-size: 0.9em; + letter-spacing: -0.5px; +} + +.header__myinfo-sub ul li img { + width: 16px; + height: 16px; + margin-right: 5px; +} + +.header__myinfo-deco { + position: absolute; + float: right; + top: -1rem; + right: -7rem; + z-index: -1; + opacity: 0.8; + pointer-events: none; +} + +.list { + display: flex; + flex-direction: column; + position: relative; + justify-content: center; + align-items: center; +} + +.list__util { + width: 70vw; + height: auto; + border-radius: 50px; + margin: 0 auto; + display: flex; + flex-direction: row; + justify-content: center; +} + +/* 검색창 스타일링 */ +.list__util-search .form { + --input-text-color: #505050; + --input-bg-color: #fff; + --focus-input-bg-color: #fff; + --text-color: #949faa; + --active-color: #89b806; + --width-of-input: 16em; + --inline-padding-of-input: 0.7em; + --gap: 0.9em; +} +/* form style */ +.list__util-search .form { + font-size: 1.1em; + display: flex; + gap: 0.5rem; + border-bottom: 1px solid #c8c8c8; + margin-right: 2em; + align-items: center; + width: var(--width-of-input); + position: relative; +} +/* a fancy bg for showing background and border when focus. */ +.list__util-search .fancy-bg { + position: absolute; + width: 100%; + inset: 0; + background: var(--input-bg-color); + height: 100%; + z-index: -1; + pointer-events: none; +} +/* label styling */ +.list__util-search label { + width: 100%; + padding: 0.2em; + height: 30px; + padding-inline: var(--inline-padding-of-input); + display: flex; + align-items: center; +} + +.list__util-search .search, +.list__util-search .close-btn { + position: absolute; +} +/* styling search-icon */ +.list__util-search .search { + fill: var(--text-color); + left: var(--inline-padding-of-input); +} +/* svg -- size */ +.list__util-search svg { + width: 17px; + display: block; + cursor: pointer; +} +/* styling of close button */ +.list__util-search .close-btn { + border: none; + right: var(--inline-padding-of-input); + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + padding: 0.1em; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #ff8585; + opacity: 0; + visibility: hidden; +} +/* styling of input */ +.list__util-search .input { + color: var(--input-text-color); + width: 100%; + margin-inline: min(2em, calc(var(--inline-padding-of-input) + var(--gap))); + background: none; + border: none; +} + +.list__util-search .input:focus { + outline: none; +} + +.list__util-search .input::placeholder { + color: var(--text-color); +} +/* input background change in focus */ +.list__util-search .input:focus ~ .fancy-bg { + border: 1px solid var(--active-color); + background: var(--focus-input-bg-color); +} +/* search icon color change in focus */ +.list__util-search .input:focus ~ .search { + fill: var(--active-color); +} +/* showing close button when typing */ +.list__util-search .input:valid ~ .close-btn { + opacity: 1; + visibility: visible; + transition: 0.2s; +} + +/* 추가 버튼*/ +.btn-regi { + width: 7rem; + font-size: 1.2em; + padding: 0.3em; + cursor: pointer; + background-color: #f2f2f2; + border: 1px solid #c8c8c8; + z-index: 2; +} + +.btn-regi:hover { + background-color: #c9e441; + border: 1px solid #c7d69e; + transition: background-color 0.3s; + transform: translateX(0.1em) translateY(0.1em); +} + +/* 수정 버튼 */ +.btn-edit { + width: 2.3rem; + font-size: 1em; + padding: 0.2em; + cursor: pointer; + background-color: #ffe167; + border: 1px solid #edd77d; +} + +.btn-edit:hover { + background: #fbcb0b; + border: 1px solid #fbcb0b; + transform: translateX(0.1em) translateY(0.1em); +} + +/* 삭제 버튼 */ +.btn-delete { + width: 2.3rem; + font-size: 1em; + padding: 0.2em; + cursor: pointer; + background-color: #ffa8a8; + border: 1px solid #ffa2a2; +} + +.btn-delete:hover { + background-color: #ff8888; + border: 1px solid #ff8888; + transform: translateX(0.1em) translateY(0.1em); +} + +.list__content { + max-width: 100%; + min-height: 440px; + border-radius: 50px; +} + +.list__actual { + background-image: url("/assets/images/bg_bot.png"); + background-repeat: no-repeat; + background-position: bottom; + border: 1px dashed #c8c8c8; + border-radius: 20px; + margin-top: 2em; + margin-bottom: 1.5em; + width: 800px; + height: auto; + position: relative; + z-index: 0; + overflow-x: hidden; +} + +.list__actual table { + width: 100%; + border-collapse: collapse; + background-color: rgba(255, 255, 255, 0.7); + table-layout: fixed; +} + +.list__actual th { + font-size: 1.2em; + height: 2em; + font-weight: 700; + background-color: #fcffe8; +} + +.list__actual th, +.list__actual td { + padding: 0.5em 0.5em 0.5em 0; + border-bottom: solid 1px #e2e2e2; + text-align: center; + vertical-align: middle; +} + +.list__actual td { + height: 4em; + font-size: 1.1em; +} + +.list__actual th:nth-child(1), +.list__actual td:nth-child(1) { + width: 20%; +} + +.list__actual th:nth-child(2), +.list__actual td:nth-child(2) { + width: 8%; +} + +.list__actual th:nth-child(5), +.list__actual td:nth-child(5) { + width: 20%; +} + +.list__actual th:nth-last-child(2), +.list__actual th:last-child, +.list__actual td:nth-last-child(2), +.list__actual td:last-child { + width: 6%; +} + +.plant-image { + width: 6rem; + height: 6rem; + border-radius: 15px; + border: 1px solid #e1e1e1; +} + +#printImage { + width: 8rem; + height: 8rem; + background-color: #fff; +} + +/* Styles for modal container */ +.modal { + display: none; + position: fixed; + margin: 0 0 10em 0; + width: auto; + height: auto; + justify-content: center; + align-items: center; + z-index: 9999; +} + +/* Styles for modal content */ +.modal-content { + background-color: #f7efd2; + background-image: url("/assets/images/register_bg.png"); + background-repeat: no-repeat; + padding: 20px; + border-radius: 8px; + box-shadow: 0px 6px 8px rgba(88, 88, 88, 0.14); + max-width: 100%; + width: 450px; + height: auto; + text-align: center; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.modal-content span { + background-color: rgba(255, 229, 116, 0.8); + font-size: 2.1em; + font-weight: 500; + font-style: italic; + writing-mode: vertical-rl; + padding: 0.2em; +} + +.modal-form { + text-align: right; + padding: 1em; +} + +.modal-form label { + line-height: 2em; + margin-right: 1em; +} + +.modal-form input, +.modal-form textarea { + border: 1px solid #c8c8c8; + width: 15em; +} + +.align-right { + float: right; +} + +.spacer { + height: 7em; +} +.save-button { + background-color: hsl(76, 100%, 87%); + border: 1px solid #c8c8c8; + font-size: 1.5em; + padding: 0.2em; + float: right; + cursor: pointer; +} +.save-button:hover { + transform: translateX(0.1em) translateY(0.1em); + background-color: hsl(76, 100%, 80%); +} +.close-button { + background-color: #fff5f5; + border: 1px solid #c8c8c8; + font-size: 1.5em; + padding: 0.2em; + margin-right: 0.5em; + float: right; + cursor: pointer; +} +.close-button:hover { + transform: translateX(0.1em) translateY(0.1em); + background-color: #ffe0e0; +} +/* Styles for the button */ +.button { + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.button:hover { + background-color: #0056b3; +} diff --git a/assets/css/reset.css b/assets/css/reset.css new file mode 100644 index 000000000..82935aece --- /dev/null +++ b/assets/css/reset.css @@ -0,0 +1,124 @@ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/assets/images/bg_bot.png b/assets/images/bg_bot.png new file mode 100644 index 000000000..a5bdd7d53 Binary files /dev/null and b/assets/images/bg_bot.png differ diff --git a/assets/images/bg_top.png b/assets/images/bg_top.png new file mode 100644 index 000000000..04683fdee Binary files /dev/null and b/assets/images/bg_top.png differ diff --git a/assets/images/default.png b/assets/images/default.png new file mode 100644 index 000000000..99f38c319 Binary files /dev/null and b/assets/images/default.png differ diff --git a/assets/images/detail_bg.png b/assets/images/detail_bg.png new file mode 100644 index 000000000..7c3eada9a Binary files /dev/null and b/assets/images/detail_bg.png differ diff --git a/assets/images/edit.png b/assets/images/edit.png new file mode 100644 index 000000000..cd7dd3db8 Binary files /dev/null and b/assets/images/edit.png differ diff --git a/assets/images/favicon.png b/assets/images/favicon.png new file mode 100644 index 000000000..39ed0dacd Binary files /dev/null and b/assets/images/favicon.png differ diff --git a/assets/images/infobg.png b/assets/images/infobg.png new file mode 100644 index 000000000..311bf4fd8 Binary files /dev/null and b/assets/images/infobg.png differ diff --git a/assets/images/item1.jpg b/assets/images/item1.jpg new file mode 100644 index 000000000..1238647d8 Binary files /dev/null and b/assets/images/item1.jpg differ diff --git a/assets/images/item2.jpeg b/assets/images/item2.jpeg new file mode 100644 index 000000000..a640fac56 Binary files /dev/null and b/assets/images/item2.jpeg differ diff --git a/assets/images/item3.jpg b/assets/images/item3.jpg new file mode 100644 index 000000000..41565b588 Binary files /dev/null and b/assets/images/item3.jpg differ diff --git a/assets/images/logout.png b/assets/images/logout.png new file mode 100644 index 000000000..dbe372392 Binary files /dev/null and b/assets/images/logout.png differ diff --git a/assets/images/myinfo.png b/assets/images/myinfo.png new file mode 100644 index 000000000..5968b67c0 Binary files /dev/null and b/assets/images/myinfo.png differ diff --git a/assets/images/register_bg.png b/assets/images/register_bg.png new file mode 100644 index 000000000..a820585ef Binary files /dev/null and b/assets/images/register_bg.png differ diff --git a/assets/images/tape.png b/assets/images/tape.png new file mode 100644 index 000000000..583e770af Binary files /dev/null and b/assets/images/tape.png differ diff --git a/assets/images/totop.png b/assets/images/totop.png new file mode 100644 index 000000000..4f8d627ff Binary files /dev/null and b/assets/images/totop.png differ diff --git a/assets/js/firebase.js b/assets/js/firebase.js new file mode 100644 index 000000000..60cf14730 --- /dev/null +++ b/assets/js/firebase.js @@ -0,0 +1,70 @@ +// Import the functions you need from the SDKs you need +import { initializeApp } from "https://www.gstatic.com/firebasejs/10.1.0/firebase-app.js"; +import { + getStorage, + ref, + uploadBytesResumable, + getDownloadURL, +} from "https://www.gstatic.com/firebasejs/10.1.0/firebase-storage.js"; +import { + getFirestore, + collection, + addDoc, + getDoc, + deleteDoc, + updateDoc, + onSnapshot, + doc, +} from "https://www.gstatic.com/firebasejs/10.1.0/firebase-firestore.js"; +// TODO: Add SDKs for Firebase products that you want to use +// https://firebase.google.com/docs/web/setup#available-libraries + +// Your web app's Firebase configuration +// const firebaseConfig = { +// apiKey: process.env.FIREBASE_API_KEY, +// authDomain: process.env.FIREBASE_AUTH_DOMAIN, +// projectId: process.env.FIREBASE_PROJECT_ID, +// storageBucket: process.env.FIREBASE_STORAGE_BUCKET, +// messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID, +// appId: process.env.FIREBASE_APP_ID, +// }; + +const firebaseConfig = { + apiKey: "AIzaSyAaOxlvdJlsMMUZHDi325Y4SOUI2-wvO6U", + authDomain: "myplant-21025.firebaseapp.com", + projectId: "myplant-21025", + storageBucket: "myplant-21025.appspot.com", + messagingSenderId: "258161978128", + appId: "1:258161978128:web:4228fd8ad30674909c5395", +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); +const db = getFirestore(); +const storage = getStorage(app); + +// CRUD CONTROL FUNCTION + +// SAVE +export const saveData = (image, name, date, waterTime, note) => { + addDoc(collection(db, "myplants"), { image, name, date, waterTime, note }); +}; + +// LIST +export const onGetData = (callback) => + onSnapshot(collection(db, "myplants"), callback); + +// DELETE +export const deleteData = (id) => deleteDoc(doc(db, "myplants", id)); + +// EDIT +export const getData = (id) => getDoc(doc(db, "myplants", id)); +export const updateData = (id, newInfo) => + updateDoc(doc(db, "myplants", id), newInfo); +//export const editData = (id) => (doc(db, 'myplants', id)) + +// UPLOAD FILE + +export const storageRef = (imageFile) => ref(storage, imageFile); +export const uploadTask = (storageRef, imageFile) => + uploadBytesResumable(storageRef, imageFile); diff --git a/assets/js/index.js b/assets/js/index.js new file mode 100644 index 000000000..cbb2d70b2 --- /dev/null +++ b/assets/js/index.js @@ -0,0 +1,258 @@ +// CALLING FUNCTIONS +import { + getStorage, + ref, + uploadBytesResumable, + getDownloadURL, +} from "https://www.gstatic.com/firebasejs/10.1.0/firebase-storage.js"; +import { + saveData, + onGetData, + deleteData, + getData, + updateData, + storageRef, + uploadTask, +} from "./firebase.js"; + +const plantsForm = document.getElementById("plants-form"); +const plantsDataContainer = document.getElementById("plants-data-container"); +const table = document.querySelector(".list__actual table"); + +// Handle image upload form submission +const imageInput = document.getElementById("imageInput"); +const imageContainer = document.getElementById("imageContainer"); +const progress = document.getElementById("progress"); + +let editStatus = false; +let id = ""; //db ID for elements + +function searchPlant() { + // Declare variables + let input, filter, table, tr, td, i, txtValue; + input = document.getElementById("searchBar"); + filter = input.value.toUpperCase(); + table = document.querySelector(".list__actual table"); + tr = table.getElementsByTagName("tr"); + + // Loop through all table rows, and hide those that don't match the search query + for (i = 0; i < tr.length; i++) { + td = tr[i].getElementsByTagName("td")[1]; // Index 1 corresponds to the "이름" column + if (td) { + txtValue = td.textContent || td.innerText; + console.log("Works well"); + if (txtValue.toUpperCase().indexOf(filter) > -1) { + tr[i].style.display = ""; + } else { + tr[i].style.display = "none"; + } + } + } +} +// Open modal when "추가" button is clicked +const openModalButton = document.querySelector(".btn-regi"); +openModalButton.addEventListener("click", () => { + // Clear form data and reset edit status + document.getElementById("printImage").src = "/assets/images/default.png"; + plantsForm.reset(); + editStatus = false; + id = ""; + plantsForm["btn-data-save"].innerText = "추가"; + + // Open the modal + document.getElementById("myModal").style.display = "block"; +}); + +// Close modal when "닫기" button is clicked +const closeModalButton = document.querySelector(".close-button"); +closeModalButton.addEventListener("click", () => { + document.getElementById("myModal").style.display = "none"; + plantsForm.reset(); +}); + +//LIST +window.addEventListener("DOMContentLoaded", async () => { + //GET DATA + onGetData((querySnapshot) => { + // list all the data in a div container with inner html + let html = ""; + querySnapshot.forEach((doc) => { + const plantData = { id: doc.id, ...doc.data() }; + html += ` +
+ + + + + + + + + + +
${plantData.name}${plantData.date}${plantData.waterTime}${plantData.note}
+
+ `; + }); + // contains all the elementes + plantsDataContainer.innerHTML = html; + + // DELETE BUTTON + //object with all the buttons + const btnsDelete = plantsDataContainer.querySelectorAll(".btn-delete"); + //select the specific button for DELETE + btnsDelete.forEach((btn) => { + btn.addEventListener("click", ({ target: { dataset } }) => { + const confirmed = confirm("정말 삭제하시겠어요?"); + if (confirmed) { + deleteData(dataset.id); + } + }); + }); + + //EDIT BUTTON + const btnsEdit = plantsDataContainer.querySelectorAll(".btn-edit"); + btnsEdit.forEach((btn) => { + btn.addEventListener("click", async ({ target: { dataset } }) => { + const doc = await getData(dataset.id); + const data = { id: doc.id, ...doc.data() }; + openEditModal(data); + }); + }); + + // Function to open modal and pre-fill with data + function openEditModal(data) { + const imgSrc = document.getElementById("printImage"); + imgSrc.src = data.image; + plantsForm["name-data"].value = data.name; + plantsForm["date-data"].value = data.date; + plantsForm["water-time-data"].value = data.waterTime; + plantsForm["note-data"].value = data.note; + editStatus = true; + id = data.id; + plantsForm["btn-data-save"].innerText = "수정"; + // Open the modal + document.getElementById("myModal").style.display = "block"; + } + + // SAVE + plantsForm.addEventListener("submit", async (e) => { + e.preventDefault(); + + const name = plantsForm["name-data"]; + const date = plantsForm["date-data"]; + const waterTime = plantsForm["water-time-data"]; + const note = plantsForm["note-data"]; + + // Validation process for inputs + const validateInputs = [ + { name: "이름", element: name }, + { name: "날짜", element: date }, + ]; + + // Loop through the fields and perform validation + for (const name of validateInputs) { + if (!name.element.value) { + alert(`${name.name}은(는) 필수 입력 항목입니다.`); + return; + } + } + + //IMAGE SAVING + const imageFile = imageInput.files[0]; + + if (!imageFile) { + if (editStatus) { + updateData(id, { + name: name.value, + date: date.value, + waterTime: waterTime.value, + note: note.value, + }); + editStatus = false; + + return; + } + alert("이미지를 추가하세요."); + console.log("no image"); + return; + } + + const imageStorageRef = storageRef(imageFile.name); + const imageUploadTask = uploadTask(imageStorageRef, imageFile); + + imageUploadTask.on( + "state_changed", + (snapshot) => { + const percent = + (snapshot.bytesTransferred / snapshot.totalBytes) * 100; + progress.textContent = `Uploading: ${percent.toFixed(2)}%`; + }, + (error) => { + console.error("Error uploading image:", error); + }, + async () => { + progress.textContent = "Upload Complete!"; + const downloadURL = await getDownloadURL( + imageUploadTask.snapshot.ref + ); + //DATA SAVING + const image = downloadURL; + const name = plantsForm["name-data"]; + const date = plantsForm["date-data"]; + const waterTime = plantsForm["water-time-data"]; + const note = plantsForm["note-data"]; + + if (!editStatus) { + saveData( + image, + name.value, + date.value, + waterTime.value, + note.value + ); + alert("저장되었습니다!"); + document.getElementById("myModal").style.display = "none"; + // Add a new row to the table + const newRow = document.createElement("tr"); + newRow.innerHTML = ` + + ${name.value} + ${date.value} + ${waterTime.value} + ${note.value} + + + `; + table.appendChild(newRow); + } else { + updateData(id, { + image: image, + name: name.value, + date: date.value, + waterTime: waterTime.value, + note: note.value, + }); + editStatus = false; + plantsForm["btn-data-save"].innerText = "저장"; + + // Update the edited row in the table + const editedRow = table.querySelector(`tr[data-id="${doc.id}"]`); + if (editedRow) { + editedRow.innerHTML = ` + + ${name.value} + ${date.value} + ${waterTime.value} + ${note.value} + + + `; + } + } + } + ); + }); + plantsForm.reset(); + }); +}); diff --git a/index.html b/index.html new file mode 100644 index 000000000..0f9dfd98b --- /dev/null +++ b/index.html @@ -0,0 +1,199 @@ + + + + + + + 우리집 식물 친구 관리 + + + + + + + + + +
+
+
+
+ title +
+ 우리집 식물 친구 관리 +
+
+
+ myinfo +
+ 관리자 님, 환영합니다. +
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+ + +
+ +
+
+ + + + + + + + + + +
사진이름데려온 날짜물주기 간격메모  
+
+
+
+ + + +
+
+ + diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json new file mode 100644 index 000000000..4b9af84ca --- /dev/null +++ b/node_modules/.package-lock.json @@ -0,0 +1,18 @@ +{ + "name": "Y_FE_JAVASCRIPT_PICTURE", + "lockfileVersion": 3, + "requires": true, + "packages": { + "node_modules/dotenv": { + "version": "16.3.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz", + "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/motdotla/dotenv?sponsor=1" + } + } + } +} diff --git a/node_modules/dotenv/CHANGELOG.md b/node_modules/dotenv/CHANGELOG.md new file mode 100644 index 000000000..c15fd30c7 --- /dev/null +++ b/node_modules/dotenv/CHANGELOG.md @@ -0,0 +1,431 @@ +# Changelog + +All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. + +## [Unreleased](https://github.com/motdotla/dotenv/compare/v16.3.1...master) + +## [16.3.1](https://github.com/motdotla/dotenv/compare/v16.3.0...v16.3.1) (2023-06-17) + +### Added + +- Add missing type definitions for `processEnv` and `DOTENV_KEY` options. [#756](https://github.com/motdotla/dotenv/pull/756) + +## [16.3.0](https://github.com/motdotla/dotenv/compare/v16.2.0...v16.3.0) (2023-06-16) + +### Added + +- Optionally pass `DOTENV_KEY` to options rather than relying on `process.env.DOTENV_KEY`. Defaults to `process.env.DOTENV_KEY` [#754](https://github.com/motdotla/dotenv/pull/754) + +## [16.2.0](https://github.com/motdotla/dotenv/compare/v16.1.4...v16.2.0) (2023-06-15) + +### Added + +- Optionally write to your own target object rather than `process.env`. Defaults to `process.env`. [#753](https://github.com/motdotla/dotenv/pull/753) +- Add import type URL to types file [#751](https://github.com/motdotla/dotenv/pull/751) + +## [16.1.4](https://github.com/motdotla/dotenv/compare/v16.1.3...v16.1.4) (2023-06-04) + +### Added + +- Added `.github/` to `.npmignore` [#747](https://github.com/motdotla/dotenv/pull/747) + +## [16.1.3](https://github.com/motdotla/dotenv/compare/v16.1.2...v16.1.3) (2023-05-31) + +### Removed + +- Removed `browser` keys for `path`, `os`, and `crypto` in package.json. These were set to false incorrectly as of 16.1. Instead, if using dotenv on the front-end make sure to include polyfills for `path`, `os`, and `crypto`. [node-polyfill-webpack-plugin](https://github.com/Richienb/node-polyfill-webpack-plugin) provides these. + +## [16.1.2](https://github.com/motdotla/dotenv/compare/v16.1.1...v16.1.2) (2023-05-31) + +### Changed + +- Exposed private function `_configDotenv` as `configDotenv`. [#744](https://github.com/motdotla/dotenv/pull/744) + +## [16.1.1](https://github.com/motdotla/dotenv/compare/v16.1.0...v16.1.1) (2023-05-30) + +### Added + +- Added type definition for `decrypt` function + +### Changed + +- Fixed `{crypto: false}` in `packageJson.browser` + +## [16.1.0](https://github.com/motdotla/dotenv/compare/v16.0.3...v16.1.0) (2023-05-30) + +### Added + +- Add `populate` convenience method [#733](https://github.com/motdotla/dotenv/pull/733) +- Accept URL as path option [#720](https://github.com/motdotla/dotenv/pull/720) +- Add dotenv to `npm fund` command +- Spanish language README [#698](https://github.com/motdotla/dotenv/pull/698) +- Add `.env.vault` support. 🎉 ([#730](https://github.com/motdotla/dotenv/pull/730)) + +ℹ️ `.env.vault` extends the `.env` file format standard with a localized encrypted vault file. Package it securely with your production code deploys. It's cloud agnostic so that you can deploy your secrets anywhere – without [risky third-party integrations](https://techcrunch.com/2023/01/05/circleci-breach/). [read more](https://github.com/motdotla/dotenv#-deploying) + +### Changed + +- Fixed "cannot resolve 'fs'" error on tools like Replit [#693](https://github.com/motdotla/dotenv/pull/693) + +## [16.0.3](https://github.com/motdotla/dotenv/compare/v16.0.2...v16.0.3) (2022-09-29) + +### Changed + +- Added library version to debug logs ([#682](https://github.com/motdotla/dotenv/pull/682)) + +## [16.0.2](https://github.com/motdotla/dotenv/compare/v16.0.1...v16.0.2) (2022-08-30) + +### Added + +- Export `env-options.js` and `cli-options.js` in package.json for use with downstream [dotenv-expand](https://github.com/motdotla/dotenv-expand) module + +## [16.0.1](https://github.com/motdotla/dotenv/compare/v16.0.0...v16.0.1) (2022-05-10) + +### Changed + +- Minor README clarifications +- Development ONLY: updated devDependencies as recommended for development only security risks ([#658](https://github.com/motdotla/dotenv/pull/658)) + +## [16.0.0](https://github.com/motdotla/dotenv/compare/v15.0.1...v16.0.0) (2022-02-02) + +### Added + +- _Breaking:_ Backtick support 🎉 ([#615](https://github.com/motdotla/dotenv/pull/615)) + +If you had values containing the backtick character, please quote those values with either single or double quotes. + +## [15.0.1](https://github.com/motdotla/dotenv/compare/v15.0.0...v15.0.1) (2022-02-02) + +### Changed + +- Properly parse empty single or double quoted values 🐞 ([#614](https://github.com/motdotla/dotenv/pull/614)) + +## [15.0.0](https://github.com/motdotla/dotenv/compare/v14.3.2...v15.0.0) (2022-01-31) + +`v15.0.0` is a major new release with some important breaking changes. + +### Added + +- _Breaking:_ Multiline parsing support (just works. no need for the flag.) + +### Changed + +- _Breaking:_ `#` marks the beginning of a comment (UNLESS the value is wrapped in quotes. Please update your `.env` files to wrap in quotes any values containing `#`. For example: `SECRET_HASH="something-with-a-#-hash"`). + +..Understandably, (as some teams have noted) this is tedious to do across the entire team. To make it less tedious, we recommend using [dotenv cli](https://github.com/dotenv-org/cli) going forward. It's an optional plugin that will keep your `.env` files in sync between machines, environments, or team members. + +### Removed + +- _Breaking:_ Remove multiline option (just works out of the box now. no need for the flag.) + +## [14.3.2](https://github.com/motdotla/dotenv/compare/v14.3.1...v14.3.2) (2022-01-25) + +### Changed + +- Preserve backwards compatibility on values containing `#` 🐞 ([#603](https://github.com/motdotla/dotenv/pull/603)) + +## [14.3.1](https://github.com/motdotla/dotenv/compare/v14.3.0...v14.3.1) (2022-01-25) + +### Changed + +- Preserve backwards compatibility on exports by re-introducing the prior in-place exports 🐞 ([#606](https://github.com/motdotla/dotenv/pull/606)) + +## [14.3.0](https://github.com/motdotla/dotenv/compare/v14.2.0...v14.3.0) (2022-01-24) + +### Added + +- Add `multiline` option 🎉 ([#486](https://github.com/motdotla/dotenv/pull/486)) + +## [14.2.0](https://github.com/motdotla/dotenv/compare/v14.1.1...v14.2.0) (2022-01-17) + +### Added + +- Add `dotenv_config_override` cli option +- Add `DOTENV_CONFIG_OVERRIDE` command line env option + +## [14.1.1](https://github.com/motdotla/dotenv/compare/v14.1.0...v14.1.1) (2022-01-17) + +### Added + +- Add React gotcha to FAQ on README + +## [14.1.0](https://github.com/motdotla/dotenv/compare/v14.0.1...v14.1.0) (2022-01-17) + +### Added + +- Add `override` option 🎉 ([#595](https://github.com/motdotla/dotenv/pull/595)) + +## [14.0.1](https://github.com/motdotla/dotenv/compare/v14.0.0...v14.0.1) (2022-01-16) + +### Added + +- Log error on failure to load `.env` file ([#594](https://github.com/motdotla/dotenv/pull/594)) + +## [14.0.0](https://github.com/motdotla/dotenv/compare/v13.0.1...v14.0.0) (2022-01-16) + +### Added + +- _Breaking:_ Support inline comments for the parser 🎉 ([#568](https://github.com/motdotla/dotenv/pull/568)) + +## [13.0.1](https://github.com/motdotla/dotenv/compare/v13.0.0...v13.0.1) (2022-01-16) + +### Changed + +* Hide comments and newlines from debug output ([#404](https://github.com/motdotla/dotenv/pull/404)) + +## [13.0.0](https://github.com/motdotla/dotenv/compare/v12.0.4...v13.0.0) (2022-01-16) + +### Added + +* _Breaking:_ Add type file for `config.js` ([#539](https://github.com/motdotla/dotenv/pull/539)) + +## [12.0.4](https://github.com/motdotla/dotenv/compare/v12.0.3...v12.0.4) (2022-01-16) + +### Changed + +* README updates +* Minor order adjustment to package json format + +## [12.0.3](https://github.com/motdotla/dotenv/compare/v12.0.2...v12.0.3) (2022-01-15) + +### Changed + +* Simplified jsdoc for consistency across editors + +## [12.0.2](https://github.com/motdotla/dotenv/compare/v12.0.1...v12.0.2) (2022-01-15) + +### Changed + +* Improve embedded jsdoc type documentation + +## [12.0.1](https://github.com/motdotla/dotenv/compare/v12.0.0...v12.0.1) (2022-01-15) + +### Changed + +* README updates and clarifications + +## [12.0.0](https://github.com/motdotla/dotenv/compare/v11.0.0...v12.0.0) (2022-01-15) + +### Removed + +- _Breaking:_ drop support for Flow static type checker ([#584](https://github.com/motdotla/dotenv/pull/584)) + +### Changed + +- Move types/index.d.ts to lib/main.d.ts ([#585](https://github.com/motdotla/dotenv/pull/585)) +- Typescript cleanup ([#587](https://github.com/motdotla/dotenv/pull/587)) +- Explicit typescript inclusion in package.json ([#566](https://github.com/motdotla/dotenv/pull/566)) + +## [11.0.0](https://github.com/motdotla/dotenv/compare/v10.0.0...v11.0.0) (2022-01-11) + +### Changed + +- _Breaking:_ drop support for Node v10 ([#558](https://github.com/motdotla/dotenv/pull/558)) +- Patch debug option ([#550](https://github.com/motdotla/dotenv/pull/550)) + +## [10.0.0](https://github.com/motdotla/dotenv/compare/v9.0.2...v10.0.0) (2021-05-20) + +### Added + +- Add generic support to parse function +- Allow for import "dotenv/config.js" +- Add support to resolve home directory in path via ~ + +## [9.0.2](https://github.com/motdotla/dotenv/compare/v9.0.1...v9.0.2) (2021-05-10) + +### Changed + +- Support windows newlines with debug mode + +## [9.0.1](https://github.com/motdotla/dotenv/compare/v9.0.0...v9.0.1) (2021-05-08) + +### Changed + +- Updates to README + +## [9.0.0](https://github.com/motdotla/dotenv/compare/v8.6.0...v9.0.0) (2021-05-05) + +### Changed + +- _Breaking:_ drop support for Node v8 + +## [8.6.0](https://github.com/motdotla/dotenv/compare/v8.5.1...v8.6.0) (2021-05-05) + +### Added + +- define package.json in exports + +## [8.5.1](https://github.com/motdotla/dotenv/compare/v8.5.0...v8.5.1) (2021-05-05) + +### Changed + +- updated dev dependencies via npm audit + +## [8.5.0](https://github.com/motdotla/dotenv/compare/v8.4.0...v8.5.0) (2021-05-05) + +### Added + +- allow for `import "dotenv/config"` + +## [8.4.0](https://github.com/motdotla/dotenv/compare/v8.3.0...v8.4.0) (2021-05-05) + +### Changed + +- point to exact types file to work with VS Code + +## [8.3.0](https://github.com/motdotla/dotenv/compare/v8.2.0...v8.3.0) (2021-05-05) + +### Changed + +- _Breaking:_ drop support for Node v8 (mistake to be released as minor bump. later bumped to 9.0.0. see above.) + +## [8.2.0](https://github.com/motdotla/dotenv/compare/v8.1.0...v8.2.0) (2019-10-16) + +### Added + +- TypeScript types + +## [8.1.0](https://github.com/motdotla/dotenv/compare/v8.0.0...v8.1.0) (2019-08-18) + +### Changed + +- _Breaking:_ drop support for Node v6 ([#392](https://github.com/motdotla/dotenv/issues/392)) + +# [8.0.0](https://github.com/motdotla/dotenv/compare/v7.0.0...v8.0.0) (2019-05-02) + +### Changed + +- _Breaking:_ drop support for Node v6 ([#302](https://github.com/motdotla/dotenv/issues/392)) + +## [7.0.0] - 2019-03-12 + +### Fixed + +- Fix removing unbalanced quotes ([#376](https://github.com/motdotla/dotenv/pull/376)) + +### Removed + +- Removed `load` alias for `config` for consistency throughout code and documentation. + +## [6.2.0] - 2018-12-03 + +### Added + +- Support preload configuration via environment variables ([#351](https://github.com/motdotla/dotenv/issues/351)) + +## [6.1.0] - 2018-10-08 + +### Added + +- `debug` option for `config` and `parse` methods will turn on logging + +## [6.0.0] - 2018-06-02 + +### Changed + +- _Breaking:_ drop support for Node v4 ([#304](https://github.com/motdotla/dotenv/pull/304)) + +## [5.0.0] - 2018-01-29 + +### Added + +- Testing against Node v8 and v9 +- Documentation on trim behavior of values +- Documentation on how to use with `import` + +### Changed + +- _Breaking_: default `path` is now `path.resolve(process.cwd(), '.env')` +- _Breaking_: does not write over keys already in `process.env` if the key has a falsy value +- using `const` and `let` instead of `var` + +### Removed + +- Testing against Node v7 + +## [4.0.0] - 2016-12-23 + +### Changed + +- Return Object with parsed content or error instead of false ([#165](https://github.com/motdotla/dotenv/pull/165)). + +### Removed + +- `verbose` option removed in favor of returning result. + +## [3.0.0] - 2016-12-20 + +### Added + +- `verbose` option will log any error messages. Off by default. +- parses email addresses correctly +- allow importing config method directly in ES6 + +### Changed + +- Suppress error messages by default ([#154](https://github.com/motdotla/dotenv/pull/154)) +- Ignoring more files for NPM to make package download smaller + +### Fixed + +- False positive test due to case-sensitive variable ([#124](https://github.com/motdotla/dotenv/pull/124)) + +### Removed + +- `silent` option removed in favor of `verbose` + +## [2.0.0] - 2016-01-20 + +### Added + +- CHANGELOG to ["make it easier for users and contributors to see precisely what notable changes have been made between each release"](http://keepachangelog.com/). Linked to from README +- LICENSE to be more explicit about what was defined in `package.json`. Linked to from README +- Testing nodejs v4 on travis-ci +- added examples of how to use dotenv in different ways +- return parsed object on success rather than boolean true + +### Changed + +- README has shorter description not referencing ruby gem since we don't have or want feature parity + +### Removed + +- Variable expansion and escaping so environment variables are encouraged to be fully orthogonal + +## [1.2.0] - 2015-06-20 + +### Added + +- Preload hook to require dotenv without including it in your code + +### Changed + +- clarified license to be "BSD-2-Clause" in `package.json` + +### Fixed + +- retain spaces in string vars + +## [1.1.0] - 2015-03-31 + +### Added + +- Silent option to silence `console.log` when `.env` missing + +## [1.0.0] - 2015-03-13 + +### Removed + +- support for multiple `.env` files. should always use one `.env` file for the current environment + +[7.0.0]: https://github.com/motdotla/dotenv/compare/v6.2.0...v7.0.0 +[6.2.0]: https://github.com/motdotla/dotenv/compare/v6.1.0...v6.2.0 +[6.1.0]: https://github.com/motdotla/dotenv/compare/v6.0.0...v6.1.0 +[6.0.0]: https://github.com/motdotla/dotenv/compare/v5.0.0...v6.0.0 +[5.0.0]: https://github.com/motdotla/dotenv/compare/v4.0.0...v5.0.0 +[4.0.0]: https://github.com/motdotla/dotenv/compare/v3.0.0...v4.0.0 +[3.0.0]: https://github.com/motdotla/dotenv/compare/v2.0.0...v3.0.0 +[2.0.0]: https://github.com/motdotla/dotenv/compare/v1.2.0...v2.0.0 +[1.2.0]: https://github.com/motdotla/dotenv/compare/v1.1.0...v1.2.0 +[1.1.0]: https://github.com/motdotla/dotenv/compare/v1.0.0...v1.1.0 +[1.0.0]: https://github.com/motdotla/dotenv/compare/v0.4.0...v1.0.0 diff --git a/node_modules/dotenv/LICENSE b/node_modules/dotenv/LICENSE new file mode 100644 index 000000000..c430ad8bd --- /dev/null +++ b/node_modules/dotenv/LICENSE @@ -0,0 +1,23 @@ +Copyright (c) 2015, Scott Motte +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE +FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL +DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR +SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER +CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/node_modules/dotenv/README-es.md b/node_modules/dotenv/README-es.md new file mode 100644 index 000000000..ad8be92ba --- /dev/null +++ b/node_modules/dotenv/README-es.md @@ -0,0 +1,442 @@ +
+ +

+ + Dotenv es apoyado por la comunidad. + +

+Gracias espaciales a: +
+
+ +
+ Warp +
+ Warp es una rápida e impresionante terminal basada en Rust, reinventado para funcionar como una aplicación moderna. +
+ Haga más en la CLI con edición de texto real, resultado básado en bloques, y busqueda de comandos de IA. +
+ +
+ +
+ Retool +
+ Retool ayuda a los desarrolladores a crear software interno personalizado, como aplicaciones CRUD y paneles de administración, realmente rápido. +
+ Construya Interfaces de Usuario de forma visual con componentes flexibles, conéctese a cualquier fuente de datos, y escriba lógica de negocio en JavaScript. +
+ +
+ +
+ WorkOS +
+ Su Apliación, Lista para la Empresa. +
+ Agrega Inicio de Sesión Único, Autenticación Multi-Factor, y mucho más, en minutos en lugar de meses. +
+ +
+
+
+
+
+ +
+ +# dotenv [![NPM version](https://img.shields.io/npm/v/dotenv.svg?style=flat-square)](https://www.npmjs.com/package/dotenv) + +dotenv + +Dotenv es un módulo de dependencia cero que carga las variables de entorno desde un archivo `.env` en [`process.env`](https://nodejs.org/docs/latest/api/process.html#process_process_env). El almacenamiento de la configuración del entorno separado del código está basado en la metodología [The Twelve-Factor App](http://12factor.net/config). + +[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/feross/standard) +[![LICENSE](https://img.shields.io/github/license/motdotla/dotenv.svg)](LICENSE) + +## Instalación + +```bash +# instalación local (recomendado) +npm install dotenv --save +``` + +O installación con yarn? `yarn add dotenv` + +## Uso + +Cree un archivo `.env` en la raíz de su proyecto: + +```dosini +S3_BUCKET="YOURS3BUCKET" +SECRET_KEY="YOURSECRETKEYGOESHERE" +``` + +Tan prónto como sea posible en su aplicación, importe y configure dotenv: + +```javascript +require('dotenv').config() +console.log(process.env) // elimine esto después que haya confirmado que esta funcionando +``` + +.. o usa ES6? + +```javascript +import * as dotenv from 'dotenv' // vea en https://github.com/motdotla/dotenv#como-uso-dotenv-con-import +// REVISAR LINK DE REFERENCIA DE IMPORTACIÓN +dotenv.config() +import express from 'express' +``` + +Eso es todo. `process.env` ahora tiene las claves y los valores que definiste en tu archivo `.env`: + +```javascript +require('dotenv').config() + +... + +s3.getBucketCors({Bucket: process.env.S3_BUCKET}, function(err, data) {}) +``` + +### Valores multilínea + +Si necesita variables de varias líneas, por ejemplo, claves privadas, ahora se admiten en la versión (`>= v15.0.0`) con saltos de línea: + +```dosini +PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY----- +... +Kh9NV... +... +-----END RSA PRIVATE KEY-----" +``` + +Alternativamente, puede usar comillas dobles y usar el carácter `\n`: + +```dosini +PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\nKh9NV...\n-----END RSA PRIVATE KEY-----\n" +``` + +### Comentarios + +Los comentarios pueden ser agregados en tu archivo o en la misma línea: + +```dosini +# This is a comment +SECRET_KEY=YOURSECRETKEYGOESHERE # comment +SECRET_HASH="something-with-a-#-hash" +``` + +Los comentarios comienzan donde existe un `#`, entonces, si su valor contiene un `#`, enciérrelo entre comillas. Este es un cambio importante desde la versión `>= v15.0.0` en adelante. + +### Análisis + +El motor que analiza el contenido de su archivo que contiene variables de entorno está disponible para su uso. Este Acepta una Cadena o un Búfer y devolverá un Objeto con las claves y los valores analizados. + +```javascript +const dotenv = require('dotenv') +const buf = Buffer.from('BASICO=basico') +const config = dotenv.parse(buf) // devolverá un objeto +console.log(typeof config, config) // objeto { BASICO : 'basico' } +``` + +### Precarga + +Puede usar el `--require` (`-r`) [opción de línea de comando](https://nodejs.org/api/cli.html#-r---require-module) para precargar dotenv. Al hacer esto, no necesita requerir ni cargar dotnev en el código de su aplicación. + +```bash +$ node -r dotenv/config tu_script.js +``` + +Las opciones de configuración a continuación se admiten como argumentos de línea de comandos en el formato `dotenv_config_