Updated home page, connected it with the API #18
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -129,3 +129,4 @@ modules.xml | |
| # Project-level: | ||
| config/** | ||
| !config/**example** | ||
| node_modules/ | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| var dayButtons = new Vue({ | ||
| el: "#dayButtons", | ||
|
|
||
| data: { | ||
| days: [] | ||
| }, | ||
|
|
||
| methods: { | ||
| toHexFromRGB(color) { | ||
| function convertToHex(c) { | ||
| let hex = c.toString(16); | ||
| return hex.length === 1 ? "0" + hex : hex; | ||
| } | ||
| return "#" + convertToHex(color[0]) + convertToHex(color[1]) + convertToHex(color[2]); | ||
| }, | ||
|
|
||
| findDayByDate(day) { | ||
| let seconds = Date.parse(day.toISOString()); | ||
| for(let filledDay of this.days) { | ||
| if(filledDay.date === seconds) { | ||
| return {ok: true, day: filledDay}; | ||
| } | ||
| } | ||
| return {ok: false, day: this.days[0]}; | ||
| }, | ||
|
|
||
| getFilledDayColor(day) { | ||
| let foundDay = this.findDayByDate(day); | ||
| if(foundDay.ok) { | ||
| return this.toHexFromRGB(foundDay.day.average_color); | ||
| } | ||
| return "#a9a9a9"; | ||
| }, | ||
|
|
||
| getDisplayedWeeks() { | ||
| // This is not the closest Sunday at the creation moment, but it will be in future | ||
| let closestSunday = new Date(); | ||
| closestSunday = new Date(Date.UTC(closestSunday.getFullYear(), closestSunday.getMonth(), | ||
| closestSunday.getDate() + 7 - closestSunday.getDay())); | ||
| let threeWeeks = Array.from(Array(3), () => new Array(7)); | ||
| for(let i = 0; i < 3; ++i) { | ||
| for(let j = 0; j < 7; ++j) { | ||
| threeWeeks[i][j] = new Date(closestSunday); | ||
| threeWeeks[i][j].setUTCDate(closestSunday.getUTCDate() - 20 + i * 7 + j); | ||
| } | ||
| } | ||
| return threeWeeks; | ||
| } | ||
| }, | ||
|
|
||
| mounted() { | ||
| axios.get("/api/days/brief").then((response) => { | ||
| if (response.data.ok) { | ||
| this.days = response.data.days; | ||
|
There was a problem hiding this comment. |
||
| this.days.map((day) => { | ||
| day.date = Date.parse(day.date); | ||
| }); | ||
| } | ||
| else { | ||
| alert("The request to API was not successful. Please try again or contact the authors."); | ||
| } | ||
| }) | ||
| .catch(function(error) { | ||
| console.error(error); | ||
| }); | ||
| } | ||
|
|
||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,93 @@ | ||
| {{define "/"}} | ||
| <html lang="en"> | ||
| <head> | ||
| <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;} | ||
| .square { | ||
| width: 10%; | ||
| background-color: #0b6; | ||
| } | ||
|
Comment on lines
+12
to
+17
There was a problem hiding this comment. Something is wrong with indentation/spaces |
||
| .square:after { | ||
| content: ""; | ||
| display: block; | ||
| padding-bottom: 100%; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body class="w3-content" style="max-width:98%"> | ||
| {{if .}} <!-- If the user is logged in --> | ||
| <!-- Sidebar/menu --> | ||
| <nav class="w3-sidebar w3-bar-block w3-white w3-collapse w3-top" style="width:265px" id="UserSidebar"> | ||
| <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">Life Calendar</h3> | ||
| </div> | ||
| <div class="w3-padding-64 w3-large w3-text-grey" style="font-weight:bold;"> | ||
| <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> | ||
| </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="Overlay"></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"> | ||
| <div class="w3-col square" v-bind:style="{backgroundColor: getFilledDayColor(day)}"></div> | ||
| </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("UserSidebar").style.display = "block"; | ||
| document.getElementById("Overlay").style.display = "block"; | ||
| } | ||
|
|
||
| function w3_close() { | ||
| document.getElementById("UserSidebar").style.display = "none"; | ||
| document.getElementById("Overlay").style.display = "none"; | ||
| } | ||
|
Comment on lines
+77
to
+85
There was a problem hiding this comment. I don't like these functions' names. As far as I understand |
||
| </script> | ||
| {{else}} | ||
| Unfortunately, you are not logged in now :(<br> | ||
| <a href="/login">Log in!</a> | ||
| {{end}} | ||
| </body> | ||
| </html> | ||
| {{end}} | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -167,13 +167,12 @@ func main() { | |
| ui.HandleFunc("/login", HandleLogin).Methods("GET", "POST") | ||
| ui.HandleFunc("/logout", HandleLogout).Methods("GET") | ||
|
|
||
| ui.PathPrefix("/scripts/").Handler(http.StripPrefix("/scripts/", http.FileServer(http.Dir("src/scripts")))). | ||
| Methods("GET") | ||
|
Comment on lines
+170
to
+171
There was a problem hiding this comment. @DarkSquirrelComes, how do you like the formatting? Is it ok? |
||
|
|
||
| api := mux.NewRouter() | ||
|
|
||
| api.HandleFunc("/api/days/brief", HandleApiDaysBrief).Methods("GET") | ||
|
|
||
| final := http.NewServeMux() | ||
| final.Handle("/", UIPanicHandlerMiddleware(ui)) | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
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