Skip to content

Commit

Permalink
Merge pull request #5 from avito-tech/other-changes
Browse files Browse the repository at this point in the history 
Other changes
  • Loading branch information
@vinokurov-and
vinokurov-and authored Feb 15, 2024
2 parents b9f0d07 + 0e2b18c commit fb09ccd
Show file tree
Hide file tree
Showing 2 changed files with 202 additions and 37 deletions.
238 changes: 201 additions & 37 deletions lib/report/assets/report.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@
}

main {
display: grid;
max-width: var(--width-container);
margin: 0 auto;
padding: 30px 95px;
Expand All @@ -123,6 +124,11 @@
min-height: calc(100vh - var(--height-header));
}

.period {
display: grid;
grid-template-rows: auto 1fr;
}

.period__panel {
padding: 28px 0 0 0;
display: flex;
Expand Down Expand Up @@ -291,7 +297,7 @@
line-height: 20px;
border: none;
width: 100%;
padding: 8px 10px 12px 16px;
padding: 9px 10px 11px 16px;
box-sizing: border-box;
}

Expand Down Expand Up @@ -381,6 +387,48 @@
}
</style>

<style>
@keyframes loading {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(360deg); }
}
.loading div {
position: absolute;
width: 60px;
height: 60px;
border: 10px solid #0099f7;
border-top-color: transparent;
border-radius: 50%;
}
.loading div {
animation: loading 1.3157894736842106s linear infinite;
top: 50px;
left: 50px
}
.loading-wrapper {
width: 58px;
height: 58px;
display: inline-block;
overflow: hidden;
background: none;
}
.loading {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(0.58);
backface-visibility: hidden;
transform-origin: 0 0;
}
.loading div { box-sizing: content-box; }
.loading-container {
justify-content: center;
align-items: center;
display: flex;
height: 100%;
}
</style>

<script>
window['data'] = { report: JSON.parse({{ .PayloadString }}) };
// window['data'] = { report: {total: 0, months: null}}
Expand Down Expand Up @@ -412,35 +460,37 @@
</header>
<main>
<div class="period">
<div class="period__header">
<h2 class="h10-style"><span id="total-label"></span> <span id="total-value"></span></h2>
</div>
<form class="period__panel" id="form-panel" action="">
<div class="period-left-part">
<div class="panel__fast-filter">
<button class="button" id="fast-filter-today">Сегодня</button>
<button class="button" id="fast-filter-yesterday">Вчера</button>
<button class="button" id="fast-filter-week">Неделя</button>
</div>
<div class="panel__period-filter">
<p class="m2-style">Выбрать период</p>
<div style="min-width: 202px;" class="date">
<input id="date" />
<input id="date-from" name="from" hidden />
<input id="date-to" name="to" hidden />
<div>
<div class="period__header">
<h2 class="h10-style"><span id="total-label"></span> <span id="total-value"></span></h2>
</div>
<form class="period__panel" id="form-panel" action="">
<div class="period-left-part">
<div class="panel__fast-filter">
<button class="button" id="fast-filter-today">Сегодня</button>
<button class="button" id="fast-filter-yesterday">Вчера</button>
<button class="button" id="fast-filter-week">Неделя</button>
</div>
<div class="panel__period-filter">
<p class="m2-style">Выбрать период</p>
<div style="min-width: 202px;" class="date">
<input id="date" />
<input id="date-from" name="from" hidden />
<input id="date-to" name="to" hidden />
</div>
</div>
</div>
</div>
<div class="panel__platform-filter">
<div style="min-width: 202px;" class="select">
<select name="platform" id="select-platform">
<option value="">Все платформы</option>
</select>
<div class="panel__platform-filter">
<div style="min-width: 202px;" class="select">
<select name="platform" id="select-platform">
<option value="">Все платформы</option>
</select>
</div>
</div>
</div>
<input hidden name="metric" value="visitors" />
<input hidden name="interval" value="1" />
</form>
<input hidden name="metric" value="visitors" />
<input hidden name="interval" value="1" />
</form>
</div>
<div class="period__main" id="screen">

</div>
Expand Down Expand Up @@ -627,6 +677,41 @@ <h2 class="h10-style"><span id="total-label"></span> <span id="total-value"></sp
return startOfWeekDate;
}

function setActiveButton(element) {
element.classList.toggle('button-active');
}

function removeActiveButton(element) {
element.classList.remove('button-active');
}

function setLoader() {
const container = document.createElement('div');
container.classList.add('loading-container');

const wrapper = document.createElement("div");
wrapper.classList.add('loading-wrapper');
container.append(wrapper);

const wrapperInner = document.createElement("div");
wrapperInner.classList.add('loading')
wrapper.append(wrapperInner);

const el = document.createElement('div');
wrapperInner.append(el);

while (window['screen'].firstChild) {
window['screen'].removeChild(window['screen'].firstChild);
}

window['screen'].append(container);
}

function sendSubmit() {
setLoader();
window['form'].submit();
}

window['form'] = document.getElementById('form-panel');
window['dateFromInput'] = document.getElementById('date-from');
window['dateToInput'] = document.getElementById('date-to');
Expand Down Expand Up @@ -656,7 +741,7 @@ <h2 class="h10-style"><span id="total-label"></span> <span id="total-value"></sp
setProperty("date-from", dateToString(new Date()), "value");
setProperty("date-to", dateToString(new Date()), "value");
setProperty("interval", 1, "value");
window['form'].submit();
sendSubmit();
}

setProperty("date-from", uriParams.from, 'value');
Expand All @@ -677,7 +762,7 @@ <h2 class="h10-style"><span id="total-label"></span> <span id="total-value"></sp

