From ac7470186680dad30a50f2f5bcb1c6533d34d57a Mon Sep 17 00:00:00 2001 From: Valentin Ivanov Date: Tue, 24 Apr 2018 12:26:03 -0400 Subject: [PATCH] Start language radial progress --- assets/profile.css | 42 +++++++++++++++++++++++++------ assets/profile.html | 40 ------------------------------ assets/profile.html.eex | 51 ++++++++++++++++++++++++++++++++++++++ src/code-stats-api.ts | 5 ++-- src/profileHtmlProvider.ts | 16 ++++++++---- 5 files changed, 98 insertions(+), 56 deletions(-) delete mode 100644 assets/profile.html create mode 100644 assets/profile.html.eex diff --git a/assets/profile.css b/assets/profile.css index c02cc75..d9da778 100644 --- a/assets/profile.css +++ b/assets/profile.css @@ -1,4 +1,4 @@ -.language { +/* .language { float: left; width: 5rem; height: 5rem; @@ -11,14 +11,40 @@ -moz-box-sizing: border-box; box-sizing: border-box; border: solid 2px; +} */ + +.circle-progress { + float: left; + position: relative; + width: 7rem; + height: 7rem; } -.language span{ - display: block; +svg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + transform: rotate(-90deg); } +/* .circle-progress svg { + transform: rotate(-90deg); +} */ + +.circle-progress svg circle { + fill:transparent; +} + +.language { + padding-top: 2.5rem; + margin: auto; + text-align: center; +} .language span { + display: block; font-weight: bold; font-size: 1.1em; } @@ -60,9 +86,10 @@ img { .progress { height: 20px; margin-bottom: 20px; - /* background-color: #f5f5f5; */ + background-color: #303030; border-radius: 4px; border: solid 1px; + border-color: #424242; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); box-shadow: inset 0 1px 2px rgba(0,0,0,.1); } @@ -72,10 +99,9 @@ img { width: 0%; height: 100%; font-size: 12px; - line-height: 20px; - /* color: #fff; */ + line-height: 20px; text-align: center; - background-color: #337ab7; + background-color: #ddca7e; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); -webkit-transition: width .6s ease; @@ -84,7 +110,7 @@ img { } .progress-bar-success { - background-color: #ddca7e;; + background-color: #318245; } .sr-only { diff --git a/assets/profile.html b/assets/profile.html deleted file mode 100644 index 8ae0d2f..0000000 --- a/assets/profile.html +++ /dev/null @@ -1,40 +0,0 @@ - -

${profile.user} Level ${profile.level} (${profile.total_xp} XP) - <% if( profile.new_xp > 0 ) { %> - ( - <%= profile.new_xp %>) - <% } %> -

-
- <% for( let l in languages) { %> -
- <%= languages[l].name %> - - <%= languages[l].xp %> - -
- <% } %> -
-

-

- <% for( let m in machines) { %> -
- - <%= machines[m].name %> - - - <%= machines[m].xp %> - - -
-
- Level progress ${machines[m].progress}%. -
-
- Recent level progress 7%. -
-
- -
- <% } %> -
\ No newline at end of file diff --git a/assets/profile.html.eex b/assets/profile.html.eex new file mode 100644 index 0000000..403707c --- /dev/null +++ b/assets/profile.html.eex @@ -0,0 +1,51 @@ + +

${profile.user} Level ${profile.level} (${profile.total_xp} XP) + <% if( profile.new_xp > 0 ) { %> + ( + <%= profile.new_xp %>) + <% } %> +

+
+ <% for( let l in languages) { %> +
+
+ <%= languages[l].name %> + + <%= languages[l].xp %> + +
+ + + + +
+ <% } %> +
+

+

+ <% for( let m in machines) { %> +
+ + <%= machines[m].name %> + + + level <%= machines[m].level %> + + + (<%= machines[m].xp %> XP) + + +
+
+ Level progress ${machines[m].progress}%. +
+
+ Recent level progress ${machines[m].new_progress}%. +
+
+ +
+ <% } %> +
+ + \ No newline at end of file diff --git a/src/code-stats-api.ts b/src/code-stats-api.ts index 8adafe7..188c8f3 100644 --- a/src/code-stats-api.ts +++ b/src/code-stats-api.ts @@ -6,7 +6,7 @@ export class CodeStatsAPI { private API_KEY = null; private USER_NAME = null; private UPDATE_URL = "https://codestats.net/api/"; - //private PROFILE_URL = "https://codestats.net/api/users"; + private axios = null; constructor(apiKey: string, apiURL: string, userName: string) { @@ -66,8 +66,7 @@ export class CodeStatsAPI { public getProfile(): axios.AxiosPromise { return this.axios .get(`users/${this.USER_NAME}`) - .then(response => { - console.log("Got Response\n"); + .then(response => { return response.data; }) .catch(error => { diff --git a/src/profileHtmlProvider.ts b/src/profileHtmlProvider.ts index dba7151..2b5506f 100644 --- a/src/profileHtmlProvider.ts +++ b/src/profileHtmlProvider.ts @@ -36,15 +36,18 @@ export class ProfileHtmlProvider implements TextDocumentContentProvider { return Math.pow(Math.ceil((level + 1) / LEVEL_FACTOR), 2); } - function getLevelProgress(xp: number): number { + function getLevelProgress(xp: number, new_xp: number): number[] { let level = getLevel(xp); let curLevelXp = getNextLevelXp(level - 1); let nextLevelXp = getNextLevelXp(level); - let haveXp = xp - curLevelXp; + let haveXp = (xp-new_xp) - curLevelXp; + let needXp = nextLevelXp - curLevelXp; - return Math.round(haveXp * 100.0 / needXp); + let xpP = Math.round(haveXp * 100.0 / needXp); + let nxpP = Math.round(new_xp * 100.0 / needXp); + return [ xpP, nxpP ]; } function getSortedArray(profile: any, obj: string): any[] { @@ -52,12 +55,15 @@ export class ProfileHtmlProvider implements TextDocumentContentProvider { let langs = []; let languages_object = profile[obj] for( let lang in languages_object) { + let percents = getLevelProgress(languages_object[lang].xps, languages_object[lang].new_xps); langs.push( { name: lang, + level: getLevel(languages_object[lang].xps), xp: languages_object[lang].xps, new_xp: languages_object[lang].new_xps, - progress: getLevelProgress(languages_object[lang].xps) + progress: percents[0], + new_progress: percents[1] } ); } @@ -68,7 +74,7 @@ export class ProfileHtmlProvider implements TextDocumentContentProvider { return this.api.getProfile().then(profile => { - let htmlTemplate = fs.readFileSync(this.context.asAbsolutePath("assets/profile.html")); + let htmlTemplate = fs.readFileSync(this.context.asAbsolutePath("assets/profile.html.eex")); profile["style"] = this.context.asAbsolutePath("assets/profile.css"); profile["level"] = getLevel(profile["total_xp"]);