Skip to content

Commit 3132321

Browse files
marcmatiasmarcmatias
committed
WIP
1 parent 54211c3 commit 3132321

36 files changed

+2831
-144
lines changed

‎index.html‎

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,53 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link rel="stylesheet" href="./src/assets/css/style.css" />
7+
<link rel="icon" href="vite.svg" />
78
<title>Map Chart Table</title>
89
</head>
910
<body>
11+
<button class="glossary">glossary</button>
12+
<button class="about">about</button>
13+
<button class="about-vaccines">about vaccines</button>
14+
<button class="error-example">error example</button>
15+
<button class="extra">Extra filter button</button>
1016
<div id="app"></div>
11-
<!-- Main App -->
17+
18+
<!-- Import as file -->
19+
<!--
20+
<script src="./dist/mct-1.6.1.js"></script>
21+
<script>
22+
const dashboard = new MCT({ api: "http://localhost" });
23+
</script>
24+
-->
25+
26+
<!-- Import as module -->
27+
1228
<script type="module">
13-
import Mct from "./src/main.js";
14-
const dashboard = new Mct("http://localhost:5000/");
29+
import MCT from "./src/main.js";
30+
const dashboard = new MCT({ api: "http://localhost" });
31+
32+
document.querySelector(".glossary").addEventListener("click", () => {
33+
dashboard.genericModal("Glossário", "?slug=glossario-vacinabr")
34+
});
35+
36+
document.querySelector(".about").addEventListener("click", () => {
37+
dashboard.genericModal("Sobre", "?slug=sobre-vacinabr")
38+
});
39+
40+
document.querySelector(".about-vaccines").addEventListener("click", () => {
41+
dashboard.genericModal("Sobre Vacinas", "?slug=sobre-vacinas-vacinabr")
42+
});
43+
44+
document.querySelector(".error-example").addEventListener("click", () => {
45+
dashboard.genericModal("Error example", "?slug=anything")
46+
});
47+
48+
49+
dashboard.genericModalWithFilterButton("Extra filter button", "?slug=sobre-vacinabr")
50+
51+
document.querySelector(".extra").addEventListener("click", () => {
52+
dashboard.genericModal("Extra filter button", "?slug=sobre-vacinabr")
53+
});
1554
</script>
1655
</body>
1756
</html>

‎oldSrc/components/main-card.js‎

Lines changed: 0 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -83,146 +83,6 @@ export const mainCard = {
8383
mapTooltip.value = tooltip;
8484
};
8585

