{"id":18267457,"url":"https://github.com/freaktechnik/crowd-dashboard","last_synced_at":"2025-04-09T02:26:48.140Z","repository":{"id":11003252,"uuid":"13326938","full_name":"freaktechnik/Crowd-Dashboard","owner":"freaktechnik","description":"Ever had to create a simple status dashboard to overview the up-status of your websites? Crowd-Dashboard offers a simple JS object to check Website statuses client-side. It avoids CORS using an Image object hack or alternatively requests the status via a JSONP API. To configure it you pass a simple JSON file containing all the informations about the endpoints the Object needs. By default it prints the results as a list.","archived":false,"fork":false,"pushed_at":"2014-07-31T23:14:04.000Z","size":600,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"gh-pages","last_synced_at":"2025-03-14T21:05:41.825Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://freaktechnik.github.io/Crowd-Dashboard","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/freaktechnik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-04T14:56:37.000Z","updated_at":"2016-06-08T20:44:34.000Z","dependencies_parsed_at":"2022-08-30T16:11:36.810Z","dependency_job_id":null,"html_url":"https://github.com/freaktechnik/Crowd-Dashboard","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freaktechnik%2FCrowd-Dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freaktechnik%2FCrowd-Dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freaktechnik%2FCrowd-Dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freaktechnik%2FCrowd-Dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/freaktechnik","download_url":"https://codeload.github.com/freaktechnik/Crowd-Dashboard/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247964264,"owners_count":21025168,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T11:27:28.514Z","updated_at":"2025-04-09T02:26:48.115Z","avatar_url":"https://github.com/freaktechnik.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Crowd-Dashboard\nCrowd Dashboard aims to provide an independent website status page. It uses a client side js library to detect the online status of servers. After the first load, it can be stored on the users computer, so the original server doesn't need to be working anymore and the dashboard still works.\n\nIt uses simple JSON objects to create the lists.\n\n## Compatibility\nCrowd-Dashboard has been tested and is working in\n   * Firefox 25+\n   * Chrome 31\n   * Internet Explorer 10\n\nIt might work in non-browser JS environements. However it uses the Image object (Status Ping) as well as the (window.)document tree for certain functions (JSONP, Markup output).\n\n## Mirroring\nAs how the dashboard is set up in the repository, a similar one can be cloned by simply calling [fetch.php](example/fetch.php) with the correct arguments.\nTo do so, call `fetch.php?source=urlToOtherDashboard/`. This will fetch the other dashboard's servers.json and the mirrors.json and expands the local mirrors list by the dashboard fetched from.\n\nAfter having used fetch.php please delete the file from the server.\n\nThe mirroring list only goes one way, so mirrored dashboards only have the mirrors from the dashboard, but the mirrored dashboard does not know that it has been mirrored. This will probably stay so, since spammers could simply mass-insert links otherwise.\n\n## List Format\nThe list is a simple JSON file, on the top level it is an array.\nThe array contains server groups, which are built like this:\n```js\n{\n    \"name\":\"Group Name\",\n    \"withLocations\":true,\n    \"pages\":\n        [\n        ]\n}\n```\nThe _name_ property will be printed as a h2 header-element.\nIn the _pages_ array, the objects for the pages are stored. If _withLocations_ is true, the page objects _location_ value is needed. They _type_ property defines how the status is checked. Crowd-Dashboard currently supports \"workaround\" (Default) for status checks of non-CORS pages, \"request\" to check the status via XMLHttpRequest (needs the header of the page to specify the proper CORS access), \"JSON\" and \"JSONP\" for status APIs. The _timeout_ value defines how long to wait (in ms) before marking a page as unavailable This works for each type except JSONP. Currently the url is  treated as unique identifier.\n```js\n{\n    \"name\":\"Page Name\",\n    \"url\":\"http://humanoids.be\",\n    \"location\":\"Switzerland\",\n    \"timeout\":5000,\n    \"type\":\"workaround\"\n}\n```\n\nAdditionally, if the page provides a JSON(P) API to request it's status, you can set the _type_ property to \"JSON\" or \"JSONP\" respectively. You most likely will have to define a _statusAPI_ object, the one shown in the example holds the default values, where page.host represents the host of the URL set in the page object. If the property _upValue_ is present, it is prefered over the _downValue_. _upValue_ and _downValue_ can also be arrays. The property's value is then checked against each array item and has to match (_upValue_) or be different to (_downValue_) at least one in order for the site to be considered as online. If the _propertyName_ contains one or more dots, it is assumed that it represents a structure of properties, allowing you to navigate through objects. The JSONP Api function needs a document element in the global scope which offers a DOM API.\n```js\n\"statusAPI\":{\n    \"url\":\"https://status.page.host/api/status.json\",\n    \"propertyName\":\"status\",\n    \"downValue\":\"major\"\n}\n```\n\nAlternatively to the dots you can use _nestedProperty_ (assumed as false by default) to declare that _propertyName_ is an array of property names to navigate through. Not only does this allow you to have dots in the property names, but you can also select items of traditional arrays.\n```js\n\"statusAPI:{\n    \"url\":\"http://status.page.host/api/status.json\",\n    \"nestedProperty\": true,\n    \"propertyName\":[\n        \"page\",\n        0,\n        \"status\"\n    ],\n    \"upValue\":\"online\"\n}\n```\n\n## The JS Object\nFor an example on how to make your dashboard work, see the [index.html](example/index.html) file.\n\n```js\n  var dashboard = new Dashboard();\n```\n\nBasically the js API supplied by the [crowd-dashboard.js](crowd-dashboard.js) file requires you to construct a Dashboard object, which offers the following methods:\n\n### Methods\n#### Constructor\n##### Arguments\n   * [_servers_]: JSON server list\n   * [_options_]: Object containing the initial values of the dashboards properties. Undefined properties get initialized with their default value.\n   \n##### Description\nAlready tries to create the dashboard, if a valid servers list is given.\n\n#### setListAttributes\n##### Arguments\n   * [_targetNodeId_]: ID of the new target node\n   * [_locationConnector_]: new location connector\n   * [_locationURL_]: new location URL\n\n#####\nTo avoid updating the DOM multiple times when setting new values to multiple of the three properties _targetNodeId_,_locationConnector_ and _locationURL_ you can set them using this method. If you vant to omit one of the first two arguments you may do so by passing '''null'''.\n\n#### checkServers\nRefreshes the the statuses of the servers and updates the printed list.\n\n#### checkServer\n##### Arguments\n   * _server_: A page object.\n\n##### Description\nChecks the status of a single server and saves it. If it was the last server to be ready, the ready event is fired.\n\n#### addServerToList\n##### Arguments\n   * _url_: the URL of the server\n   * _status_: whether or not the server is online\n\n##### Description\nSets the state of a server in the list.\n\n#### getServerByURL\n##### Arguments\n   * _url_: URL of the server\n\n##### Description\nReturns the page object with the specified URL.\n\n#### isReady\nIs true if all servers have been checked.\n\n#### clear\nResets the Dashboard object. Also clears the status list.\n\n#### createLists\nAppends the dashboard's lists to the target element.\n\n### Attributes\n#### totalCount\nNumber of servers to check. Defaults to 0.\n\n#### readyCount\nNumber of checked servers. Defaults to -1.\n\n#### servers\nThe servers list, with an additional _online_ attribute, if the server has been checked. Holds true, if the server is online. This updates the list if _passiveMode_ is false.\n\n#### locationConnector\nThe string between the link to the page and the location link. Sanitized by the browser, so no html in there! Defaults to \" in \". This updates the list if _passiveMode_ is false.\n\n#### locationURL\nThe URL the location gets linked to. The location string is appended after this string. Defaults to \"http://maps.google.com/?q=\". This updates the list if _passiveMode_ is false.\n\n#### loadingString\nThe string displayed inside the container while loading the dashboard. This currently isn't sanitized and just inserted into the _innerHTML_ property of the target element. Defaults to \"Loading...\". If the loading string is currently shown and _passiveMode_ is false, it is changed.\n\n#### targetNodeId\nThe ID of the node the dashboard is output to. This prints the list in the new node if _passiveMode_ is not true.\n\n#### supportedEvents\nAn array of the events it supports.\n\n#### passiveMode\nWhether or not the script does not generate the DOM list, defaults to false if the global scope has a document element. If changed to true, the list is immediately output to the target node.\n  \n### Events\nThose won't work in IE. You can use the default _addEventListener_ and _removeEventListener_ methods to add and remove event listeners, however only the first two arguments will be processed. You can also add listeners by setting the _on[event]_ attribute.\n\n#### ready\nThis event is dispatched when all servers have been checked and are ready. This event can be prevented to avoid generation of the markup.\n##### Event Object Details Attributes\n   * _length_: Number of servers\n\n#### itemready\nWhen a server is successfully checked for its online status this event is fired. If this event is prevented, the online status of the element in the markup list is not updated.\n##### Event Object Detauls Attributes\nThe server item (same contents as the JSON object, just with an additional field _online_) is passed as event data.\n\n#### empty\nWhenever the list is emptied (by either clearing it or handing over an empty server list), this event is fired.\n\n## Output Markup structure\nThe code generated by the script in the targeted element has the following structure (the output in IE might vary):\n```html\n\u003ch2 class=\"dashboard-title\"\u003eServer List Name\u003c/h2\u003e\n\u003cul class=\"dashboard-list\"\u003e\n  \u003cli id=\"dashboard-item-aHvL2h1bWFub2lkcy5iZQ\" class=\"online\"\u003e\u003ca href=\"http://foo.bar\"\u003eFoo Bar\u003c/a\u003e\u003c/li\u003e\n  \u003cli id=\"dashboard-item-BGR0cDovL2h1bWFub2cb9edR\" class=\"offline\"\u003e\u003ca href=\"http://not.online\"\u003eThis is offline\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 class=\"dashboard-title\"\u003eServer List with Locations\u003c/h2\u003e\n\u003cul class=\"dashboard-list dashboard-with-locations\"\u003e\n  \u003cli id=\"dashboard-item-aHR0cDovL2hEv5sd68rRd\" class=\"online\"\u003e\u003ca href=\"locat.io/n\"\u003eThis entry is\u003c/a\u003e in \u003ca class=\"dashboard-location\" href=\"http://maps.google.com/?q=The%20Wonderland\"\u003eThe Wonderland\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nNote that the generation of this code and the loading indicator can be prevented by enabling passiveMode. When initially generated a list item is neither online nor offline. The class will be added as soon as the status is clear.\n\n## [License](LICENSE)\nCrowd Dashboard is licensed under the GPLv2 License.\n\n## Pull Requests\nIf you fork this repository and make changes, please, please file a pull request to merge your improvements and fixes back into this repo. I will most likely merge it back in here (can't promise it, I don't want any junk here...).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreaktechnik%2Fcrowd-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffreaktechnik%2Fcrowd-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreaktechnik%2Fcrowd-dashboard/lists"}