const platformSelect = document.getElementById('select-platform');
platformSelect.addEventListener('change', (event) => {
window['form'].submit();
sendSubmit();
})
platformOptions.forEach((item)=>{
const option = document.createElement('option');
Expand All @@ -690,27 +775,36 @@ <h2 class="h10-style"><span id="total-label"></span> <span id="total-value"></sp
}

window['buttonFilterToday'].addEventListener('click', (event) => {
setActiveButton(window['buttonFilterToday']);
removeActiveButton(window['buttonFilterYesterday']);
removeActiveButton(window['buttonFilterWeek']);
const value = dateToString(new Date());
window['dateFromInput'].value = value;
window['dateToInput'].value = value;
window['form'].submit();
sendSubmit();
});


window['buttonFilterYesterday'].addEventListener('click', (event) => {
setActiveButton(window['buttonFilterYesterday']);
removeActiveButton(window['buttonFilterToday']);
removeActiveButton(window['buttonFilterWeek']);
const value = dateToString(new Date(Date.now()-ONE_DAY_MS));
window['dateFromInput'].value = value;
window['dateToInput'].value = value;
window['form'].submit();
sendSubmit();
});

window['buttonFilterWeek'].addEventListener('click', (event) => {
setActiveButton(window['buttonFilterWeek']);
removeActiveButton(window['buttonFilterYesterday']);
removeActiveButton(window['buttonFilterToday']);
const startDate = getStartOfWeekDate();
const endDate = getEndOfWeekDate();

window['dateFromInput'].value = dateToString(startDate);
window['dateToInput'].value = dateToString(endDate);
window['form'].submit();
sendSubmit();
})
</script>

Expand All @@ -729,10 +823,12 @@ <h2 class="h10-style"><span id="total-label"></span> <span id="total-value"></sp
if (data.date[1]) {
setProperty('date-to', dateToString(data.date[1]), 'value');
}
form.submit();
sendSubmit();
}
},
selectedDates: [window['dateFromInput'].value, window['dateToInput'].value]
selectedDates: [window['dateFromInput'].value, window['dateToInput'].value],
maxDate: new Date(),
toggleSelected: false
});


Expand All @@ -741,12 +837,12 @@ <h2 class="h10-style"><span id="total-label"></span> <span id="total-value"></sp
const selectedDate2 = window['datepicker'].selectedDates[1];
if (isEqualDate(selectedDate, selectedDate2)) {
if (isEqualDate(new Date(),selectedDate))
window['buttonFilterToday'].classList.add('button-active');
setActiveButton(window['buttonFilterToday']);
else if (isEqualDate(new Date(Date.now()-ONE_DAY_MS), selectedDate)) {
window['buttonFilterYesterday'].classList.add('button-active');
setActiveButton(window['buttonFilterYesterday']);
}
} else if (isEqualDate(selectedDate,getStartOfWeekDate()) && isEqualDate(selectedDate2,getEndOfWeekDate())) {
window['buttonFilterWeek'].classList.add('button-active');
setActiveButton(window['buttonFilterWeek']);
}

</script>
Expand Down Expand Up @@ -831,4 +927,72 @@ <h2 class="h10-style"><span id="total-label"></span> <span id="total-value"></sp
}
</style>


<style>
.air-datepicker {
--adp-border-color-inline: transparent;
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.05) !important;
padding: 18px 0px 20px 0px !important;
--adp-font-size: 16px !important;
--adp-font-family: 'Manrope';
--adp-color: #000;
--adp-nav-color-secondary: #000;
--adp-nav-arrow-color: #000;
--adp-width: 320px;
--adp-border-radius: 16px;
--adp-padding: 0 20px;
--adp-day-name-color: #000;
--adp-border-color-inner: transparent;
--adp-day-cell-height: 40px;
--adp-color-other-month: #C2C2C2;
--adp-cell-background-color-in-range: #E5DFD3;
--adp-cell-background-color-selected: #E5DFD3;
--adp-accent-color: #E5DFD3;
--adp-cell-background-color-selected-hover: #F2F1F0;
--adp-cell-background-color-in-range-hover: #F2F1F0;
--adp-background-color-hover: #F2F1F0;
--adp-cell-border-radius: 6px;
--adp-background-color-in-range: #E5DFD3;
--adp-color-current-date: inherit;
--adp-background-color-selected-other-month: #E5DFD3;
--adp-background-color-selected-other-month-focused: #F2F1F0;
}

.air-datepicker-nav {
padding: 4px 18px 3px 18px;
}
.air-datepicker-body--day-names {
margin: 9px 0 9px;
}

.air-datepicker-body--day-name {
font-size: 16px;
line-height: 22px;
font-weight: 500;
text-transform: none;
}

.air-datepicker-body--day-name.-weekend- {
color: #757575;
}

.air-datepicker-cell.-day-.-weekend-.-disabled- {
color: var(--adp-color-disabled) !important;
}

.air-datepicker-cell.-day-.-weekend-:not(.-other-month-) {
color: #757575;
}

.-selected-.air-datepicker-cell.-day-.-other-month- {
color: inherit;
}

.air-datepicker-cell.-selected-.-current-, .air-datepicker-cell.-current-, .air-datepicker-cell.-selected- {
color: #000;
}


</style>

</html>
1 change: 1 addition & 0 deletions lib/report/handler.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ func validateQueryParams(q QueryParams) (ReportSettings, error) {
return settings, err
}
settings.Interval = interval
settings.Platform = q.Platform

return settings, nil
}
Expand Down

0 comments on commit fb09ccd

Please sign in to comment.