86-
const URLquery = { ...route.query };
87-
const removeQueryFromRouter = (key) => {
88-
delete URLquery[key];
89-
message.warning('URL contém valor inválido para filtragem')
90-
router.replace({ query: URLquery });
91-
}
92-
93-
const setStateFromUrl = () => {
94-
const formState = store.state.content.form
95-
const routeArgs = { ...route.query };
96-
const routerResult = {};
97-
const routerResultTabs = {};
98-
99-
if (!Object.keys(routeArgs).length) {
100-
return;
101-
}
102-
103-
for (const [key, value] of Object.entries(routeArgs)) {
104-
if (key === "sickImmunizer") {
105-
if (value.includes(",")) {
106-
const values = value.split(",")
107-
const sicks = formState["sicks"].map(el => el.value)
108-
const immunizers = formState["immunizers"].map(el => el.value)
109-
if (
110-
values.every(val => sicks.includes(val)) ||
111-
values.every(val => immunizers.includes(val))
112-
) {
113-
routerResult[key] = values;
114-
} else {
115-
removeQueryFromRouter(key);
116-
}
117-
} else if (
118-
formState["sicks"].some(el => el.value === value) ||
119-
formState["immunizers"].some(el => el.value === value)
120-
) {
121-
routerResult[key] = value;
122-
} else {
123-
removeQueryFromRouter(key);
124-
}
125-
} else if (key === "city") {
126-
// TODO: define if cities will be in URL state
127-
// const values = value.split(",")
128-
// const cities = formState["cities"].map(el => el.value)
129-
// if (values.every(val => cities.includes(val))) {
130-
// routerResult[key] = values;
131-
// } else {
132-
// removeQueryFromRouter(key);
133-
// }
134-
} else if (key === "local") {
135-
const values = value.split(",")
136-
const locals = formState["locals"].map(el => el.value)
137-
if (values.every(val => locals.includes(val))) {
138-
routerResult[key] = values;
139-
} else {
140-
removeQueryFromRouter(key);
141-
}
142-
} else if (key === "granularity") {
143-
formState["granularities"].some(el => el.value === value) ?
144-
routerResult[key] = value : removeQueryFromRouter(key);
145-
} else if (key === "dose") {
146-
formState["doses"].some(el => el.value === value) ?
147-
routerResult[key] = value : removeQueryFromRouter(key);
148-
} else if (key === "type") {
149-
formState["types"].some(el => el.value === value) ?
150-
routerResult[key] = value : removeQueryFromRouter(key);
151-
} else if (key === "tab") {
152-
["map", "chart", "table"].some(el => el === value) ?
153-
routerResultTabs[key] = value : removeQueryFromRouter(key);
154-
} else if (key === "tabBy") {
155-
["immunizers", "sicks"].some(el => el === value) ?
156-
routerResultTabs[key] = value : removeQueryFromRouter(key);
157-
} else if (["periodStart", "periodEnd"].includes(key)) {
158-
const resultValue = Number(value)
159-
formState["years"].some(el => el.value === resultValue) ?
160-
routerResult[key] = resultValue : removeQueryFromRouter(key);
161-
} else if (key === "period") {
162-
routerResult[key] = Number(value);
163-
} else if (value.includes(",")) {
164-
routerResult[key] = value.split(",");
165-
} else {
166-
routerResult[key] = value ?? null;
167-
}
168-
}
169-
170-
store.commit("content/UPDATE_FROM_URL", {
171-
tab: routerResultTabs?.tab ? routerResultTabs.tab : "map",
172-
tabBy: routerResultTabs?.tabBy ? routerResultTabs.tabBy : "sicks",
173-
form: { ...routerResult },
174-
});
175-
};
176-
177-
const setUrlFromState = () => {
178-
const routeArgs = { ...route.query };
179-
let stateResult = formatToApi({
180-
form: { ...store.state.content.form },
181-
tab: store.state.content.tab !== "map" ? store.state.content.tab : undefined,
182-
tabBy: store.state.content.tabBy !== "sicks" ? store.state.content.tabBy : undefined,
183-
});
184-
if (Array.isArray(stateResult.sickImmunizer) && stateResult.sickImmunizer.length) {
185-
stateResult.sickImmunizer = [...stateResult?.sickImmunizer].join(",");
186-
}
187-
if (Array.isArray(stateResult.local) && stateResult.local.length) {
188-
stateResult.local = [...stateResult?.local].join(",");
189-
}
190-
// TODO: define if cities will be in URL state
191-
// if (Array.isArray(stateResult.city) && stateResult.city.length) {
192-
// stateResult.city = [...stateResult?.city].join(",");
193-
// }
194-
delete stateResult.city
195-
196-
if (!JSON.stringify(routeArgs) == JSON.stringify(stateResult)) {
197-
return;
198-
}
199-
200-
return router.replace({ query: stateResult });
201-
}
202-
203-
watch(() => {
204-
const form = store.state.content.form;
205-
return [
206-
form.dose,
207-
form.granularity,
208-
form.granularity,
209-
form.local,
210-
form.period,
211-
form.periodEnd,
212-
form.periodStart,
213-
form.sickImmunizer,
214-
form.type,
215-
// TODO: define if cities will be in URL state
216-
// form.city,
217-
store.state.content.tab,
218-
store.state.content.tabBy
219-
]
220-
},
221-
async () => {
222-
setUrlFromState();
223-
}
224-
)
225-
22686
onMounted(async () => {
22787
getWindowWidth();
22888
await store.dispatch("content/updateFormSelect");

‎src/assets/css/base.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
:root {
2+
--body-color: rgba(0, 0, 0, 0.87);
3+
--text-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white;
4+
--gray-color: #ececec;
5+
--gray-color-light: #fafafa;
6+
--primary-color: #e96f5f;
7+
--label-color: #827e7e;
8+
--embed-color: #fafafa;
9+
10+
--padding-container: 200px;
11+
}
12+
13+
/* MediaQuery */
14+
15+
@media (max-width: 1368px) {
16+
:root {
17+
--padding-container: 20px;
18+
}
19+
}

‎src/assets/css/components/collapsable.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.n-collapse-item.n-collapse-item--left-arrow-placement {
2+
outline: 1px solid #e0e0e0;
3+
border: none;
4+
border-radius: 3px;
5+
padding: 8px;
6+
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 4px;
7+
}
8+
9+
.n-collapse
10+
.n-collapse-item
11+
.n-collapse-item__header
12+
.n-collapse-item__header-main {
13+
font-weight: 500;
14+
}
15+
16+
.n-collapse .n-collapse-item:not(:first-child) {
17+
border-top: none !important;
18+
}
19+
20+
.n-collapse .n-collapse-item .n-collapse-item__header {
21+
padding: 0px;
22+
}
23+
24+
.n-collapse .n-collapse-item__header-extra .bi {
25+
fill: var(--primary-color);
26+
}

‎src/assets/css/components/container.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* Components Styles */
2+
3+
.main {
4+
display: flex;
5+
flex-direction: column;
6+
}
7+
8+
.main-content {
9+
position: relative;
10+
max-width: 1368px;
11+
margin: 0px auto;
12+
padding: 0px 24px;
13+
}
14+
15+
.main-content--sub {
16+
margin-bottom: 64px;
17+
}
18+
19+
.container-elements {
20+
display: flex;
21+
justify-content: end;
22+
}
23+
24+
.container-elements--table {
25+
display: flex;
26+
gap: 12px;
27+
padding-bottom: 16px;
28+
}
29+
30+
.container-elements--theme {
31+
padding: 15px 65px;
32+
}
33+
34+
.container-elements__selects {
35+
display: flex;
36+
gap: 12px;
37+
}
38+
39+
.container-input-card {
40+
display: flex;
41+
gap: 8px;
42+
justify-content: end;
43+
}
44+
45+
.element-hidden {
46+
display: none !important;
47+
}
48+
49+
@media (max-width: 800px) {
50+
.container-elements--table {
51+
display: flex;
52+
flex-direction: column;
53+
gap: 8px;
54+
}
55+
.container-input-card {
56+
flex-direction: column;
57+
}
58+
}

‎src/assets/css/components/filter-suggestion.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.filter-suggestion {
2+
height: 100%;
3+
overflow-y: auto;
4+
position: absolute;
5+
top: 0;
6+
bottom: 0;
7+
left: 0;
8+
right: 0;
9+
display: flex;
10+
flex-direction: column;
11+
background-color: rgb(254, 254, 254);
12+
}
13+
14+
.filter-suggestion-center {
15+
justify-content: center;
16+
}
17+
18+
.filter-suggestion-title {
19+
text-align: center;
20+
font-size: 24px;
21+
padding-bottom: 48px;
22+
font-weight: 400;
23+
}
24+
25+
.filters-container {
26+
gap: 8px;
27+
display: grid;
28+
grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
29+
grid-gap: 10px;
30+
}
31+
32+
.filter-container-suggestion {
33+
overflow: hidden;
34+
}
35+
36+
.filter-title {
37+
height: 18px;
38+
}
39+
.filter-text-suggestion {
40+
text-align: initial;
41+
overflow: hidden;
42+
text-overflow: ellipsis;
43+
white-space: nowrap;
44+
}
45+
46+
.filter-description {
47+
font-size: 11px;
48+
height: 14px;
49+
}
50+
51+
/* MediaQuery */
52+
53+
@media (max-width: 1300px) {
54+
.filters-container {
55+
display: flex;
56+
flex-direction: column;
57+
}
58+
}
59+
60+
@media (max-width: 768px) {
61+
.filter-suggestion {
62+
display: block;
63+
}
64+
}

‎src/assets/css/components/label.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* Label */
2+
.n-form-item.n-form-item--top-labelled .n-form-item-label {
3+
align-items: center;
4+
padding: 0px;
5+
}
6+
7+
.n-form-item-label__text {
8+
color: var(--label-color);
9+
font-size: 0.65rem;
10+
}

‎src/assets/css/components/main-content.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.main-content {
2+
margin-top: 16px;
3+
}
4+
5+
.map-section {
6+
min-height: 520px;
7+
}
8+
9+
@media (max-width: 475px) {
10+
.map-section {
11+
min-height: 420px;
12+
}
13+
}

0 commit comments

Comments
 (0)