@@ -61,8 +61,28 @@ function applyTheme() {
6161 document . body . style . backgroundColor = settings . theme === 'Dark' ? 'rgba(43, 43, 43, 0)' : 'rgba(255, 255, 255, 0)' ;
6262}
6363
64+ function checkOnlineStatus ( ) {
65+ return navigator . onLine ;
66+ }
67+
68+ function showMessage ( message , type = 'info' ) {
69+ const graph = document . getElementById ( 'graph' ) ;
70+ const yearLabel = document . getElementById ( 'year-label' ) ;
71+ graph . innerHTML = '<div style="text-align: right; width: 400px ; color: #81ffe4ff;">GitHub contribution info!</div>' ;
72+ yearLabel . innerHTML = `<div style="text-align: center; color: ${ type === 'error' ? '#ff6b6b' : '#666' } ;">${ message } </div>` ;
73+ }
74+
6475function fetchContributions ( ) {
65- if ( ! settings . username ) return ;
76+ if ( ! settings . username ) {
77+ showMessage ( 'Please go to Settings and add your username and token' , 'error' ) ;
78+ return ;
79+ }
80+
81+ if ( ! checkOnlineStatus ( ) ) {
82+ showMessage ( 'You are offline. Please check your internet connection' , 'error' ) ;
83+ return ;
84+ }
85+
6686 const query = `
6787 query($userName:String!) {
6888 user(login: $userName) {
@@ -86,7 +106,10 @@ function fetchContributions() {
86106 headers,
87107 body : JSON . stringify ( { query, variables : { userName : settings . username } } )
88108 } )
89- . then ( res => res . json ( ) )
109+ . then ( res => {
110+ if ( ! res . ok ) throw new Error ( 'Network response was not ok' ) ;
111+ return res . json ( ) ;
112+ } )
90113 . then ( data => {
91114 console . log ( 'API Response:' , data ) ;
92115 const calendar = data . data ?. user ?. contributionsCollection ?. contributionCalendar ;
@@ -95,10 +118,17 @@ function fetchContributions() {
95118 renderGraph ( parseCalendar ( calendar ) ) ;
96119 } else {
97120 console . log ( 'No calendar data' ) ;
98- alert ( 'No contribution data found. Check username and token.' ) ;
121+ showMessage ( 'No contribution data found. Check username and token.' , 'error ') ;
99122 }
100123 } )
101- . catch ( err => console . error ( 'Fetch error:' , err ) ) ;
124+ . catch ( err => {
125+ console . error ( 'Fetch error:' , err ) ;
126+ if ( ! checkOnlineStatus ( ) ) {
127+ showMessage ( 'You are offline. Please check your internet connection' , 'error' ) ;
128+ } else {
129+ showMessage ( 'Failed to fetch contributions. Please check your settings.' , 'error' ) ;
130+ }
131+ } ) ;
102132}
103133
104134function parseCalendar ( calendar ) {
@@ -145,6 +175,17 @@ function getLevel(count) {
145175 return 4 ;
146176}
147177
178+ // Listen for online/offline events
179+ window . addEventListener ( 'online' , ( ) => {
180+ if ( settings . username ) {
181+ fetchContributions ( ) ;
182+ }
183+ } ) ;
184+
185+ window . addEventListener ( 'offline' , ( ) => {
186+ showMessage ( 'You are offline. Please check your internet connection' , 'error' ) ;
187+ } ) ;
188+
148189// Load settings on start
149190const saved = localStorage . getItem ( 'settings' ) ;
150191const panel = document . getElementById ( 'settings-panel' ) ;
0 commit comments