Updated home page, connected it with the API #18
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -129,3 +129,4 @@ modules.xml | |
| # Project-level: | ||
| config/** | ||
| !config/**example** | ||
| node_modules/ | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| var dayButtons = new Vue({ | ||
| el: "#dayButtons", | ||
|
|
||
| data: { | ||
| days: [] | ||
| }, | ||
|
|
||
| methods: { | ||
| colorToHex(color) { | ||
| function compToHex(c) { | ||
| let hex = c.toString(16); | ||
| return hex.length === 1 ? "0" + hex : hex; | ||
| } | ||
| return "#" + compToHex(color[0]) + compToHex(color[1]) + compToHex(color[2]); | ||
| }, | ||
|
|
||
| isDayFilled(day) { | ||
| for(let filledDay of this.days) { | ||
| if(Date.parse(filledDay.date) === Date.parse(day.toISOString())) { | ||
|
There was a problem hiding this comment. I don't think |
||
| return true; | ||
| } | ||
| } | ||
| return false; | ||
| }, | ||
|
|
||
| getFilledDayColor(day) { | ||
| for(let filledDay of this.days) { | ||
| if(Date.parse(filledDay.date) === Date.parse(day.toISOString())) { | ||
|
There was a problem hiding this comment. Because you have to similar pieces of code, I would move them to a separate function - something like |
||
| return filledDay.average_color; | ||
| } | ||
| } | ||
| return [169, 169, 169]; | ||
| }, | ||
|
|
||
| getDisplayedWeeks() { | ||
| let closestSunday = new Date(); | ||
| closestSunday = new Date(Date.UTC(closestSunday.getFullYear(), closestSunday.getMonth(), | ||
| closestSunday.getDate() + 7 - closestSunday.getDay())); | ||
|
Comment on lines
+37
to
+39
There was a problem hiding this comment. I don't think if it is worth renaming the variable, but I would at least add a comment that this is not the closest Sunday, but the closest Sunday in future. It is not obvious at all unless you delve into the expression used to calculate it |
||
| let threeWeeks = []; | ||
| for(let i = 2; i >= 0; --i) { | ||
| let currentWeek = []; | ||
| for(let j = 6; j >= 0; --j) { | ||
| currentWeek.push(new Date(closestSunday)); | ||
| currentWeek[6 - j].setUTCDate(closestSunday.getUTCDate() - j - i * 7); | ||
| } | ||
| threeWeeks.push(currentWeek); | ||
| } | ||
|
There was a problem hiding this comment. I don't like these loops are going backward and you are pushing to these arrays because you know the arrays' sizes in advance |
||
| return threeWeeks; | ||
| } | ||
| }, | ||
|
|
||
| mounted() { | ||
| axios.get("/api/days/brief").then((response) => { | ||
| this.days = response.data; | ||
| }); | ||
|
There was a problem hiding this comment. I guess, should be something like |
||
| } | ||
|
|
||
| }); | ||
|
There was a problem hiding this comment. We love newlines at the ends of files. Add one, please |
||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,22 +1,92 @@ | ||||||
| {{define "/"}} | ||||||
| <html lang="en"> | ||||||
| <title>Welcome to Life Calender!</title> | ||||||
| <meta charset="UTF-8"> | ||||||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||||||
| <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> | ||||||
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> | ||||||
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"> | ||||||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||||||
| <style> | ||||||
| .w3-sidebar a {font-family: "Roboto", sans-serif} | ||||||
| body,h1,h2,h3,h4,h5,h6,.w3-wide {font-family: "Montserrat", sans-serif;} | ||||||
|
There was a problem hiding this comment. Should a font name be wrapped in quotes even if it only consists of one word |
||||||
| .square { | ||||||
| height: 70px; | ||||||
| width: 70px; | ||||||
|
There was a problem hiding this comment. Is it ok that these values are constants? What if the user's screen is smaller than 7 * 70 px? |
||||||
| background-color: #0b6; | ||||||
| } | ||||||
| </style> | ||||||
|
|
||||||
|
|
||||||
| <body class="w3-content" style="max-width:1200px"> | ||||||
|
|
||||||
| {{if not .}} | ||||||
| Unfortunately, you are not logged in now :(<br> | ||||||
| <a href="/login">Log in!</a> | ||||||
| {{else}} | ||||||
|
There was a problem hiding this comment. It will look better if you will use |
||||||
| <!-- Sidebar/menu --> | ||||||
| <nav class="w3-sidebar w3-bar-block w3-white w3-collapse w3-top" style="z-index:3;width:265px" id="mySidebar"> | ||||||
|
There was a problem hiding this comment. (not sure) Probably There was a problem hiding this comment. What is |
||||||
| <div class="w3-container w3-display-container w3-padding-16"> | ||||||
| <i onclick="w3_close()" class="fa fa-remove w3-hide-large w3-button w3-display-topright"></i> | ||||||
| <h3 class="w3-wide"><b>Life Calendar</b></h3> | ||||||
|
There was a problem hiding this comment.
|
||||||
| </div> | ||||||
| <div class="w3-padding-64 w3-large w3-text-grey" style="font-weight:bold"> | ||||||
|
There was a problem hiding this comment. Not sure, how serious is this, but it should instead be
Suggested change
Please, note that this mistake also appears in many lines around. If it should be fixed, it should be fixed everywhere |
||||||
| <a class="w3-bar-item w3-button w3-border-bottom w3-large" href="#"> | ||||||
| <img src="https://telegram.org/file/464001801/4/pPObBDJVv-M.32191.png/9963667389a3218249" style="width:26%;"> | ||||||
| Egor Filatov | ||||||
| </a> | ||||||
| <a href="/friends" class="w3-bar-item w3-button">Friends</a> | ||||||
| <a href="/analyze" class="w3-bar-item w3-button">Analyze</a> | ||||||
| <a href="/settings" class="w3-bar-item w3-button">Settings</a> | ||||||
| </div> | ||||||
| <a href="/logout" class="w3-bar-item w3-button w3-padding">Logout</a> | ||||||
| </nav> | ||||||
|
|
||||||
| <!-- Top menu on small screens --> | ||||||
| <header class="w3-bar w3-top w3-hide-large w3-black w3-large"> | ||||||
| <div class="w3-bar-item w3-padding-24 w3-wide">Life Calendar</div> | ||||||
| <a href="javascript:void(0)" class="w3-bar-item w3-button w3-padding-24 w3-right" onclick="w3_open()"><i class="fa fa-bars"></i></a> | ||||||
|
There was a problem hiding this comment.
Suggested change
, if I am not mistaken |
||||||
| </header> | ||||||
|
|
||||||
| <!-- Overlay effect when opening sidebar on small screens --> | ||||||
| <div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div> | ||||||
|
|
||||||
| <!-- !PAGE CONTENT! --> | ||||||
| <div class="w3-main w3-row-padding w3-margin-top" style="margin-left:265px"> | ||||||
|
|
||||||
| <!-- Push down content on small screens --> | ||||||
| <div class="w3-hide-large" style="margin-top:83px"></div> | ||||||
|
|
||||||
| <!-- Day grid --> | ||||||
| <div id="dayButtons"> | ||||||
| <table cols=7 class="w3-table"> | ||||||
| <tr v-for="week in getDisplayedWeeks()"> | ||||||
| <td v-for="day in week"> | ||||||
| <!--<a v-bind:href="getDayUrl(day)">--> | ||||||
|
There was a problem hiding this comment. Looks like a debug comment. Should it be removed? |
||||||
| <div class="w3-col square" v-if="isDayFilled(day)" | ||||||
| v-bind:style="{backgroundColor: colorToHex(getFilledDayColor(day))}"></div> | ||||||
| <div class="w3-col square" v-else style="background-color: darkgrey"></div> | ||||||
| <!--</a>--> | ||||||
| </td> | ||||||
| </tr> | ||||||
| </table> | ||||||
| </div> | ||||||
| </div> | ||||||
|
|
||||||
|
|
||||||
| <script src="https://unpkg.com/vue"></script> | ||||||
| <script src="https://unpkg.com/axios/dist/axios.min.js"></script> | ||||||
| <script src="/scripts/index.js"></script> | ||||||
|
Comment on lines
+73
to
+75
There was a problem hiding this comment. Shouldn't these scripts be included with There was a problem hiding this comment. I'm not sure, because I don't which value of There was a problem hiding this comment.
|
||||||
| <script> | ||||||
| function w3_open() { | ||||||
| document.getElementById("mySidebar").style.display = "block"; | ||||||
| document.getElementById("myOverlay").style.display = "block"; | ||||||
| } | ||||||
|
|
||||||
| function w3_close() { | ||||||
| document.getElementById("mySidebar").style.display = "none"; | ||||||
| document.getElementById("myOverlay").style.display = "none"; | ||||||
| } | ||||||
|
There was a problem hiding this comment. These should be renamed, to my mind |
||||||
| </script> | ||||||
|
There was a problem hiding this comment. Pretty sure these two scripts should be moved above the place where they are called for several purposes, including code readability |
||||||
| {{end}} | ||||||
| </body> | ||||||
| </html> | ||||||
| {{end}} | ||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What does the function name mean?