├── .gitignore
├── README.md
├── __init__.py
├── api
    └── rest.py
├── requirements.txt
├── scrapy.cfg
├── screenshot
    ├── admin.gif
    ├── crawl.gif
    └── email.png
├── spider
    ├── __init__.py
    ├── items.py
    ├── middlewares.py
    ├── pipelines.py
    ├── settings.py
    └── spiders
    │   ├── __init__.py
    │   └── baidupan.py
├── tests
    ├── __init__.py
    └── open_in_browser
    │   ├── __init__.py
    │   ├── private_share.py
    │   └── public_share.py
├── utils
    ├── __init__.py
    └── mongoflask.py
└── web
    └── admin
        ├── .gitignore
        ├── README.md
        ├── build
            ├── asset-manifest.json
            ├── favicon.ico
            ├── index.html
            ├── manifest.json
            ├── precache-manifest.c5a31347d429141cbfdce28e2f0c87ab.js
            ├── service-worker.js
            └── static
            │   ├── js
            │       ├── 2.feb79fcc.chunk.js
            │       ├── 2.feb79fcc.chunk.js.map
            │       ├── main.08bfe591.chunk.js
            │       ├── main.08bfe591.chunk.js.map
            │       ├── runtime~main.42ac5946.js
            │       └── runtime~main.42ac5946.js.map
            │   └── media
            │       ├── google.09aea0f5.svg
            │       └── logo.3d432ca2.svg
        ├── package.json
        ├── public
            ├── favicon.ico
            ├── index.html
            └── manifest.json
        └── src
            ├── components
                ├── App.js
                ├── AppContainer.js
                ├── Header
                │   ├── HeaderContainer.js
                │   ├── HeaderView.js
                │   └── package.json
                ├── Layout
                │   ├── LayoutContainer.js
                │   ├── LayoutState.js
                │   ├── LayoutView.js
                │   └── package.json
                ├── Notification
                │   ├── Notification.js
                │   └── package.json
                ├── PageTitle
                │   ├── PageTitle.js
                │   └── package.json
                ├── Sidebar
                │   ├── SidebarContainer.js
                │   ├── SidebarView.js
                │   ├── components
                │   │   ├── Dot.js
                │   │   └── SidebarLink
                │   │   │   ├── SidebarLinkContainer.js
                │   │   │   └── SidebarLinkView.js
                │   └── package.json
                ├── UserAvatar
                │   ├── UserAvatar.js
                │   └── package.json
                ├── Widget
                │   ├── WidgetContainer.js
                │   ├── WidgetView.js
                │   └── package.json
                └── Wrappers
                │   ├── Wrappers.js
                │   └── package.json
            ├── images
                └── google.svg
            ├── index.js
            ├── pages
                ├── charts
                │   ├── ChartsContainer.js
                │   ├── ChartsView.js
                │   ├── components
                │   │   ├── ApexHeatmap.js
                │   │   └── ApexLineChart.js
                │   └── package.json
                ├── dashboard
                │   ├── Dashboard.js
                │   ├── DashboardContainer.js
                │   ├── components
                │   │   ├── BigStat
                │   │   │   └── BigStat.js
                │   │   └── Table
                │   │   │   └── Table.js
                │   ├── mock.js
                │   └── package.json
                ├── error
                │   ├── Error.js
                │   ├── logo.svg
                │   └── package.json
                ├── files
                │   ├── FileState.js
                │   ├── Files.js
                │   └── package.json
                ├── icons
                │   ├── IconsContainer.js
                │   ├── IconsView.js
                │   └── package.json
                ├── login
                │   ├── LoginContainer.js
                │   ├── LoginState.js
                │   ├── LoginView.js
                │   ├── logo.svg
                │   └── package.json
                ├── maps
                │   ├── Maps.js
                │   └── package.json
                ├── notifications
                │   ├── NotificationsContainer.js
                │   ├── NotificationsView.js
                │   └── package.json
                ├── tables
                │   ├── Tables.js
                │   └── package.json
                ├── typography
                │   ├── Typography.js
                │   └── package.json
                └── users
                │   ├── UserState.js
                │   ├── Users.js
                │   └── package.json
            ├── serviceWorker.js
            ├── store
                ├── index.js
                └── reducers.js
            └── themes
                ├── default.js
                └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | node_modules/


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # BaiduyunSpider
 2 | 分布式百度网盘爬虫，使用当前最流行的技术框架。适合个人学习以及二次开发。
 3 | 
 4 | 爬虫基于 `Scrapy`，灵活简单、易扩展，方便二次开发。使用 `Scrapy-Redis` 作为分布式中间件，可同时部署多个爬虫实例，以提升采集效率。`Web`后台管理基于`React`，`Material Design` 设计风格。 
 5 | 
 6 | 
 7 | ## 依赖 
 8 | - MongoDB
 9 | - Python3
10 | - Redis
11 | - Node.js > 8.0 (可选) 
12 | 
13 | ## 安装 
14 | 
15 | ```
16 | pip install -r requirements.txt
17 | ```
18 | 
19 | ## 如何使用 
20 | 
21 | 1.运行爬虫 
22 | 
23 | ```
24 | scrapy crawl baidupan
25 | ```
26 | 
27 | 2.运行Web Service 
28 | 
29 | ```
30 | cd api
31 | python rest.py
32 | ```
33 | 
34 | 3.开始采集 
35 | 
36 | 开源版目前需要通过后台管理界面，手动提交待采集的分享链接。或者使用`API`方式：
37 | 
38 | ```
39 | POST http://localhost:5000/addUrl
40 | 表单参数: url
41 | ```
42 | 
43 | curl 例子
44 | 
45 | ```
46 | curl -X POST http://localhost:5000/addUrl \
47 |   -F url=https://pan.baidu.com/s/17BtXyO-i02gsC7h4QsKexg
48 | ```
49 | 
50 | 
51 | 
52 | ## 运行截图
53 | 
54 | 爬虫运行截图 
55 | ![crawl](screenshot/crawl.gif)
56 | 
57 | 
58 | 
59 | 后台管理界面 
60 | ![admin](screenshot/admin.gif)
61 | 
62 | 
63 | ## 技术支持
64 | 提供高级版本，包含额外的搜索引擎和私密分享采集部分，暂仅用于毕业设计。联系邮箱：![](screenshot/email.png)


--------------------------------------------------------------------------------
/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/k1995/BaiduyunSpider/230717d57ffb28add71a47d1292d80406923eb3d/__init__.py


--------------------------------------------------------------------------------
/api/rest.py:
--------------------------------------------------------------------------------
 1 | import sys
 2 | import os
 3 | 
 4 | 
 5 | try:
 6 |     sys.path.append("..")
 7 |     from flask import Flask, jsonify, request, send_from_directory
 8 |     from pymongo import MongoClient
 9 |     from spider import settings
10 |     from utils.mongoflask import MongoJSONEncoder, ObjectIdConverter
11 |     from utils import normalize_shareurl
12 |     from redis import StrictRedis
13 | except Exception as e:
14 |     raise e
15 | 
16 | # Flask
17 | app = Flask(__name__, static_folder='../web/admin/build/')
18 | app.json_encoder = MongoJSONEncoder
19 | app.url_map.converters['objectid'] = ObjectIdConverter
20 | 
21 | # Mongo
22 | mongo = MongoClient(settings.MONGO_URI)
23 | db = mongo['baidupan']
24 | files = db.share_files
25 | users = db.share_users
26 | 
27 | # Redis
28 | redis = StrictRedis.from_url(settings.REDIS_URL)
29 | 
30 | # Common settings
31 | default_page_size = 10
32 | 
33 | 
34 | @app.route("/share_files")
35 | def share_files():
36 |     size = int(request.args.get('size', default_page_size))
37 |     items = files.find().skip(get_offset(size)).limit(size)
38 |     count = files.count()
39 |     return jsonify({
40 |         'total': count,
41 |         'has_more': get_offset(size) + size < count,
42 |         'items': list(items)
43 |     })
44 | 
45 | 
46 | @app.route("/share_users")
47 | def share_users():
48 |     size = int(request.args.get('size', default_page_size))
49 |     items = users.find().skip(get_offset(size)).limit(size)
50 |     count = users.count()
51 |     return jsonify({
52 |         'total': count,
53 |         'has_more': get_offset(size) + size < count,
54 |         'items': list(items)
55 |     })
56 | 
57 | 
58 | @app.route("/addUrl", methods=['POST'])
59 | def add_url():
60 |     from spider.spiders.baidupan import BaidupanSpider
61 |     queue_key = BaidupanSpider.name + ":start_urls"
62 |     try:
63 |         url = normalize_shareurl(request.form.get('url'))
64 |         redis.lpush(queue_key, url)
65 |         return "ok"
66 |     except Exception as e:
67 |         return repr(e)
68 | 
69 | 
70 | # Serve React App
71 | @app.route('/', defaults={'path': ''})
72 | @app.route('/<path:path>')
73 | def serve(path):
74 |     if path != "" and os.path.exists(app.static_folder + path):
75 |         return send_from_directory(app.static_folder, path)
76 |     else:
77 |         return send_from_directory(app.static_folder, 'index.html')
78 | 
79 | 
80 | def get_offset(size):
81 |     page = int(request.args.get('page', 1))
82 |     return (page - 1) * size
83 | 
84 | 
85 | def run():
86 |     app.run(use_reloader=True, )
87 | 
88 | 
89 | if __name__ == "__main__":
90 |     run()
91 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | redis
2 | isodate
3 | werkzeug
4 | flask
5 | pymongo
6 | scrapy>=1.1
7 | scrapy_redis


--------------------------------------------------------------------------------
/scrapy.cfg:
--------------------------------------------------------------------------------
 1 | # Automatically created by: scrapy startproject
 2 | #
 3 | # For more information about the [deploy] section see:
 4 | # https://scrapyd.readthedocs.io/en/latest/deploy.html
 5 | 
 6 | [settings]
 7 | default = spider.settings
 8 | 
 9 | [deploy]
10 | #url = http://localhost:6800/
11 | project = spider
12 | 


--------------------------------------------------------------------------------
/screenshot/admin.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/k1995/BaiduyunSpider/230717d57ffb28add71a47d1292d80406923eb3d/screenshot/admin.gif


--------------------------------------------------------------------------------
/screenshot/crawl.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/k1995/BaiduyunSpider/230717d57ffb28add71a47d1292d80406923eb3d/screenshot/crawl.gif


--------------------------------------------------------------------------------
/screenshot/email.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/k1995/BaiduyunSpider/230717d57ffb28add71a47d1292d80406923eb3d/screenshot/email.png


--------------------------------------------------------------------------------
/spider/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/k1995/BaiduyunSpider/230717d57ffb28add71a47d1292d80406923eb3d/spider/__init__.py


--------------------------------------------------------------------------------
/spider/items.py:
--------------------------------------------------------------------------------
 1 | # -*- coding: utf-8 -*-
 2 | 
 3 | # Define here the models for your scraped items
 4 | #
 5 | # See documentation in:
 6 | # https://doc.scrapy.org/en/latest/topics/items.html
 7 | 
 8 | import scrapy
 9 | 
10 | 
11 | class FileItem(scrapy.Item):
12 |     url = scrapy.Field()
13 |     fs_id = scrapy.Field()
14 |     server_filename = scrapy.Field()
15 |     size = scrapy.Field()
16 |     server_mtime = scrapy.Field()
17 |     server_ctime = scrapy.Field()
18 |     local_mtime = scrapy.Field()
19 |     local_ctime = scrapy.Field()
20 |     isdir = scrapy.Field()
21 |     category = scrapy.Field()
22 |     path = scrapy.Field()
23 |     md5 = scrapy.Field()
24 |     thumbs = scrapy.Field()
25 |     ctime = scrapy.Field()
26 |     expiredType = scrapy.Field()
27 |     expires = scrapy.Field()
28 |     shareid = scrapy.Field()
29 |     uk = scrapy.Field()
30 |     last_updated = scrapy.Field()
31 | 
32 | 
33 | class UserItem(scrapy.Item):
34 |     uname = scrapy.Field()
35 |     avatar_url = scrapy.Field()
36 |     uk = scrapy.Field()
37 |     last_updated = scrapy.Field()
38 | 
39 | 


--------------------------------------------------------------------------------
/spider/middlewares.py:
--------------------------------------------------------------------------------
  1 | # -*- coding: utf-8 -*-
  2 | 
  3 | # Define here the models for your spider middleware
  4 | #
  5 | # See documentation in:
  6 | # https://doc.scrapy.org/en/latest/topics/spider-middleware.html
  7 | 
  8 | from scrapy import signals
  9 | 
 10 | 
 11 | class SpiderSpiderMiddleware(object):
 12 |     # Not all methods need to be defined. If a method is not defined,
 13 |     # scrapy acts as if the spider middleware does not modify the
 14 |     # passed objects.
 15 | 
 16 |     @classmethod
 17 |     def from_crawler(cls, crawler):
 18 |         # This method is used by Scrapy to create your spiders.
 19 |         s = cls()
 20 |         crawler.signals.connect(s.spider_opened, signal=signals.spider_opened)
 21 |         return s
 22 | 
 23 |     def process_spider_input(self, response, spider):
 24 |         # Called for each response that goes through the spider
 25 |         # middleware and into the spider.
 26 | 
 27 |         # Should return None or raise an exception.
 28 |         return None
 29 | 
 30 |     def process_spider_output(self, response, result, spider):
 31 |         # Called with the results returned from the Spider, after
 32 |         # it has processed the response.
 33 | 
 34 |         # Must return an iterable of Request, dict or Item objects.
 35 |         for i in result:
 36 |             yield i
 37 | 
 38 |     def process_spider_exception(self, response, exception, spider):
 39 |         # Called when a spider or process_spider_input() method
 40 |         # (from other spider middleware) raises an exception.
 41 | 
 42 |         # Should return either None or an iterable of Response, dict
 43 |         # or Item objects.
 44 |         pass
 45 | 
 46 |     def process_start_requests(self, start_requests, spider):
 47 |         # Called with the start requests of the spider, and works
 48 |         # similarly to the process_spider_output() method, except
 49 |         # that it doesn’t have a response associated.
 50 | 
 51 |         # Must return only requests (not items).
 52 |         for r in start_requests:
 53 |             yield r
 54 | 
 55 |     def spider_opened(self, spider):
 56 |         spider.logger.info('Spider opened: %s' % spider.name)
 57 | 
 58 | 
 59 | class SpiderDownloaderMiddleware(object):
 60 |     # Not all methods need to be defined. If a method is not defined,
 61 |     # scrapy acts as if the downloader middleware does not modify the
 62 |     # passed objects.
 63 | 
 64 |     @classmethod
 65 |     def from_crawler(cls, crawler):
 66 |         # This method is used by Scrapy to create your spiders.
 67 |         s = cls()
 68 |         crawler.signals.connect(s.spider_opened, signal=signals.spider_opened)
 69 |         return s
 70 | 
 71 |     def process_request(self, request, spider):
 72 |         # Called for each request that goes through the downloader
 73 |         # middleware.
 74 | 
 75 |         # Must either:
 76 |         # - return None: continue processing this request
 77 |         # - or return a Response object
 78 |         # - or return a Request object
 79 |         # - or raise IgnoreRequest: process_exception() methods of
 80 |         #   installed downloader middleware will be called
 81 |         return None
 82 | 
 83 |     def process_response(self, request, response, spider):
 84 |         # Called with the response returned from the downloader.
 85 | 
 86 |         # Must either;
 87 |         # - return a Response object
 88 |         # - return a Request object
 89 |         # - or raise IgnoreRequest
 90 |         return response
 91 | 
 92 |     def process_exception(self, request, exception, spider):
 93 |         # Called when a download handler or a process_request()
 94 |         # (from other downloader middleware) raises an exception.
 95 | 
 96 |         # Must either:
 97 |         # - return None: continue processing this exception
 98 |         # - return a Response object: stops process_exception() chain
 99 |         # - return a Request object: stops process_exception() chain
100 |         pass
101 | 
102 |     def spider_opened(self, spider):
103 |         spider.logger.info('Spider opened: %s' % spider.name)
104 | 


--------------------------------------------------------------------------------
/spider/pipelines.py:
--------------------------------------------------------------------------------
 1 | from pymongo import MongoClient
 2 | 
 3 | from spider.items import FileItem, UserItem
 4 | 
 5 | 
 6 | class SpiderPipeline(object):
 7 |     def __init__(self, settings):
 8 |         client = MongoClient(settings.get('MONGO_URI'))
 9 |         self.db = client['baidupan']
10 |         self.files = self.db.share_files
11 |         self.users = self.db.share_users
12 | 
13 |     @classmethod
14 |     def from_crawler(cls, crawler):
15 |         return cls(crawler.settings)
16 | 
17 |     def process_item(self, item, spider):
18 |         # File info
19 |         if isinstance(item, FileItem):
20 |             self.files.update_one(
21 |                 {'fs_id': item['fs_id']},
22 |                 {'$set': item},
23 |                 True)
24 |         # User info
25 |         if isinstance(item, UserItem):
26 |             self.users.update_one(
27 |                 {'uk': item['uk']},
28 |                 {'$set': item},
29 |                 True)
30 |         return item
31 | 


--------------------------------------------------------------------------------
/spider/settings.py:
--------------------------------------------------------------------------------
 1 | # -*- coding: utf-8 -*-
 2 | 
 3 | # Scrapy settings for spider project
 4 | #
 5 | # For simplicity, this file contains only settings considered important or
 6 | # commonly used. You can find more settings consulting the documentation:
 7 | #
 8 | #     https://doc.scrapy.org/en/latest/topics/settings.html
 9 | #     https://doc.scrapy.org/en/latest/topics/downloader-middleware.html
10 | #     https://doc.scrapy.org/en/latest/topics/spider-middleware.html
11 | 
12 | BOT_NAME = 'spider'
13 | 
14 | SPIDER_MODULES = ['spider.spiders']
15 | NEWSPIDER_MODULE = 'spider.spiders'
16 | 
17 | # Enables scheduling storing requests queue in redis.
18 | SCHEDULER = "scrapy_redis.scheduler.Scheduler"
19 | 
20 | # Ensure all spiders share same duplicates filter through redis.
21 | DUPEFILTER_CLASS = "scrapy_redis.dupefilter.RFPDupeFilter"
22 | 
23 | # Crawl responsibly by identifying yourself (and your website) on the user-agent
24 | USER_AGENT = 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1'
25 | 
26 | # Obey robots.txt rules
27 | ROBOTSTXT_OBEY = False
28 | 
29 | # Configure maximum concurrent requests performed by Scrapy (default: 16)
30 | #CONCURRENT_REQUESTS = 32
31 | 
32 | # Configure a delay for requests for the same website (default: 0)
33 | # See https://doc.scrapy.org/en/latest/topics/settings.html#download-delay
34 | # See also autothrottle settings and docs
35 | DOWNLOAD_DELAY = 3
36 | # The download delay setting will honor only one of:
37 | #CONCURRENT_REQUESTS_PER_DOMAIN = 16
38 | #CONCURRENT_REQUESTS_PER_IP = 16
39 | 
40 | # Disable cookies (enabled by default)
41 | #COOKIES_ENABLED = False
42 | 
43 | # Disable Telnet Console (enabled by default)
44 | #TELNETCONSOLE_ENABLED = False
45 | 
46 | # Override the default request headers:
47 | #DEFAULT_REQUEST_HEADERS = {
48 | #   'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
49 | #   'Accept-Language': 'en',
50 | #}
51 | 
52 | # Enable or disable spider middlewares
53 | # See https://doc.scrapy.org/en/latest/topics/spider-middleware.html
54 | #SPIDER_MIDDLEWARES = {
55 | #    'spider.middlewares.SpiderSpiderMiddleware': 543,
56 | #}
57 | 
58 | # Enable or disable downloader middlewares
59 | # See https://doc.scrapy.org/en/latest/topics/downloader-middleware.html
60 | #DOWNLOADER_MIDDLEWARES = {
61 | #    'spider.middlewares.SpiderDownloaderMiddleware': 543,
62 | #}
63 | 
64 | # Enable or disable extensions
65 | # See https://doc.scrapy.org/en/latest/topics/extensions.html
66 | #EXTENSIONS = {
67 | #    'scrapy.extensions.telnet.TelnetConsole': None,
68 | #}
69 | 
70 | # Configure item pipelines
71 | # See https://doc.scrapy.org/en/latest/topics/item-pipeline.html
72 | ITEM_PIPELINES = {
73 |    'spider.pipelines.SpiderPipeline': 300,
74 | }
75 | 
76 | # Enable and configure the AutoThrottle extension (disabled by default)
77 | # See https://doc.scrapy.org/en/latest/topics/autothrottle.html
78 | #AUTOTHROTTLE_ENABLED = True
79 | # The initial download delay
80 | #AUTOTHROTTLE_START_DELAY = 5
81 | # The maximum download delay to be set in case of high latencies
82 | #AUTOTHROTTLE_MAX_DELAY = 60
83 | # The average number of requests Scrapy should be sending in parallel to
84 | # each remote server
85 | #AUTOTHROTTLE_TARGET_CONCURRENCY = 1.0
86 | # Enable showing throttling stats for every response received:
87 | #AUTOTHROTTLE_DEBUG = False
88 | 
89 | # Enable and configure HTTP caching (disabled by default)
90 | # See https://doc.scrapy.org/en/latest/topics/downloader-middleware.html#httpcache-middleware-settings
91 | #HTTPCACHE_ENABLED = True
92 | #HTTPCACHE_EXPIRATION_SECS = 0
93 | #HTTPCACHE_DIR = 'httpcache'
94 | #HTTPCACHE_IGNORE_HTTP_CODES = []
95 | #HTTPCACHE_STORAGE = 'scrapy.extensions.httpcache.FilesystemCacheStorage'
96 | 
97 | MONGO_URI = 'mongodb://127.0.0.1:27017'
98 | REDIS_URL = 'redis://127.0.0.1:6379'
99 | SCHEDULER_PERSIST = True


--------------------------------------------------------------------------------
/spider/spiders/__init__.py:
--------------------------------------------------------------------------------
1 | # This package will contain the spiders of your Scrapy project
2 | #
3 | # Please refer to the documentation for information on how to create and manage
4 | # your spiders.
5 | 


--------------------------------------------------------------------------------
/spider/spiders/baidupan.py:
--------------------------------------------------------------------------------
 1 | # -*- coding: utf-8 -*-
 2 | import datetime
 3 | import json
 4 | import logging
 5 | import re
 6 | import traceback
 7 | 
 8 | import scrapy
 9 | from scrapy_redis.spiders import RedisSpider
10 | 
11 | from spider.items import FileItem, UserItem
12 | from utils import get_shortkey
13 | 
14 | 
15 | class BaidupanSpider(RedisSpider):
16 |     name = 'baidupan'
17 | 
18 |     def make_request_from_data(self, data):
19 |         url = data.decode('utf-8')
20 |         key = get_shortkey(url)
21 |         url = "https://pan.baidu.com/api/shorturlinfo?web=5&app_id=250528&clienttype=5&shorturl={}".format(key)
22 |         return scrapy.Request(url, dont_filter=False, meta={"shorturl": key})
23 | 
24 |     def parse(self, response):
25 |         try:
26 |             data = json.loads(response.text)
27 |             if data["errno"] == -3:
28 |                 url = "https://pan.baidu.com/share/list?web=5&app_id=250528&channel=chunlei&clienttype=5&desc=1" \
29 |                       "&showempty=0&num=200&order=time&root=1&shorturl={}".format(response.meta['shorturl'][1:])
30 |                 meta = {
31 |                     "shorturl": data['shorturl'],
32 |                     "ctime": data['ctime'],
33 |                     "expiredType": data['expiredtype'],
34 |                     "share_username": data['share_username'],
35 |                     "share_photo": data["share_photo"]
36 |                 }
37 |                 yield scrapy.Request(url, dont_filter=False, callback=self.parse_data, meta=meta)
38 |             elif data["errno"] == -21:
39 |                 logging.info("分享已取消 %s", response.url)
40 |             elif data["errno"] == -9:
41 |                 logging.info("私密分享，开源版暂不支持 %s", response.url)
42 |             elif data["errno"] == 105 or data["errno"] == 2:
43 |                 logging.info("分享链接不对 %s", response.url)
44 |             else:
45 |                 logging.error("未知错误 errno: {}, url: {}", data["errno"], response.url)
46 |         except:
47 |             logging.error("解析错误 %s", response.url)
48 |             traceback.print_exc()
49 | 
50 |     def parse_data(self, response):
51 |         try:
52 |             data = json.loads(response.text)
53 |             if data['errno'] != 0:
54 |                 logging.error("数据接口错误，errno: {}, url: {}", data["errno"], response.url)
55 |                 return
56 | 
57 |             for file in data['list']:
58 |                 yield FileItem(
59 |                     url=response.meta['shorturl'],
60 |                     fs_id=file["fs_id"],
61 |                     server_filename=file["server_filename"],
62 |                     size=int(file['size']),
63 |                     server_mtime=int(file["server_mtime"]),
64 |                     server_ctime=int(file["server_ctime"]),
65 |                     local_mtime=int(file["local_mtime"]),
66 |                     local_ctime=int(file["local_ctime"]),
67 |                     isdir=int(file["isdir"]),
68 |                     category=int(file["category"]),
69 |                     path=file["path"],
70 |                     md5=file["md5"],
71 |                     thumbs=file.get("thumbs"),
72 |                     ctime=response.meta['ctime'],
73 |                     expiredType=response.meta['expiredType'],
74 |                     expires=response.meta['ctime'] + response.meta['expiredType'] if response.meta['expiredType'] > 0 else 0,
75 |                     shareid=data["share_id"],
76 |                     uk=data["uk"],
77 |                     last_updated=datetime.datetime.utcnow()
78 |                 )
79 | 
80 |             yield UserItem(
81 |                 uname=response.meta['share_username'],
82 |                 avatar_url=response.meta['share_photo'],
83 |                 uk=data["uk"],
84 |                 last_updated=datetime.datetime.utcnow()
85 |             )
86 |         except:
87 |             logging.error("数据解析错误 %s", response.url)
88 |             traceback.print_exc()
89 | 


--------------------------------------------------------------------------------
/tests/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/k1995/BaiduyunSpider/230717d57ffb28add71a47d1292d80406923eb3d/tests/__init__.py


--------------------------------------------------------------------------------
/tests/open_in_browser/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/k1995/BaiduyunSpider/230717d57ffb28add71a47d1292d80406923eb3d/tests/open_in_browser/__init__.py


--------------------------------------------------------------------------------
/tests/open_in_browser/private_share.py:
--------------------------------------------------------------------------------
 1 | # -*- coding: utf-8 -*-
 2 | import scrapy
 3 | from scrapy.utils.response import open_in_browser
 4 | from spider import settings
 5 | from scrapy.crawler import CrawlerProcess
 6 | 
 7 | 
 8 | class TestSpider(scrapy.Spider):
 9 |     name = 'test'
10 |     start_urls = ['https://pan.baidu.com/s/1ve2t_X9P8sssYnwFVJ36og']
11 | 
12 |     def parse(self, response):
13 |         open_in_browser(response)
14 | 
15 | 
16 | process = CrawlerProcess({
17 |     'USER_AGENT': settings.USER_AGENT
18 | })
19 | 
20 | process.crawl(TestSpider)
21 | process.start()
22 | 


--------------------------------------------------------------------------------
/tests/open_in_browser/public_share.py:
--------------------------------------------------------------------------------
 1 | # -*- coding: utf-8 -*-
 2 | import scrapy
 3 | from scrapy.utils.response import open_in_browser
 4 | from spider import settings
 5 | from scrapy.crawler import CrawlerProcess
 6 | 
 7 | 
 8 | class TestSpider(scrapy.Spider):
 9 |     name = 'test'
10 |     start_urls = ['https://pan.baidu.com/s/17BtXyO-i02gsC7h4QsKexg']
11 | 
12 |     def parse(self, response):
13 |         open_in_browser(response)
14 | 
15 | 
16 | process = CrawlerProcess({
17 |     'USER_AGENT': settings.USER_AGENT
18 | })
19 | 
20 | process.crawl(TestSpider)
21 | process.start()
22 | 


--------------------------------------------------------------------------------
/utils/__init__.py:
--------------------------------------------------------------------------------
 1 | from urllib import parse
 2 | import logging
 3 | 
 4 | 
 5 | def normalize_shareurl(url):
 6 |     base_url = "https://pan.baidu.com"
 7 |     u = parse.urlparse(url)
 8 |     if u.path.startswith('/s/'):
 9 |         return "{}{}".format(base_url, u.path)
10 |     logging.error("Bad url: {}", url)
11 |     raise Exception("URL格式错误")
12 | 
13 | 
14 | def get_shortkey(url):
15 |     u = parse.urlparse(url)
16 |     if u.path.startswith('/s/'):
17 |         return u.path.replace('/s/', '')
18 |     logging.error("Bad url: {}", url)
19 |     raise Exception("URL格式错误")
20 | 


--------------------------------------------------------------------------------
/utils/mongoflask.py:
--------------------------------------------------------------------------------
 1 | from datetime import datetime, date
 2 | 
 3 | import isodate as iso
 4 | from bson import ObjectId
 5 | from flask.json import JSONEncoder
 6 | from werkzeug.routing import BaseConverter
 7 | 
 8 | 
 9 | class MongoJSONEncoder(JSONEncoder):
10 |     def default(self, o):
11 |         if isinstance(o, (datetime, date)):
12 |             return iso.datetime_isoformat(o)
13 |         if isinstance(o, ObjectId):
14 |             return str(o)
15 |         else:
16 |             return super().default(o)
17 | 
18 | 
19 | class ObjectIdConverter(BaseConverter):
20 |     def to_python(self, value):
21 |         return ObjectId(value)
22 | 
23 |     def to_url(self, value):
24 |         return str(value)


--------------------------------------------------------------------------------
/web/admin/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # misc
12 | .DS_Store
13 | .env.local
14 | .env.development.local
15 | .env.test.local
16 | .env.production.local
17 | 
18 | npm-debug.log*
19 | yarn-debug.log*
20 | yarn-error.log*
21 | 


--------------------------------------------------------------------------------
/web/admin/README.md:
--------------------------------------------------------------------------------
1 | # BaiduyunSpider Admin


--------------------------------------------------------------------------------
/web/admin/build/asset-manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main.js": "/static/js/main.08bfe591.chunk.js",
 3 |   "main.js.map": "/static/js/main.08bfe591.chunk.js.map",
 4 |   "runtime~main.js": "/static/js/runtime~main.42ac5946.js",
 5 |   "runtime~main.js.map": "/static/js/runtime~main.42ac5946.js.map",
 6 |   "static/js/2.feb79fcc.chunk.js": "/static/js/2.feb79fcc.chunk.js",
 7 |   "static/js/2.feb79fcc.chunk.js.map": "/static/js/2.feb79fcc.chunk.js.map",
 8 |   "index.html": "/index.html",
 9 |   "precache-manifest.c5a31347d429141cbfdce28e2f0c87ab.js": "/precache-manifest.c5a31347d429141cbfdce28e2f0c87ab.js",
10 |   "service-worker.js": "/service-worker.js",
11 |   "static/media/google.svg": "/static/media/google.09aea0f5.svg",
12 |   "static/media/logo.svg": "/static/media/logo.3d432ca2.svg"
13 | }


--------------------------------------------------------------------------------
/web/admin/build/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/k1995/BaiduyunSpider/230717d57ffb28add71a47d1292d80406923eb3d/web/admin/build/favicon.ico


--------------------------------------------------------------------------------
/web/admin/build/index.html:
--------------------------------------------------------------------------------
1 | <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>BaiduyunSpider - 后台管理</title></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.feb79fcc.chunk.js"></script><script src="/static/js/main.08bfe591.chunk.js"></script></body></html>


--------------------------------------------------------------------------------
/web/admin/build/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/web/admin/build/precache-manifest.c5a31347d429141cbfdce28e2f0c87ab.js:
--------------------------------------------------------------------------------
 1 | self.__precacheManifest = [
 2 |   {
 3 |     "revision": "3d432ca2badb7e0130b379f9162b99b1",
 4 |     "url": "/static/media/logo.3d432ca2.svg"
 5 |   },
 6 |   {
 7 |     "revision": "09aea0f59807f6f4f66af7f5719cba9e",
 8 |     "url": "/static/media/google.09aea0f5.svg"
 9 |   },
10 |   {
11 |     "revision": "42ac5946195a7306e2a5",
12 |     "url": "/static/js/runtime~main.42ac5946.js"
13 |   },
14 |   {
15 |     "revision": "08bfe591336dd5ff714b",
16 |     "url": "/static/js/main.08bfe591.chunk.js"
17 |   },
18 |   {
19 |     "revision": "feb79fcc21ac50567ab5",
20 |     "url": "/static/js/2.feb79fcc.chunk.js"
21 |   },
22 |   {
23 |     "revision": "f8e3e39550fa263a5af468259b9225c0",
24 |     "url": "/index.html"
25 |   }
26 | ];


--------------------------------------------------------------------------------
/web/admin/build/service-worker.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Welcome to your Workbox-powered service worker!
 3 |  *
 4 |  * You'll need to register this file in your web app and you should
 5 |  * disable HTTP caching for this file too.
 6 |  * See https://goo.gl/nhQhGp
 7 |  *
 8 |  * The rest of the code is auto-generated. Please don't update this file
 9 |  * directly; instead, make changes to your Workbox build configuration
10 |  * and re-run your build process.
11 |  * See https://goo.gl/2aRDsh
12 |  */
13 | 
14 | importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");
15 | 
16 | importScripts(
17 |   "/precache-manifest.c5a31347d429141cbfdce28e2f0c87ab.js"
18 | );
19 | 
20 | workbox.clientsClaim();
21 | 
22 | /**
23 |  * The workboxSW.precacheAndRoute() method efficiently caches and responds to
24 |  * requests for URLs in the manifest.
25 |  * See https://goo.gl/S9QRab
26 |  */
27 | self.__precacheManifest = [].concat(self.__precacheManifest || []);
28 | workbox.precaching.suppressWarnings();
29 | workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
30 | 
31 | workbox.routing.registerNavigationRoute("/index.html", {
32 |   
33 |   blacklist: [/^\/_/,/\/[^\/]+\.[^\/]+$/],
34 | });
35 | 


--------------------------------------------------------------------------------
/web/admin/build/static/js/runtime~main.42ac5946.js:
--------------------------------------------------------------------------------
1 | !function(e){function r(r){for(var n,f,i=r[0],l=r[1],a=r[2],c=0,s=[];c<i.length;c++)f=i[c],o[f]&&s.push(o[f][0]),o[f]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var l=t[i];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var i=window.webpackJsonp=window.webpackJsonp||[],l=i.push.bind(i);i.push=r,i=i.slice();for(var a=0;a<i.length;a++)r(i[a]);var p=l;t()}([]);
2 | //# sourceMappingURL=runtime~main.42ac5946.js.map


--------------------------------------------------------------------------------
/web/admin/build/static/js/runtime~main.42ac5946.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../webpack/bootstrap"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","1","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice"],"mappings":"aACA,SAAAA,EAAAC,GAQA,IAPA,IAMAC,EAAAC,EANAC,EAAAH,EAAA,GACAI,EAAAJ,EAAA,GACAK,EAAAL,EAAA,GAIAM,EAAA,EAAAC,EAAA,GACQD,EAAAH,EAAAK,OAAoBF,IAC5BJ,EAAAC,EAAAG,GACAG,EAAAP,IACAK,EAAAG,KAAAD,EAAAP,GAAA,IAEAO,EAAAP,GAAA,EAEA,IAAAD,KAAAG,EACAO,OAAAC,UAAAC,eAAAC,KAAAV,EAAAH,KACAc,EAAAd,GAAAG,EAAAH,IAKA,IAFAe,KAAAhB,GAEAO,EAAAC,QACAD,EAAAU,OAAAV,GAOA,OAHAW,EAAAR,KAAAS,MAAAD,EAAAb,GAAA,IAGAe,IAEA,SAAAA,IAEA,IADA,IAAAC,EACAf,EAAA,EAAiBA,EAAAY,EAAAV,OAA4BF,IAAA,CAG7C,IAFA,IAAAgB,EAAAJ,EAAAZ,GACAiB,GAAA,EACAC,EAAA,EAAkBA,EAAAF,EAAAd,OAA2BgB,IAAA,CAC7C,IAAAC,EAAAH,EAAAE,GACA,IAAAf,EAAAgB,KAAAF,GAAA,GAEAA,IACAL,EAAAQ,OAAApB,IAAA,GACAe,EAAAM,IAAAC,EAAAN,EAAA,KAGA,OAAAD,EAIA,IAAAQ,EAAA,GAKApB,EAAA,CACAqB,EAAA,GAGAZ,EAAA,GAGA,SAAAS,EAAA1B,GAGA,GAAA4B,EAAA5B,GACA,OAAA4B,EAAA5B,GAAA8B,QAGA,IAAAC,EAAAH,EAAA5B,GAAA,CACAK,EAAAL,EACAgC,GAAA,EACAF,QAAA,IAUA,OANAhB,EAAAd,GAAAa,KAAAkB,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAnB,EAGAY,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACA1B,OAAA6B,eAAAT,EAAAM,EAAA,CAA0CI,YAAA,EAAAC,IAAAJ,KAK1CX,EAAAgB,EAAA,SAAAZ,GACA,qBAAAa,eAAAC,aACAlC,OAAA6B,eAAAT,EAAAa,OAAAC,YAAA,CAAwDC,MAAA,WAExDnC,OAAA6B,eAAAT,EAAA,cAAiDe,OAAA,KAQjDnB,EAAAoB,EAAA,SAAAD,EAAAE,GAEA,GADA,EAAAA,IAAAF,EAAAnB,EAAAmB,IACA,EAAAE,EAAA,OAAAF,EACA,KAAAE,GAAA,kBAAAF,QAAAG,WAAA,OAAAH,EACA,IAAAI,EAAAvC,OAAAwC,OAAA,MAGA,GAFAxB,EAAAgB,EAAAO,GACAvC,OAAA6B,eAAAU,EAAA,WAAyCT,YAAA,EAAAK,UACzC,EAAAE,GAAA,iBAAAF,EAAA,QAAAM,KAAAN,EAAAnB,EAAAS,EAAAc,EAAAE,EAAA,SAAAA,GAAgH,OAAAN,EAAAM,IAAqBC,KAAA,KAAAD,IACrI,OAAAF,GAIAvB,EAAA2B,EAAA,SAAAtB,GACA,IAAAM,EAAAN,KAAAiB,WACA,WAA2B,OAAAjB,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAgB,EAAAC,GAAsD,OAAA7C,OAAAC,UAAAC,eAAAC,KAAAyC,EAAAC,IAGtD7B,EAAA8B,EAAA,IAEA,IAAAC,EAAAC,OAAA,aAAAA,OAAA,iBACAC,EAAAF,EAAAhD,KAAA2C,KAAAK,GACAA,EAAAhD,KAAAX,EACA2D,IAAAG,QACA,QAAAvD,EAAA,EAAgBA,EAAAoD,EAAAlD,OAAuBF,IAAAP,EAAA2D,EAAApD,IACvC,IAAAU,EAAA4C,EAIAxC","file":"static/js/runtime~main.42ac5946.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t1: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"sourceRoot":""}


--------------------------------------------------------------------------------
/web/admin/build/static/media/google.09aea0f5.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 5 | <path style="fill:#FBBB00;" d="M113.47,309.408L95.648,375.94l-65.139,1.378C11.042,341.211,0,299.9,0,256
 6 | 	c0-42.451,10.324-82.483,28.624-117.732h0.014l57.992,10.632l25.404,57.644c-5.317,15.501-8.215,32.141-8.215,49.456
 7 | 	C103.821,274.792,107.225,292.797,113.47,309.408z"/>
 8 | <path style="fill:#518EF8;" d="M507.527,208.176C510.467,223.662,512,239.655,512,256c0,18.328-1.927,36.206-5.598,53.451
 9 | 	c-12.462,58.683-45.025,109.925-90.134,146.187l-0.014-0.014l-73.044-3.727l-10.338-64.535
10 | 	c29.932-17.554,53.324-45.025,65.646-77.911h-136.89V208.176h138.887L507.527,208.176L507.527,208.176z"/>
11 | <path style="fill:#28B446;" d="M416.253,455.624l0.014,0.014C372.396,490.901,316.666,512,256,512
12 | 	c-97.491,0-182.252-54.491-225.491-134.681l82.961-67.91c21.619,57.698,77.278,98.771,142.53,98.771
13 | 	c28.047,0,54.323-7.582,76.87-20.818L416.253,455.624z"/>
14 | <path style="fill:#F14336;" d="M419.404,58.936l-82.933,67.896c-23.335-14.586-50.919-23.012-80.471-23.012
15 | 	c-66.729,0-123.429,42.957-143.965,102.724l-83.397-68.276h-0.014C71.23,56.123,157.06,0,256,0
16 | 	C318.115,0,375.068,22.126,419.404,58.936z"/>
17 | <g>
18 | </g>
19 | <g>
20 | </g>
21 | <g>
22 | </g>
23 | <g>
24 | </g>
25 | <g>
26 | </g>
27 | <g>
28 | </g>
29 | <g>
30 | </g>
31 | <g>
32 | </g>
33 | <g>
34 | </g>
35 | <g>
36 | </g>
37 | <g>
38 | </g>
39 | <g>
40 | </g>
41 | <g>
42 | </g>
43 | <g>
44 | </g>
45 | <g>
46 | </g>
47 | </svg>
48 | 


--------------------------------------------------------------------------------
/web/admin/build/static/media/logo.3d432ca2.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="131px" height="106px" viewBox="0 0 131 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
 4 |     <title>logo_white</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <g id="logo_white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
 7 |         <g id="Group-39" transform="translate(12.000000, 16.000000)" stroke-width="16.3476923">
 8 |             <path d="M4,72.4669231 L52.2318841,0" id="Line-10" stroke="#FFFFFF"></path>
 9 |             <path d="M1.10416667,74.69 L105.551432,74.69" id="Line-10" stroke="#FBC02D"></path>
10 |             <path d="M52.2318841,0 L105.551432,74.69" id="Line-10" stroke="#FF5252"></path>
11 |         </g>
12 |     </g>
13 | </svg>


--------------------------------------------------------------------------------
/web/admin/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "flatlogic-material",
 3 |   "version": "1.0.0",
 4 |   "proxy": "http://localhost:5000",
 5 |   "dependencies": {
 6 |     "@material-ui/core": "^3.9.2",
 7 |     "@material-ui/icons": "^3.0.2",
 8 |     "apexcharts": "^3.6.3",
 9 |     "classnames": "^2.2.6",
10 |     "font-awesome": "4.7.0",
11 |     "line-awesome": "icons8/line-awesome",
12 |     "mui-datatables": "^2.0.0-beta.58",
13 |     "pretty-bytes": "^5.2.0",
14 |     "react": "^16.8.2",
15 |     "react-apexcharts": "^1.3.0",
16 |     "react-dom": "^16.8.2",
17 |     "react-google-maps": "^9.4.5",
18 |     "react-redux": "^6.0.1",
19 |     "react-router": "^4.3.1",
20 |     "react-router-dom": "^4.3.1",
21 |     "react-scripts": "2.1.5",
22 |     "react-syntax-highlighter": "^10.2.0",
23 |     "react-toastify": "^4.5.2",
24 |     "recharts": "^1.5.0",
25 |     "recompose": "^0.30.0",
26 |     "redux": "^4.0.1",
27 |     "redux-thunk": "^2.3.0",
28 |     "timeago.js": "^4.0.0-beta.2",
29 |     "tinycolor2": "^1.4.1"
30 |   },
31 |   "scripts": {
32 |     "start": "react-scripts start",
33 |     "build": "react-scripts build",
34 |     "test": "react-scripts test",
35 |     "eject": "react-scripts eject"
36 |   },
37 |   "eslintConfig": {
38 |     "extends": "react-app"
39 |   },
40 |   "browserslist": [
41 |     ">0.2%",
42 |     "not dead",
43 |     "not ie <= 11",
44 |     "not op_mini all"
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/web/admin/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/k1995/BaiduyunSpider/230717d57ffb28add71a47d1292d80406923eb3d/web/admin/public/favicon.ico


--------------------------------------------------------------------------------
/web/admin/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta
 7 |       name="viewport"
 8 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 9 |     />
10 |     <meta name="theme-color" content="#000000" />
11 |     <!--
12 |       manifest.json provides metadata used when your web app is installed on a
13 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
14 |     -->
15 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |     <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |     <title>BaiduyunSpider - 后台管理</title>
26 |   </head>
27 |   <body style="font-family: 'Roboto', sans-serif;">
28 |     <noscript>You need to enable JavaScript to run this app.</noscript>
29 |     <div id="root"></div>
30 |     <!--
31 |       This HTML file is a template.
32 |       If you open it directly in the browser, you will see an empty page.
33 | 
34 |       You can add webfonts, meta tags, or analytics to this file.
35 |       The build step will place the bundled scripts into the <body> tag.
36 | 
37 |       To begin the development, run `npm start` or `yarn start`.
38 |       To create a production bundle, use `npm run build` or `yarn build`.
39 |     -->
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/web/admin/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/web/admin/src/components/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
 3 | import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 4 | 
 5 | import themes, { overrides } from '../themes';
 6 | import Layout from './Layout';
 7 | import Error from '../pages/error';
 8 | import Login from '../pages/login';
 9 | 
10 | const theme = createMuiTheme({...themes.default, ...overrides});
11 | 
12 | const PrivateRoute = ({ component, ...rest }) => {
13 |   return (
14 |     <Route
15 |       {...rest} render={props => (
16 |       localStorage.getItem('id_token') ? (
17 |         React.createElement(component, props)
18 |       ) : (
19 |         <Redirect
20 |           to={{
21 |             pathname: '/login',
22 |             state: { from: props.location },
23 |           }}
24 |         />
25 |       )
26 |     )}
27 |     />
28 |   );
29 | };
30 | 
31 | const PublicRoute = ({ component, ...rest }) => {
32 |   return (
33 |     <Route
34 |       {...rest} render={props => (
35 |       localStorage.getItem('id_token') ? (
36 |         <Redirect
37 |           to={{
38 |             pathname: '/',
39 |           }}
40 |         />
41 |       ) : (
42 |         React.createElement(component, props)
43 |       )
44 |     )}
45 |     />
46 |   );
47 | };
48 | 
49 | const App = () => (
50 |   <MuiThemeProvider theme={theme}>
51 |     <BrowserRouter>
52 |       <Switch>
53 |         <Route exact path="/" render={() => <Redirect to="/app/dashboard" />} />
54 |         <Route exact path="/app" render={() => <Redirect to="/app/dashboard" />} />
55 |         <PrivateRoute path="/app" component={Layout} />
56 |         <PublicRoute path="/login" component={Login} />
57 |         <Route component={Error} />
58 |       </Switch>
59 |     </BrowserRouter>
60 |   </MuiThemeProvider>
61 | );
62 | 
63 | export default App;


--------------------------------------------------------------------------------
/web/admin/src/components/AppContainer.js:
--------------------------------------------------------------------------------
 1 | import { compose } from 'recompose';
 2 | import { connect } from 'react-redux';
 3 | 
 4 | import AppView from './App';
 5 | 
 6 | export default compose(
 7 |   connect(
 8 |     state => ({
 9 |       isAuthenticated: state.login.isAuthenticated,
10 |     })
11 |   )
12 | )(AppView);


--------------------------------------------------------------------------------
/web/admin/src/components/Header/HeaderContainer.js:
--------------------------------------------------------------------------------
 1 | import { compose, withState, withHandlers } from 'recompose';
 2 | import { connect } from 'react-redux';
 3 | 
 4 | import HeaderView from './HeaderView';
 5 | import { signOut } from '../../pages/login/LoginState';
 6 | import { toggleSidebar } from '../Layout/LayoutState';
 7 | 
 8 | export default compose(
 9 |   connect(
10 |     state => ({
11 |       isSidebarOpened: state.layout.isSidebarOpened,
12 |     }),
13 |     { signOut, toggleSidebar },
14 |   ),
15 |   withState('mailMenu', 'setMailMenu', null),
16 |   withState('isMailsUnread', 'setIsMailsUnread', true),
17 |   withState('notificationsMenu', 'setNotificationsMenu', null),
18 |   withState('isNotificationsUnread', 'setIsNotificationsUnread', true),
19 |   withState('profileMenu', 'setProfileMenu', null),
20 |   withState('isSearchOpen', 'setSearchOpen', false),
21 |   withHandlers({
22 |     openMailMenu: props => event => {
23 |       props.setMailMenu(event.currentTarget);
24 |       props.setIsMailsUnread(false);
25 |     },
26 |     closeMailMenu: props => () => {
27 |       props.setMailMenu(null);
28 |     },
29 |     openNotificationsMenu: props => event => {
30 |       props.setNotificationsMenu(event.currentTarget);
31 |       props.setIsNotificationsUnread(false);
32 |     },
33 |     closeNotificationsMenu: props => () => {
34 |       props.setNotificationsMenu(null);
35 |     },
36 |     toggleSearch: props => () => {
37 |       props.setSearchOpen(!props.isSearchOpen);
38 |     },
39 |     openProfileMenu: props => event => {
40 |       props.setProfileMenu(event.currentTarget);
41 |     },
42 |     closeProfileMenu: props => () => {
43 |       props.setProfileMenu(null);
44 |     },
45 |   })
46 | )(HeaderView);


--------------------------------------------------------------------------------
/web/admin/src/components/Header/HeaderView.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import {
  3 |   AppBar,
  4 |   Toolbar,
  5 |   IconButton,
  6 |   InputBase,
  7 |   withStyles
  8 | } from "@material-ui/core";
  9 | import {
 10 |   Menu as MenuIcon,
 11 |   Search as SearchIcon,
 12 |   ArrowBack as ArrowBackIcon
 13 | } from "@material-ui/icons";
 14 | import { fade } from "@material-ui/core/styles/colorManipulator";
 15 | import classNames from "classnames";
 16 | 
 17 | import { Typography } from "../Wrappers";
 18 | 
 19 | 
 20 | const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
 21 |   <AppBar position="fixed" className={classes.appBar}>
 22 |     <Toolbar className={classes.toolbar}>
 23 |       <IconButton
 24 |         color="inherit"
 25 |         onClick={toggleSidebar}
 26 |         className={classNames(
 27 |           classes.headerMenuButton,
 28 |           classes.headerMenuButtonCollapse
 29 |         )}
 30 |       >
 31 |         {isSidebarOpened ? (
 32 |           <ArrowBackIcon
 33 |             classes={{
 34 |               root: classNames(classes.headerIcon, classes.headerIconCollapse)
 35 |             }}
 36 |           />
 37 |         ) : (
 38 |           <MenuIcon
 39 |             classes={{
 40 |               root: classNames(classes.headerIcon, classes.headerIconCollapse)
 41 |             }}
 42 |           />
 43 |         )}
 44 |       </IconButton>
 45 |       <Typography variant="h6" weight="medium" className={classes.logotype}>BaiduyunSpider 后台管理</Typography>
 46 |       <div className={classes.grow} />
 47 |       <div
 48 |         className={classNames(classes.search, {
 49 |           [classes.searchFocused]: props.isSearchOpen
 50 |         })}
 51 |       >
 52 |         <div
 53 |           className={classNames(classes.searchIcon, {
 54 |             [classes.searchIconOpened]: props.isSearchOpen
 55 |           })}
 56 |           onClick={props.toggleSearch}
 57 |         >
 58 |           <SearchIcon classes={{ root: classes.headerIcon }} />
 59 |         </div>
 60 |         <InputBase
 61 |           placeholder="Search…"
 62 |           classes={{
 63 |             root: classes.inputRoot,
 64 |             input: classes.inputInput
 65 |           }}
 66 |         />
 67 |       </div>
 68 |     </Toolbar>
 69 |   </AppBar>
 70 | );
 71 | 
 72 | const styles = theme => ({
 73 |   logotype: {
 74 |     color: "white",
 75 |     marginLeft: theme.spacing.unit * 2.5,
 76 |     marginRight: theme.spacing.unit * 2.5,
 77 |     fontWeight: 500,
 78 |     fontSize: 18,
 79 |     whiteSpace: "nowrap",
 80 |     [theme.breakpoints.down("xs")]: {
 81 |       display: "none"
 82 |     }
 83 |   },
 84 |   appBar: {
 85 |     width: "100vw",
 86 |     zIndex: theme.zIndex.drawer + 1,
 87 |     transition: theme.transitions.create(["margin"], {
 88 |       easing: theme.transitions.easing.sharp,
 89 |       duration: theme.transitions.duration.leavingScreen
 90 |     })
 91 |   },
 92 |   toolbar: {
 93 |     paddingLeft: theme.spacing.unit * 2,
 94 |     paddingRight: theme.spacing.unit * 2
 95 |   },
 96 |   hide: {
 97 |     display: "none"
 98 |   },
 99 |   grow: {
100 |     flexGrow: 1
101 |   },
102 |   search: {
103 |     position: "relative",
104 |     borderRadius: 25,
105 |     paddingLeft: theme.spacing.unit * 2.5,
106 |     width: 36,
107 |     backgroundColor: fade(theme.palette.common.black, 0),
108 |     transition: theme.transitions.create(["background-color", "width"]),
109 |     "&:hover": {
110 |       cursor: "pointer",
111 |       backgroundColor: fade(theme.palette.common.black, 0.08)
112 |     }
113 |   },
114 |   searchFocused: {
115 |     backgroundColor: fade(theme.palette.common.black, 0.08),
116 |     width: "100%",
117 |     [theme.breakpoints.up("md")]: {
118 |       width: 250
119 |     }
120 |   },
121 |   searchIcon: {
122 |     width: 36,
123 |     right: 0,
124 |     height: "100%",
125 |     position: "absolute",
126 |     display: "flex",
127 |     alignItems: "center",
128 |     justifyContent: "center",
129 |     transition: theme.transitions.create("right"),
130 |     "&:hover": {
131 |       cursor: "pointer"
132 |     }
133 |   },
134 |   searchIconOpened: {
135 |     right: theme.spacing.unit * 1.25
136 |   },
137 |   inputRoot: {
138 |     color: "inherit",
139 |     width: "100%"
140 |   },
141 |   inputInput: {
142 |     height: 36,
143 |     padding: 0,
144 |     paddingRight: 36 + theme.spacing.unit * 1.25,
145 |     width: "100%"
146 |   },
147 |   messageContent: {
148 |     display: "flex",
149 |     flexDirection: "column"
150 |   },
151 |   headerMenu: {
152 |     marginTop: theme.spacing.unit * 7
153 |   },
154 |   headerMenuList: {
155 |     display: "flex",
156 |     flexDirection: "column"
157 |   },
158 |   headerMenuItem: {
159 |     "&:hover, &:focus": {
160 |       backgroundColor: theme.palette.primary.main,
161 |       color: "white"
162 |     }
163 |   },
164 |   headerMenuButton: {
165 |     marginLeft: theme.spacing.unit * 2,
166 |     padding: theme.spacing.unit / 2
167 |   },
168 |   headerMenuButtonCollapse: {
169 |     marginRight: theme.spacing.unit * 2
170 |   },
171 |   headerIcon: {
172 |     fontSize: 28,
173 |     color: "rgba(255, 255, 255, 0.35)"
174 |   },
175 |   headerIconCollapse: {
176 |     color: "white"
177 |   },
178 |   profileMenu: {
179 |     minWidth: 265
180 |   },
181 |   profileMenuUser: {
182 |     display: "flex",
183 |     flexDirection: "column",
184 |     padding: theme.spacing.unit * 2
185 |   },
186 |   profileMenuItem: {
187 |     color: theme.palette.text.hint
188 |   },
189 |   profileMenuIcon: {
190 |     marginRight: theme.spacing.unit * 2,
191 |     color: theme.palette.text.hint
192 |   },
193 |   profileMenuLink: {
194 |     fontSize: 16,
195 |     textDecoration: "none",
196 |     "&:hover": {
197 |       cursor: "pointer"
198 |     }
199 |   },
200 |   messageNotification: {
201 |     height: "auto",
202 |     display: "flex",
203 |     alignItems: "center",
204 |     "&:hover, &:focus": {
205 |       backgroundColor: theme.palette.background.light
206 |     }
207 |   },
208 |   messageNotificationSide: {
209 |     display: "flex",
210 |     flexDirection: "column",
211 |     alignItems: "center",
212 |     marginRight: theme.spacing.unit * 2
213 |   },
214 |   messageNotificationBodySide: {
215 |     alignItems: "flex-start",
216 |     marginRight: 0
217 |   },
218 |   sendMessageButton: {
219 |     margin: theme.spacing.unit * 4,
220 |     marginTop: theme.spacing.unit * 2,
221 |     marginBottom: theme.spacing.unit * 2,
222 |     textTransform: "none"
223 |   },
224 |   sendButtonIcon: {
225 |     marginLeft: theme.spacing.unit * 2
226 |   }
227 | });
228 | 
229 | export default withStyles(styles)(Header);
230 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Header/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Header",
3 |   "version": "0.0.0",
4 |   "private": true,
5 |   "main": "HeaderContainer.js"
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Layout/LayoutContainer.js:
--------------------------------------------------------------------------------
 1 | import { compose } from 'recompose';
 2 | import { connect } from 'react-redux';
 3 | 
 4 | import { toggleSidebar } from './LayoutState';
 5 | 
 6 | import LayoutView from './LayoutView';
 7 | 
 8 | 
 9 | export default compose(
10 |   connect(
11 |     state => ({
12 |       isSidebarOpened: state.layout.isSidebarOpened,
13 |     }),
14 |     { toggleSidebar },
15 |   )
16 | )(LayoutView);


--------------------------------------------------------------------------------
/web/admin/src/components/Layout/LayoutState.js:
--------------------------------------------------------------------------------
 1 | export const initialState = {
 2 |   isSidebarOpened: false,
 3 | };
 4 | 
 5 | export const TOGGLE_SIDEBAR = "Layout/TOGGLE_SIDEBAR";
 6 | 
 7 | export const toggleSidebar = () => ({
 8 |   type: TOGGLE_SIDEBAR,
 9 | })
10 | 
11 | export default function LoginReducer(state = initialState, { type, payload }) {
12 |   switch (type) {
13 |     case TOGGLE_SIDEBAR:
14 |       return {
15 |         ...state,
16 |         isSidebarOpened: !state.isSidebarOpened,
17 |       };
18 |     default:
19 |       return state;
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Layout/LayoutView.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { withStyles, CssBaseline } from '@material-ui/core';
 3 | import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
 4 | import classnames from 'classnames';
 5 | 
 6 | import Header from '../Header';
 7 | import Sidebar from '../Sidebar';
 8 | 
 9 | // pages
10 | import Dashboard from '../../pages/dashboard';
11 | import Files from '../../pages/files';
12 | import Users from '../../pages/users';
13 | 
14 | const Layout = ({ classes, isSidebarOpened, toggleSidebar }) => (
15 |   <div className={classes.root}>
16 |     <CssBaseline />
17 |     <BrowserRouter>
18 |       <React.Fragment>
19 |         <Header />
20 |         <Sidebar />
21 |         <div className={classnames(classes.content, { [classes.contentShift]: isSidebarOpened })}>
22 |           <div className={classes.fakeToolbar} />
23 |           <Switch>
24 |             <Route path="/app/users" component={Users} />
25 |             {/*<Route path="/app/dashboard" component={Dashboard} />*/}
26 |             <Route path="/app/dashboard" render={() => <Redirect to="/app/files" />} />
27 |             <Route path="/app/files" component={Files} />
28 |           </Switch>
29 |         </div>
30 |       </React.Fragment>
31 |     </BrowserRouter>
32 |   </div>
33 | );
34 | 
35 | const styles = theme => ({
36 |   root: {
37 |     display: 'flex',
38 |     maxWidth: '100vw',
39 |     overflowX: 'hidden',
40 |   },
41 |   content: {
42 |     flexGrow: 1,
43 |     padding: theme.spacing.unit * 3,
44 |     width: `calc(100vw - 240px)`,
45 |     minHeight: '100vh',
46 |   },
47 |   contentShift: {
48 |     width: `calc(100vw - ${240 + theme.spacing.unit * 6}px)`,
49 |     transition: theme.transitions.create(['width', 'margin'], {
50 |       easing: theme.transitions.easing.sharp,
51 |       duration: theme.transitions.duration.enteringScreen,
52 |     }),
53 |   },
54 |   fakeToolbar: {
55 |     ...theme.mixins.toolbar,
56 |   }
57 | });
58 | 
59 | export default withStyles(styles)(Layout);
60 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Layout/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Layout",
3 |   "version": "1.0.0",
4 |   "private": true,
5 |   "main": "LayoutContainer.js"
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Notification/Notification.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { Button, withStyles } from "@material-ui/core";
  3 | import {
  4 |   NotificationsNone as NotificationsIcon,
  5 |   ThumbUp as ThumbUpIcon,
  6 |   ShoppingCart as ShoppingCartIcon,
  7 |   LocalOffer as TicketIcon,
  8 |   BusinessCenter as DeliveredIcon,
  9 |   SmsFailed as FeedbackIcon,
 10 |   DiscFull as DiscIcon,
 11 |   Email as MessageIcon,
 12 |   Report as ReportIcon,
 13 |   Error as DefenceIcon,
 14 |   AccountBox as CustomerIcon,
 15 |   Done as ShippedIcon,
 16 |   Publish as UploadIcon,
 17 | } from "@material-ui/icons";
 18 | import classnames from "classnames";
 19 | import tinycolor from 'tinycolor2';
 20 | 
 21 | import { Typography } from "../Wrappers";
 22 | 
 23 | const typesIcons = {
 24 |   "e-commerce": <ShoppingCartIcon />,
 25 |   notification: <NotificationsIcon />,
 26 |   offer: <TicketIcon />,
 27 |   info: <ThumbUpIcon />,
 28 |   message: <MessageIcon />,
 29 |   feedback: <FeedbackIcon />,
 30 |   customer: <CustomerIcon />,
 31 |   shipped: <ShippedIcon />,
 32 |   delivered: <DeliveredIcon />,
 33 |   defence: <DefenceIcon />,
 34 |   report: <ReportIcon />,
 35 |   upload: <UploadIcon />,
 36 |   disc: <DiscIcon />,
 37 | };
 38 | 
 39 | const getIconByType = (type = "offer") => typesIcons[type];
 40 | 
 41 | const Notification = ({ classes, theme, variant, ...props }) => {
 42 |   const icon = getIconByType(props.type);
 43 |   const iconWithStyles = React.cloneElement(icon, {
 44 |     classes: {
 45 |       root: classes.notificationIcon
 46 |     },
 47 |     style: {
 48 |       color: variant !== "contained" && theme.palette[props.color] && theme.palette[props.color].main
 49 |     }
 50 |   });
 51 | 
 52 |   return (
 53 |     <div
 54 |       className={classnames(classes.notificationContainer, props.className, {
 55 |         [classes.notificationContained]: variant === "contained",
 56 |         [classes.notificationContainedShadowless]: props.shadowless,
 57 |       })}
 58 |       style={{
 59 |         backgroundColor:
 60 |           variant === "contained" &&
 61 |           theme.palette[props.color] &&
 62 |           theme.palette[props.color].main
 63 |       }}
 64 |     >
 65 |       <div
 66 |         className={classnames(classes.notificationIconContainer, {
 67 |           [classes.notificationIconContainerContained]: variant === "contained",
 68 |           [classes.notificationIconContainerRounded]: variant === "rounded",
 69 |         }
 70 |         )}
 71 |         style={{
 72 |           backgroundColor: variant === "rounded" &&
 73 |           theme.palette[props.color] &&
 74 |           tinycolor(theme.palette[props.color].main).setAlpha(0.15).toRgbString()
 75 |         }}
 76 |       >{iconWithStyles}</div>
 77 |       <div className={classes.messageContainer}>
 78 |         <Typography
 79 |           className={classnames({
 80 |             [classes.containedTypography]: variant === "contained"
 81 |           })}
 82 |           variant={props.typographyVariant}
 83 |           size={variant !== "contained" && !props.typographyVariant && "md"}
 84 |         >
 85 |           {props.message}
 86 |         </Typography>
 87 |         {props.extraButton && props.extraButtonClick && (<Button onClick={props.extraButtonClick} disableRipple className={classes.extraButton}>{props.extraButton}</Button>)}
 88 |       </div>
 89 |     </div>
 90 |   );
 91 | };
 92 | 
 93 | const styles = theme => ({
 94 |   notificationContainer: {
 95 |     display: "flex",
 96 |     alignItems: "center"
 97 |   },
 98 |   notificationContained: {
 99 |     borderRadius: 45,
100 |     height: 45,
101 |     boxShadow: theme.customShadows.widgetDark
102 |   },
103 |   notificationContainedShadowless: {
104 |     boxShadow: 'none',
105 |   },
106 |   notificationIconContainer: {
107 |     width: 45,
108 |     height: 45,
109 |     borderRadius: 45,
110 |     display: 'flex',
111 |     alignItems: 'center',
112 |     justifyContent: 'center',
113 |     fontSize: 24,
114 |   },
115 |   notificationIconContainerContained: {
116 |     fontSize: 18,
117 |     color: '#FFFFFF80',
118 |   },
119 |   notificationIconContainerRounded: {
120 |     marginRight: theme.spacing.unit * 2,
121 |   },
122 |   containedTypography: {
123 |     color: "white"
124 |   },
125 |   messageContainer: {
126 |     display: 'flex',
127 |     alignItems: 'center',
128 |     justifyContent: 'space-between',
129 |     flexGrow: 1,
130 |   },
131 |   extraButton: {
132 |     color: 'white',
133 |     '&:hover, &:focus': {
134 |       background: 'transparent',
135 |     }
136 |   },
137 | });
138 | 
139 | export default withStyles(styles, { withTheme: true })(Notification);
140 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Notification/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Notification",
3 |   "version": "0.0.0",
4 |   "private": true,
5 |   "main": "Notification.js"
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/components/PageTitle/PageTitle.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Button, withStyles } from "@material-ui/core";
 3 | import { Typography } from "../Wrappers";
 4 | 
 5 | const PageTitle = ({ classes, ...props }) => (
 6 |   <div className={classes.pageTitleContainer}>
 7 |     <Typography className={classes.typo} variant="h1" size="sm">
 8 |       {props.title}
 9 |     </Typography>
10 |     {props.button && (
11 |       <Button
12 |         classes={{ root: classes.button }}
13 |         variant="contained"
14 |         size="large"
15 |         color="secondary"
16 |         onClick={props.onClick}
17 |       >
18 |         {props.button}
19 |       </Button>
20 |     )}
21 |   </div>
22 | );
23 | 
24 | const styles = theme => ({
25 |   pageTitleContainer: {
26 |     display: "flex",
27 |     justifyContent: "space-between",
28 |     marginBottom: theme.spacing.unit * 4,
29 |     marginTop: theme.spacing.unit * 5
30 |   },
31 |   typo: {
32 |     color: theme.palette.text.hint,
33 |   },
34 |   button: {
35 |     boxShadow: theme.customShadows.widget,
36 |     textTransform: 'none',
37 |     '&:active' : {
38 |       boxShadow: theme.customShadows.widgetWide,
39 |     },
40 |   },
41 | });
42 | 
43 | export default withStyles(styles)(PageTitle);
44 | 


--------------------------------------------------------------------------------
/web/admin/src/components/PageTitle/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "PageTitle",
3 |   "version": "0.0.0",
4 |   "private": true,
5 |   "main": "PageTitle.js"
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Sidebar/SidebarContainer.js:
--------------------------------------------------------------------------------
 1 | import { withTheme } from '@material-ui/core/styles';
 2 | import { compose, withState, withHandlers, lifecycle }  from 'recompose';
 3 | import { connect } from 'react-redux';
 4 | import { withRouter } from "react-router-dom";
 5 | 
 6 | import { toggleSidebar } from '../Layout/LayoutState';
 7 | 
 8 | import SidebarView from './SidebarView';
 9 | 
10 | export default compose(
11 |   withRouter,
12 |   withTheme(),
13 |   connect(
14 |     state => ({
15 |       isSidebarOpened: state.layout.isSidebarOpened,
16 |     }),
17 |     { toggleSidebar },
18 |   ),
19 |   withState('isPermanent', 'setPermanent', true),
20 |   withHandlers({
21 |     handleWindowWidthChange: ({ width, isPermanent, setPermanent, theme }) => () => {
22 |       const windowWidth = window.innerWidth;
23 |       const breakpointWidth = theme.breakpoints.values.md;
24 |       const isSmallScreen = windowWidth < breakpointWidth;
25 | 
26 |       if (isSmallScreen && isPermanent) {
27 |         setPermanent(false);
28 |       } else if (!isSmallScreen && !isPermanent) {
29 |         setPermanent(true);
30 |       }
31 |     }
32 |   }),
33 |   lifecycle({
34 |     componentWillMount() {
35 |       window.addEventListener('resize', this.props.handleWindowWidthChange);
36 |       this.props.handleWindowWidthChange();
37 |     },
38 |     componentWillUnmount() {
39 |       window.removeEventListener('resize', this.props.handleWindowWidthChange);
40 |     },
41 |   }),
42 | )(SidebarView);
43 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Sidebar/SidebarView.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import {
  3 |   Drawer,
  4 |   IconButton,
  5 |   List,
  6 |   withStyles } from "@material-ui/core";
  7 | import {
  8 |   Home as HomeIcon,
  9 |   FormatSize as TypographyIcon,
 10 | 	Share as ShareIcon,
 11 | 	Contacts as UserIcon,
 12 |   ArrowBack as ArrowBackIcon,
 13 | } from "@material-ui/icons";
 14 | import classNames from 'classnames';
 15 | 
 16 | import SidebarLink from './components/SidebarLink/SidebarLinkContainer';
 17 | 
 18 | const structure = [
 19 |   // { id: 0, label: '仪表盘', link: '/app/dashboard', icon: <HomeIcon /> },
 20 |   { id: 1, label: '分享', link: '/app/files', icon: <ShareIcon /> },
 21 |   { id: 2, label: '分享者', link: '/app/users', icon: <UserIcon /> },
 22 | ];
 23 | 
 24 | const SidebarView = ({ classes, theme, toggleSidebar, isSidebarOpened, isPermanent, location }) => {
 25 |   return (
 26 |     <Drawer
 27 |       variant={isPermanent ? 'permanent' : 'temporary'}
 28 |       className={classNames(classes.drawer, {
 29 |         [classes.drawerOpen]: isSidebarOpened,
 30 |         [classes.drawerClose]: !isSidebarOpened,
 31 |       })}
 32 |       classes={{
 33 |         paper: classNames({
 34 |           [classes.drawerOpen]: isSidebarOpened,
 35 |           [classes.drawerClose]: !isSidebarOpened,
 36 |         }),
 37 |       }}
 38 |       open={isSidebarOpened}
 39 |     >
 40 |       <div className={classes.toolbar} />
 41 |       <div className={classes.mobileBackButton}>
 42 |         <IconButton
 43 |           onClick={toggleSidebar}
 44 |         >
 45 |           <ArrowBackIcon classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }} />
 46 |         </IconButton>
 47 |       </div>
 48 |       <List className={classes.sidebarList}>
 49 |         {structure.map(link => <SidebarLink key={link.id} location={location} isSidebarOpened={isSidebarOpened} {...link} />)}
 50 |       </List>
 51 |     </Drawer>
 52 |   );
 53 | }
 54 | 
 55 | const drawerWidth = 240;
 56 | 
 57 | const styles = theme => ({
 58 |   menuButton: {
 59 |     marginLeft: 12,
 60 |     marginRight: 36,
 61 |   },
 62 |   hide: {
 63 |     display: 'none',
 64 |   },
 65 |   drawer: {
 66 |     width: drawerWidth,
 67 |     flexShrink: 0,
 68 |     whiteSpace: 'nowrap',
 69 |   },
 70 |   drawerOpen: {
 71 |     width: drawerWidth,
 72 |     transition: theme.transitions.create('width', {
 73 |       easing: theme.transitions.easing.sharp,
 74 |       duration: theme.transitions.duration.enteringScreen,
 75 |     }),
 76 |   },
 77 |   drawerClose: {
 78 |     transition: theme.transitions.create('width', {
 79 |       easing: theme.transitions.easing.sharp,
 80 |       duration: theme.transitions.duration.leavingScreen,
 81 |     }),
 82 |     overflowX: 'hidden',
 83 |     width: theme.spacing.unit * 7 + 40,
 84 |     [theme.breakpoints.down("sm")]: {
 85 |       width: drawerWidth,
 86 |     }
 87 |   },
 88 |   toolbar: {
 89 |     ...theme.mixins.toolbar,
 90 |     [theme.breakpoints.down("sm")]: {
 91 |       display: 'none',
 92 |     }
 93 |   },
 94 |   content: {
 95 |     flexGrow: 1,
 96 |     padding: theme.spacing.unit * 3,
 97 |   },
 98 |   sidebarList: {
 99 |     marginTop: theme.spacing.unit * 6,
100 |   },
101 |   mobileBackButton: {
102 |     marginTop: theme.spacing.unit * .5,
103 |     marginLeft: theme.spacing.unit * 3,
104 |     [theme.breakpoints.only("sm")]: {
105 |       marginTop: theme.spacing.unit * .625,
106 |     },
107 |     [theme.breakpoints.up("md")]: {
108 |       display: 'none',
109 |     }
110 |   }
111 | });
112 | 
113 | export default withStyles(styles, { withTheme: true })(SidebarView);
114 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Sidebar/components/Dot.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import classnames from "classnames";
 3 | import { withStyles } from "@material-ui/core";
 4 | 
 5 | const Dot = ({ classes, size, color, theme }) => (
 6 |   <div
 7 |     className={classnames(classes.dotBase, {
 8 |       [classes.dotLarge]: size === "large",
 9 |       [classes.dotSmall]: size === "small"
10 |     })}
11 |     style={{ backgroundColor: color && theme.palette[color] && theme.palette[color].main }}
12 |   />
13 | );
14 | 
15 | const styles = theme => ({
16 |   dotBase: {
17 |     width: 5,
18 |     height: 5,
19 |     backgroundColor: theme.palette.text.hint,
20 |     borderRadius: "50%",
21 |     transition: theme.transitions.create("background-color")
22 |   },
23 |   dotLarge: {
24 |     width: 8,
25 |     height: 8
26 |   }
27 | });
28 | 
29 | export default withStyles(styles, { withTheme: true })(Dot);
30 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Sidebar/components/SidebarLink/SidebarLinkContainer.js:
--------------------------------------------------------------------------------
 1 | import { compose, withState, withHandlers } from 'recompose';
 2 | 
 3 | import SidebarLinkView from './SidebarLinkView';
 4 | 
 5 | export default compose(
 6 |   withState('isOpen', 'setIsOpen', false),
 7 |   withHandlers({
 8 |     toggleCollapse: (props) => (e) => {
 9 |       if (props.isSidebarOpened) {
10 |         e.preventDefault();
11 | 
12 |         props.setIsOpen(!props.isOpen);
13 |       }
14 |     },
15 |   }),
16 | )(SidebarLinkView);


--------------------------------------------------------------------------------
/web/admin/src/components/Sidebar/components/SidebarLink/SidebarLinkView.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import {
  3 |   Collapse,
  4 |   Divider,
  5 |   List,
  6 |   ListItem,
  7 |   ListItemIcon,
  8 |   ListItemText,
  9 |   Typography,
 10 |   withStyles
 11 | } from "@material-ui/core";
 12 | import { Link } from "react-router-dom";
 13 | import classnames from "classnames";
 14 | import { Inbox as InboxIcon } from "@material-ui/icons";
 15 | 
 16 | import Dot from "../Dot";
 17 | 
 18 | const SidebarLink = ({
 19 |   link,
 20 |   icon,
 21 |   label,
 22 |   children,
 23 |   location,
 24 |   classes,
 25 |   isSidebarOpened,
 26 |   nested,
 27 |   type,
 28 |   isOpen,
 29 |   toggleCollapse
 30 | }) => {
 31 | 
 32 |   const isLinkActive =
 33 |     link &&
 34 |     (location.pathname === link || location.pathname.indexOf(link) !== -1);
 35 | 
 36 |   if (type === "title")
 37 |     return (
 38 |       <Typography
 39 |         className={classnames(classes.linkText, classes.sectionTitle, {
 40 |           [classes.linkTextHidden]: !isSidebarOpened
 41 |         })}
 42 |       >
 43 |         {label}
 44 |       </Typography>
 45 |     );
 46 | 
 47 |   if (type === "divider") return <Divider className={classes.divider} />;
 48 | 
 49 |   if (!children)
 50 |     return (
 51 |       <ListItem
 52 |         button
 53 |         component={link && Link}
 54 |         to={link}
 55 |         className={classes.link}
 56 |         classes={{
 57 |           root: classnames(classes.linkRoot, {
 58 |             [classes.linkActive]: isLinkActive && !nested,
 59 |             [classes.linkNested]: nested
 60 |           })
 61 |         }}
 62 |         disableRipple
 63 |       >
 64 |         <ListItemIcon
 65 |           className={classnames(classes.linkIcon, {
 66 |             [classes.linkIconActive]: isLinkActive
 67 |           })}
 68 |         >
 69 |           {nested ? <Dot color={isLinkActive && "primary"} /> : icon}
 70 |         </ListItemIcon>
 71 |         <ListItemText
 72 |           classes={{
 73 |             primary: classnames(classes.linkText, {
 74 |               [classes.linkTextActive]: isLinkActive,
 75 |               [classes.linkTextHidden]: !isSidebarOpened
 76 |             })
 77 |           }}
 78 |           primary={label}
 79 |         />
 80 |       </ListItem>
 81 |     );
 82 | 
 83 |   return (
 84 |     <React.Fragment>
 85 |       <ListItem
 86 |         button
 87 |         component={link && Link}
 88 |         onClick={toggleCollapse}
 89 |         className={classes.link}
 90 |         to={link}
 91 |         disableRipple
 92 |       >
 93 |         <ListItemIcon
 94 |           className={classnames(classes.linkIcon, {
 95 |             [classes.linkIconActive]: isLinkActive
 96 |           })}
 97 |         >
 98 |           {icon ? icon : <InboxIcon />}
 99 |         </ListItemIcon>
100 |         <ListItemText
101 |           classes={{
102 |             primary: classnames(classes.linkText, {
103 |               [classes.linkTextActive]: isLinkActive,
104 |               [classes.linkTextHidden]: !isSidebarOpened
105 |             })
106 |           }}
107 |           primary={label}
108 |         />
109 |       </ListItem>
110 |       {children && (
111 |         <Collapse
112 |           in={isOpen && isSidebarOpened}
113 |           timeout="auto"
114 |           unmountOnExit
115 |           className={classes.nestedList}
116 |         >
117 |           <List component="div" disablePadding>
118 |             {children.map(childrenLink => (
119 |               <SidebarLink
120 |                 key={childrenLink && childrenLink.link}
121 |                 location={location}
122 |                 isSidebarOpened={isSidebarOpened}
123 |                 classes={classes}
124 |                 nested
125 |                 {...childrenLink}
126 |               />
127 |             ))}
128 |           </List>
129 |         </Collapse>
130 |       )}
131 |     </React.Fragment>
132 |   );
133 | };
134 | 
135 | const styles = theme => ({
136 |   link: {
137 |     textDecoration: "none",
138 |     paddingLeft: theme.spacing.unit * 4.5,
139 |     paddingTop: theme.spacing.unit * 2,
140 |     paddingBottom: theme.spacing.unit * 2,
141 |     "&:hover, &:focus": {
142 |       backgroundColor: theme.palette.background.light
143 |     }
144 |   },
145 |   linkActive: {
146 |     backgroundColor: theme.palette.background.light
147 |   },
148 |   linkNested: {
149 |     paddingLeft: 0,
150 |     paddingTop: theme.spacing.unit,
151 |     paddingBottom: theme.spacing.unit,
152 |     "&:hover, &:focus": {
153 |       backgroundColor: "#FFFFFF"
154 |     }
155 |   },
156 |   linkIcon: {
157 |     marginRight: theme.spacing.unit,
158 |     color: theme.palette.text.secondary + "99",
159 |     transition: theme.transitions.create("color"),
160 |     width: 24,
161 |     display: "flex",
162 |     justifyContent: "center"
163 |   },
164 |   linkIconActive: {
165 |     color: theme.palette.primary.main
166 |   },
167 |   linkText: {
168 |     padding: 0,
169 |     color: theme.palette.text.secondary + "CC",
170 |     transition: theme.transitions.create(["opacity", "color"]),
171 |     fontSize: 16
172 |   },
173 |   linkTextActive: {
174 |     color: theme.palette.text.primary
175 |   },
176 |   linkTextHidden: {
177 |     opacity: 0
178 |   },
179 |   nestedList: {
180 |     paddingLeft: theme.spacing.unit * 4.5 + 40
181 |   },
182 |   sectionTitle: {
183 |     marginLeft: theme.spacing.unit * 4.5,
184 |     marginTop: theme.spacing.unit * 2,
185 |     marginBottom: theme.spacing.unit * 2
186 |   },
187 |   divider: {
188 |     marginTop: theme.spacing.unit * 2,
189 |     marginBottom: theme.spacing.unit * 4,
190 |     height: 1,
191 |     backgroundColor: "#D8D8D880"
192 |   }
193 | });
194 | 
195 | export default withStyles(styles, { withTheme: true })(SidebarLink);
196 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Sidebar/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Sidebar",
3 |   "version": "0.0.0",
4 |   "private": true,
5 |   "main": "SidebarContainer.js"
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/components/UserAvatar/UserAvatar.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { withStyles } from "@material-ui/core";
 3 | 
 4 | import { Typography } from "../Wrappers";
 5 | 
 6 | const UserAvatar = ({ classes, theme, color = 'primary', ...props }) => {
 7 |   const letters = props.name
 8 |     .split(" ")
 9 |     .map(word => word[0])
10 |     .join("");
11 | 
12 |   return (
13 |     <div className={classes.avatar} style={{ backgroundColor: theme.palette[color].main}}>
14 |       <Typography className={classes.text}>{letters}</Typography>
15 |     </div>
16 |   );
17 | };
18 | 
19 | const styles = () => ({
20 |   avatar: {
21 |     width: 30,
22 |     height: 30,
23 |     display: "flex",
24 |     alignItems: "center",
25 |     justifyContent: "center",
26 |     borderRadius: "50%"
27 |   },
28 |   text: {
29 |     color: 'white',
30 |   }
31 | });
32 | 
33 | export default withStyles(styles, { withTheme: true })(UserAvatar);
34 | 


--------------------------------------------------------------------------------
/web/admin/src/components/UserAvatar/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "UserAvatar",
3 |   "version": "0.0.0",
4 |   "private": true,
5 |   "main": "UserAvatar.js"
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Widget/WidgetContainer.js:
--------------------------------------------------------------------------------
1 | import { compose, withState } from 'recompose';
2 | 
3 | import WidgetView from './WidgetView';
4 | 
5 | export default compose(
6 |   withState('moreButtonRef', 'setMoreButtonRef', null),
7 |   withState('isMoreMenuOpen', 'setMoreMenuOpen', false),
8 | )(WidgetView);


--------------------------------------------------------------------------------
/web/admin/src/components/Widget/WidgetView.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import classnames from "classnames";
  3 | import {
  4 |   Paper,
  5 |   IconButton,
  6 |   Menu,
  7 |   MenuItem,
  8 |   withStyles
  9 | } from "@material-ui/core";
 10 | import { MoreVert as MoreIcon } from "@material-ui/icons";
 11 | import Typography from "@material-ui/core/es/Typography/Typography";
 12 | 
 13 | const Widget = ({
 14 |   classes,
 15 |   children,
 16 |   title,
 17 |   noBodyPadding,
 18 |   bodyClass,
 19 |   className,
 20 |   disableWidgetMenu,
 21 |   ...props
 22 | }) => (
 23 |   <div className={classes.widgetWrapper}>
 24 |     <Paper className={classes.paper} classes={{ root: classes.widgetRoot }}>
 25 |       <div className={classes.widgetHeader}>
 26 |         {props.header ? (
 27 |           props.header
 28 |         ) : (
 29 |           <React.Fragment>
 30 |             <Typography variant="headline" color="textSecondary">
 31 |               {title}
 32 |             </Typography>
 33 |             {!disableWidgetMenu && (
 34 |               <IconButton
 35 |                 color="primary"
 36 |                 classes={{ root: classes.moreButton }}
 37 |                 aria-owns="widget-menu"
 38 |                 aria-haspopup="true"
 39 |                 onClick={() => props.setMoreMenuOpen(true)}
 40 |                 buttonRef={props.setMoreButtonRef}
 41 |               >
 42 |                 <MoreIcon />
 43 |               </IconButton>
 44 |             )}
 45 |           </React.Fragment>
 46 |         )}
 47 |       </div>
 48 |       <div
 49 |         className={classnames(classes.widgetBody, {
 50 |           [classes.noPadding]: noBodyPadding,
 51 |           [bodyClass]: bodyClass
 52 |         })}
 53 |       >
 54 |         {children}
 55 |       </div>
 56 |     </Paper>
 57 |     <Menu
 58 |       id="widget-menu"
 59 |       open={props.isMoreMenuOpen}
 60 |       anchorEl={props.moreButtonRef}
 61 |       onClose={() => props.setMoreMenuOpen(false)}
 62 |       disableAutoFocusItem
 63 |     >
 64 |       <MenuItem>
 65 |         <Typography>Edit</Typography>
 66 |       </MenuItem>
 67 |       <MenuItem>
 68 |         <Typography>Copy</Typography>
 69 |       </MenuItem>
 70 |       <MenuItem>
 71 |         <Typography>Delete</Typography>
 72 |       </MenuItem>
 73 |       <MenuItem>
 74 |         <Typography>Print</Typography>
 75 |       </MenuItem>
 76 |     </Menu>
 77 |   </div>
 78 | );
 79 | 
 80 | const styles = theme => ({
 81 |   widgetWrapper: {
 82 |     display: "flex",
 83 |     minHeight: "100%"
 84 |   },
 85 |   widgetHeader: {
 86 |     padding: theme.spacing.unit * 3,
 87 |     paddingBottom: theme.spacing.unit,
 88 |     display: "flex",
 89 |     justifyContent: "space-between",
 90 |     alignItems: "center"
 91 |   },
 92 |   widgetRoot: {
 93 |     boxShadow: theme.customShadows.widget
 94 |   },
 95 |   widgetBody: {
 96 |     paddingBottom: theme.spacing.unit * 3,
 97 |     paddingRight: theme.spacing.unit * 3,
 98 |     paddingLeft: theme.spacing.unit * 3
 99 |   },
100 |   noPadding: {
101 |     padding: 0
102 |   },
103 |   paper: {
104 |     display: "flex",
105 |     flexDirection: "column",
106 |     flexGrow: 1,
107 |     overflow: "hidden"
108 |   },
109 |   moreButton: {
110 |     margin: -theme.spacing.unit,
111 |     padding: 0,
112 |     width: 40,
113 |     height: 40,
114 |     color: theme.palette.text.hint,
115 |     "&:hover": {
116 |       backgroundColor: theme.palette.primary.main,
117 |       color: "rgba(255, 255, 255, 0.35)"
118 |     }
119 |   }
120 | });
121 | 
122 | export default withStyles(styles, { withTheme: true })(Widget);
123 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Widget/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "WidgetContainer",
3 |   "version": "0.0.0",
4 |   "private": true,
5 |   "main": "WidgetContainer.js"
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Wrappers/Wrappers.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import {
  3 |   withStyles,
  4 |   withTheme,
  5 |   Badge as BadgeBase,
  6 |   Typography as TypographyBase,
  7 |   Button as ButtonBase
  8 | } from "@material-ui/core";
  9 | import classnames from "classnames";
 10 | 
 11 | const getColor = (color, theme, brigtness = "main") => {
 12 |   if (color && theme.palette[color] && theme.palette[color][brigtness]) {
 13 |     return theme.palette[color][brigtness];
 14 |   }
 15 | };
 16 | 
 17 | const getFontWeight = style => {
 18 |   switch (style) {
 19 |     case "light":
 20 |       return 300;
 21 |     case "medium":
 22 |       return 500;
 23 |     case "bold":
 24 |       return 600;
 25 |     default:
 26 |       return 400;
 27 |   }
 28 | };
 29 | 
 30 | const getFontSize = (size, variant = "", theme) => {
 31 |   let multiplier;
 32 | 
 33 |   switch (size) {
 34 |     case "sm":
 35 |       multiplier = 0.8;
 36 |       break;
 37 |     case "md":
 38 |       multiplier = 1.5;
 39 |       break;
 40 |     case "xl":
 41 |       multiplier = 2;
 42 |       break;
 43 |     case "xxl":
 44 |       multiplier = 3;
 45 |       break;
 46 |     default:
 47 |       multiplier = 1;
 48 |       break;
 49 |   }
 50 | 
 51 |   const defaultSize =
 52 |     variant && theme.typography[variant]
 53 |       ? theme.typography[variant].fontSize
 54 |       : theme.typography.fontSize + "px";
 55 | 
 56 |   return `calc(${defaultSize} * ${multiplier})`;
 57 | };
 58 | 
 59 | const createStyled = (styles, options) => {
 60 |   const Styled = props => {
 61 |     const { children, ...other } = props;
 62 |     return children(other);
 63 |   };
 64 | 
 65 |   return withStyles(styles, options)(Styled);
 66 | };
 67 | 
 68 | const BadgeExtended = ({ classes, theme, children, colorBrightness, ...props }) => {
 69 |   const Styled = createStyled({
 70 |     badge: {
 71 |       backgroundColor: getColor(props.color, theme, colorBrightness)
 72 |     }
 73 |   });
 74 | 
 75 |   return (
 76 |     <Styled>
 77 |       {styledProps => (
 78 |         <BadgeBase
 79 |           classes={{
 80 |             badge: classnames(classes.badge, styledProps.classes.badge)
 81 |           }}
 82 |           {...props}
 83 |         >
 84 |           {children}
 85 |         </BadgeBase>
 86 |       )}
 87 |     </Styled>
 88 |   );
 89 | };
 90 | 
 91 | export const Badge = withStyles(
 92 |   theme => ({
 93 |     badge: {
 94 |       fontWeight: 600,
 95 |       height: 16,
 96 |       minWidth: 16
 97 |     }
 98 |   }),
 99 |   { withTheme: true }
100 | )(BadgeExtended);
101 | 
102 | const TypographyExtended = ({ theme, children, weight, size, colorBrightness, ...props }) => (
103 |   <TypographyBase
104 |     style={{
105 |       color: getColor(props.color, theme, colorBrightness),
106 |       fontWeight: getFontWeight(weight),
107 |       fontSize: getFontSize(size, props.variant, theme)
108 |     }}
109 |     {...props}
110 |   >
111 |     {children}
112 |   </TypographyBase>
113 | );
114 | 
115 | export const Typography = withTheme()(TypographyExtended);
116 | 
117 | const ButtonExtended = ({ theme, children, ...props }) => {
118 |   const Styled = createStyled({
119 |     button: {
120 |       backgroundColor: getColor(props.color, theme),
121 |       boxShadow: theme.customShadows.widget,
122 |       color: 'white',
123 |       '&:hover': {
124 |         backgroundColor: getColor(props.color, theme, 'light'),
125 |         boxShadow: theme.customShadows.widgetWide,
126 |       }
127 |     }
128 |   });
129 | 
130 |   return (
131 |     <Styled>
132 |       {({ classes }) => (
133 |         <ButtonBase classes={{ root: classes.button }} {...props}>
134 |           {children}
135 |         </ButtonBase>
136 |       )}
137 |     </Styled>
138 |   );
139 | };
140 | 
141 | export const Button = withTheme()(ButtonExtended);
142 | 


--------------------------------------------------------------------------------
/web/admin/src/components/Wrappers/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Wrappers",
3 |   "version": "0.0.0",
4 |   "private": true,
5 |   "main": "Wrappers.js"
6 | }
7 |   


--------------------------------------------------------------------------------
/web/admin/src/images/google.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 5 | <path style="fill:#FBBB00;" d="M113.47,309.408L95.648,375.94l-65.139,1.378C11.042,341.211,0,299.9,0,256
 6 | 	c0-42.451,10.324-82.483,28.624-117.732h0.014l57.992,10.632l25.404,57.644c-5.317,15.501-8.215,32.141-8.215,49.456
 7 | 	C103.821,274.792,107.225,292.797,113.47,309.408z"/>
 8 | <path style="fill:#518EF8;" d="M507.527,208.176C510.467,223.662,512,239.655,512,256c0,18.328-1.927,36.206-5.598,53.451
 9 | 	c-12.462,58.683-45.025,109.925-90.134,146.187l-0.014-0.014l-73.044-3.727l-10.338-64.535
10 | 	c29.932-17.554,53.324-45.025,65.646-77.911h-136.89V208.176h138.887L507.527,208.176L507.527,208.176z"/>
11 | <path style="fill:#28B446;" d="M416.253,455.624l0.014,0.014C372.396,490.901,316.666,512,256,512
12 | 	c-97.491,0-182.252-54.491-225.491-134.681l82.961-67.91c21.619,57.698,77.278,98.771,142.53,98.771
13 | 	c28.047,0,54.323-7.582,76.87-20.818L416.253,455.624z"/>
14 | <path style="fill:#F14336;" d="M419.404,58.936l-82.933,67.896c-23.335-14.586-50.919-23.012-80.471-23.012
15 | 	c-66.729,0-123.429,42.957-143.965,102.724l-83.397-68.276h-0.014C71.23,56.123,157.06,0,256,0
16 | 	C318.115,0,375.068,22.126,419.404,58.936z"/>
17 | <g>
18 | </g>
19 | <g>
20 | </g>
21 | <g>
22 | </g>
23 | <g>
24 | </g>
25 | <g>
26 | </g>
27 | <g>
28 | </g>
29 | <g>
30 | </g>
31 | <g>
32 | </g>
33 | <g>
34 | </g>
35 | <g>
36 | </g>
37 | <g>
38 | </g>
39 | <g>
40 | </g>
41 | <g>
42 | </g>
43 | <g>
44 | </g>
45 | <g>
46 | </g>
47 | </svg>
48 | 


--------------------------------------------------------------------------------
/web/admin/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './components/AppContainer';
 4 | import { Provider } from 'react-redux'
 5 | import * as serviceWorker from './serviceWorker';
 6 | 
 7 | import store from './store';
 8 | 
 9 | ReactDOM.render(
10 |   <Provider store={store}>
11 |     <App />
12 |   </Provider>,
13 |   document.getElementById('root'),
14 | );
15 | 
16 | // If you want your app to work offline and load faster, you can change
17 | // unregister() to register() below. Note this comes with some pitfalls.
18 | // Learn more about service workers: http://bit.ly/CRA-PWA
19 | serviceWorker.unregister();
20 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/charts/ChartsContainer.js:
--------------------------------------------------------------------------------
 1 | import { compose, withState, withHandlers } from "recompose";
 2 | 
 3 | import ChartsView from "./ChartsView";
 4 | 
 5 | export default compose(
 6 |   withState("activeIndex", "setActiveIndexId", 0),
 7 |   withHandlers({
 8 |       changeActiveIndexId: props => (event, id) => {
 9 |       props.setActiveIndexId(id);
10 |     }
11 |   })
12 | )(ChartsView);
13 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/charts/ChartsView.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Grid } from '@material-ui/core';
  3 | 
  4 | import Widget from '../../components/Widget';
  5 | import ApexLineChart from './components/ApexLineChart';
  6 | import ApexHeatmap from './components/ApexHeatmap'
  7 | import {
  8 |     CartesianGrid,
  9 |     Legend,
 10 |     Line,
 11 |     LineChart,
 12 |     Pie,
 13 |     PieChart,
 14 |     ResponsiveContainer, Sector,
 15 |     Tooltip,
 16 |     XAxis,
 17 |     YAxis
 18 | } from "recharts";
 19 | import {withTheme} from "@material-ui/core";
 20 | import PageTitle from "../../components/PageTitle";
 21 | 
 22 | const lineChartData = [
 23 |     {
 24 |         name: 'Page A', uv: 4000, pv: 2400, amt: 2400,
 25 |     },
 26 |     {
 27 |         name: 'Page B', uv: 3000, pv: 1398, amt: 2210,
 28 |     },
 29 |     {
 30 |         name: 'Page C', uv: 2000, pv: 9800, amt: 2290,
 31 |     },
 32 |     {
 33 |         name: 'Page D', uv: 2780, pv: 3908, amt: 2000,
 34 |     },
 35 |     {
 36 |         name: 'Page E', uv: 1890, pv: 4800, amt: 2181,
 37 |     },
 38 |     {
 39 |         name: 'Page F', uv: 2390, pv: 3800, amt: 2500,
 40 |     },
 41 |     {
 42 |         name: 'Page G', uv: 3490, pv: 4300, amt: 2100,
 43 |     },
 44 | ];
 45 | 
 46 | const pieChartData = [
 47 |     { name: 'Group A', value: 400 },
 48 |     { name: 'Group B', value: 300 },
 49 |     { name: 'Group C', value: 300 },
 50 |     { name: 'Group D', value: 200 },
 51 | ];
 52 | 
 53 | const renderActiveShape = (props) => {
 54 |     const RADIAN = Math.PI / 180;
 55 |     const {
 56 |         cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle,
 57 |         fill, payload, percent, value,
 58 |     } = props;
 59 |     const sin = Math.sin(-RADIAN * midAngle);
 60 |     const cos = Math.cos(-RADIAN * midAngle);
 61 |     const sx = cx + (outerRadius + 10) * cos;
 62 |     const sy = cy + (outerRadius + 10) * sin;
 63 |     const mx = cx + (outerRadius + 30) * cos;
 64 |     const my = cy + (outerRadius + 30) * sin;
 65 |     const ex = mx + (cos >= 0 ? 1 : -1) * 22;
 66 |     const ey = my;
 67 |     const textAnchor = cos >= 0 ? 'start' : 'end';
 68 | 
 69 |     return (
 70 |         <g>
 71 |             <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>{payload.name}</text>
 72 |             <Sector
 73 |                 cx={cx}
 74 |                 cy={cy}
 75 |                 innerRadius={innerRadius}
 76 |                 outerRadius={outerRadius}
 77 |                 startAngle={startAngle}
 78 |                 endAngle={endAngle}
 79 |                 fill={fill}
 80 |             />
 81 |             <Sector
 82 |                 cx={cx}
 83 |                 cy={cy}
 84 |                 startAngle={startAngle}
 85 |                 endAngle={endAngle}
 86 |                 innerRadius={outerRadius + 6}
 87 |                 outerRadius={outerRadius + 10}
 88 |                 fill={fill}
 89 |             />
 90 |             <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
 91 |             <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
 92 |             <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`PV ${value}`}</text>
 93 |             <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill="#999">
 94 |                 {`(Rate ${(percent * 100).toFixed(2)}%)`}
 95 |             </text>
 96 |         </g>
 97 |     );
 98 | };
 99 | 
100 | const ChartsView = (props) => (
101 |     <React.Fragment>
102 |       <PageTitle title="Charts Page - Data Display" button="Latest Reports" />
103 |       <Grid container spacing={32}>
104 |         <Grid item xs={12} md={6}>
105 |           <Widget title="Apex Line Chart" upperTitle noBodyPadding>
106 |             <ApexLineChart />
107 |           </Widget>
108 |         </Grid>
109 |         <Grid item xs={12} md={6}>
110 |           <Widget title="Apex Heatmap" upperTitle noBodyPadding>
111 |             <ApexHeatmap />
112 |           </Widget>
113 |         </Grid>
114 |         <Grid item xs={12} md={8}>
115 |           <Widget title="Simple Line Chart" noBodyPadding upperTitle>
116 |               <ResponsiveContainer width="100%" height={350}>
117 |                   <LineChart
118 |                       width={500}
119 |                       height={300}
120 |                       data={lineChartData}
121 |                       margin={{
122 |                           top: 5, right: 30, left: 20, bottom: 5,
123 |                       }}
124 |                   >
125 |                       <CartesianGrid strokeDasharray="3 3" />
126 |                       <XAxis dataKey="name" />
127 |                       <YAxis />
128 |                       <Tooltip />
129 |                       <Legend />
130 |                       <Line type="monotone" dataKey="pv" stroke={props.theme.palette.primary.main} activeDot={{ r: 8 }} />
131 |                       <Line type="monotone" dataKey="uv" stroke={props.theme.palette.secondary.main} />
132 |                   </LineChart>
133 |               </ResponsiveContainer>
134 |           </Widget>
135 |         </Grid>
136 |           <Grid item xs={12} md={4}>
137 |               <Widget title="Pie Chart with Tooltips" noBodyPadding upperTitle>
138 |                   <ResponsiveContainer width="100%" height={300}>
139 |                       <PieChart width={200} height={300}>
140 |                           <Pie
141 |                               activeIndex={props.activeIndex}
142 |                               activeShape={renderActiveShape}
143 |                               data={pieChartData}
144 |                               cx={200}
145 |                               cy={150}
146 |                               innerRadius={60}
147 |                               outerRadius={80}
148 |                               fill={props.theme.palette.primary.main}
149 |                               dataKey="value"
150 |                               onMouseEnter={props.changeActiveIndexId}
151 |                           />
152 |                       </PieChart>
153 |                   </ResponsiveContainer>
154 |               </Widget>
155 |           </Grid>
156 |       </Grid>
157 |     </React.Fragment>
158 | );
159 | 
160 | export default withTheme()(ChartsView);


--------------------------------------------------------------------------------
/web/admin/src/pages/charts/components/ApexHeatmap.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import ApexCharts from 'react-apexcharts';
  3 | import { withTheme } from "@material-ui/core";
  4 | 
  5 | const generateData = (count, yrange) => {
  6 |   var i = 0;
  7 |   var series = [];
  8 |   while (i < count) {
  9 |     var x = 'w' + (i + 1).toString();
 10 |     var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
 11 | 
 12 |     series.push({
 13 |       x: x,
 14 |       y: y
 15 |     });
 16 |     i++;
 17 |   }
 18 | 
 19 |   return series;
 20 | }
 21 | 
 22 | const themeOptions = (props) => {
 23 |   return {
 24 |     chart: {
 25 |       toolbar: {
 26 |         show: false,
 27 |       },
 28 |     },
 29 |     dataLabels: {
 30 |       enabled: false
 31 |     },
 32 |       colors: [props.theme.palette.primary.main],
 33 |   };
 34 | };
 35 | 
 36 | const series = [{
 37 |     name: 'Metric1',
 38 |     data: generateData(18, {
 39 |       min: 0,
 40 |       max: 90
 41 |     })
 42 |   },
 43 |   {
 44 |     name: 'Metric2',
 45 |     data: generateData(18, {
 46 |       min: 0,
 47 |       max: 90
 48 |     })
 49 |   },
 50 |   {
 51 |     name: 'Metric3',
 52 |     data: generateData(18, {
 53 |       min: 0,
 54 |       max: 90
 55 |     })
 56 |   },
 57 |   {
 58 |     name: 'Metric4',
 59 |     data: generateData(18, {
 60 |       min: 0,
 61 |       max: 90
 62 |     })
 63 |   },
 64 |   {
 65 |     name: 'Metric5',
 66 |     data: generateData(18, {
 67 |       min: 0,
 68 |       max: 90
 69 |     })
 70 |   },
 71 |   {
 72 |       name: 'Metric6',
 73 |       data: generateData(18, {
 74 |           min: 0,
 75 |           max: 90
 76 |       })
 77 |   },
 78 |   {
 79 |     name: 'Metric7',
 80 |     data: generateData(18, {
 81 |       min: 0,
 82 |       max: 90
 83 |     })
 84 |   },
 85 |   {
 86 |     name: 'Metric8',
 87 |     data: generateData(18, {
 88 |       min: 0,
 89 |       max: 90
 90 |     })
 91 |   },
 92 |   {
 93 |     name: 'Metric9',
 94 |     data: generateData(18, {
 95 |       min: 0,
 96 |       max: 90
 97 |     })
 98 |   }
 99 | ];
100 | 
101 | const ApexLineChart = (props) => (
102 |   <ApexCharts options={themeOptions(props)} series={series} type="heatmap" height={350} />
103 | );
104 | 
105 | export default withTheme()(ApexLineChart);


--------------------------------------------------------------------------------
/web/admin/src/pages/charts/components/ApexLineChart.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ApexCharts from 'react-apexcharts';
 3 | import { withTheme } from "@material-ui/core";
 4 | 
 5 | const series = [{
 6 |   name: 'series1',
 7 |   data: [31, 40, 28, 51, 42, 109, 100]
 8 | }, {
 9 |   name: 'series2',
10 |   data: [11, 32, 45, 32, 34, 52, 41]
11 | }];
12 | 
13 | const themeOptions = (props) => {
14 |   return {
15 |     dataLabels: {
16 |       enabled: false
17 |     },
18 |     stroke: {
19 |       curve: 'smooth'
20 |     },
21 |     xaxis: {
22 |       type: 'datetime',
23 |       categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00",
24 |         "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00",
25 |         "2018-09-19T06:30:00"
26 |       ],
27 |     },
28 |     tooltip: {
29 |       x: {
30 |         format: 'dd/MM/yy HH:mm'
31 |       },
32 |     },
33 |     fill: {
34 |       colors: [props.theme.palette.primary.light, props.theme.palette.success.light]
35 |     },
36 |     colors: [props.theme.palette.primary.main, props.theme.palette.success.main],
37 |     chart: {
38 |       toolbar: {
39 |         show: false,
40 |       },
41 |     },
42 |     legend: {
43 |       show: false,
44 |     }
45 |   };
46 | };
47 | 
48 | const ApexLineChart = (props) => (
49 |   <ApexCharts options={themeOptions(props)} series={series} type="area" height={350} />
50 | );
51 | 
52 | export default withTheme()(ApexLineChart);


--------------------------------------------------------------------------------
/web/admin/src/pages/charts/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Charts",
3 |   "version": "1.0.0",
4 |   "private": true,
5 |   "main": "ChartsContainer.js"
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/dashboard/Dashboard.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import {
  3 |   Grid,
  4 |   LinearProgress,
  5 |   Select,
  6 |   OutlinedInput,
  7 |   MenuItem,
  8 |   withStyles,
  9 | } from "@material-ui/core";
 10 | import {
 11 |   ResponsiveContainer,
 12 |   ComposedChart,
 13 |   AreaChart,
 14 |   LineChart,
 15 |   Line,
 16 |   Area,
 17 |   PieChart,
 18 |   Pie,
 19 |   Cell,
 20 |   YAxis,
 21 |   XAxis
 22 | } from "recharts";
 23 | 
 24 | import mock from "./mock";
 25 | import Widget from "../../components/Widget";
 26 | import PageTitle from "../../components/PageTitle";
 27 | import { Typography } from "../../components/Wrappers";
 28 | import Dot from "../../components/Sidebar/components/Dot";
 29 | 
 30 | import Table from "./components/Table/Table";
 31 | import BigStat from "./components/BigStat/BigStat";
 32 | 
 33 | const getRandomData = (length, min, max, multiplier = 10, maxDiff = 10) => {
 34 |   const array = new Array(length).fill();
 35 |   let lastValue;
 36 | 
 37 |   return array.map((item, index) => {
 38 |     let randomValue = Math.floor(Math.random() * multiplier + 1);
 39 | 
 40 |     while (
 41 |       randomValue <= min ||
 42 |       randomValue >= max ||
 43 |       (lastValue && randomValue - lastValue > maxDiff)
 44 |     ) {
 45 |       randomValue = Math.floor(Math.random() * multiplier + 1);
 46 |     }
 47 | 
 48 |     lastValue = randomValue;
 49 | 
 50 |     return { value: randomValue };
 51 |   });
 52 | };
 53 | 
 54 | const getMainChartData = () => {
 55 |   const resultArray = [];
 56 |   const tablet = getRandomData(31, 3500, 6500, 7500, 1000);
 57 |   const desktop = getRandomData(31, 1500, 7500, 7500, 1500);
 58 |   const mobile = getRandomData(31, 1500, 7500, 7500, 1500);
 59 | 
 60 |   for (let i = 0; i < tablet.length; i++) {
 61 |     resultArray.push({
 62 |       tablet: tablet[i].value,
 63 |       desktop: desktop[i].value,
 64 |       mobile: mobile[i].value
 65 |     });
 66 |   }
 67 | 
 68 |   return resultArray;
 69 | };
 70 | 
 71 | const mainChartData = getMainChartData();
 72 | 
 73 | const PieChartData = [
 74 |   { name: "Group A", value: 400, color: "primary" },
 75 |   { name: "Group B", value: 300, color: "secondary" },
 76 |   { name: "Group C", value: 300, color: "warning" },
 77 |   { name: "Group D", value: 200, color: "success" }
 78 | ];
 79 | 
 80 | const Dashboard = ({ classes, theme, ...props }) => {
 81 |   return (
 82 |     <React.Fragment>
 83 |       <PageTitle title="Dashboard" button="Latest Reports" />
 84 |       <Grid container spacing={32}>
 85 |         <Grid item lg={3} md={4} sm={6} xs={12}>
 86 |           <Widget
 87 |             title="Visits Today"
 88 |             upperTitle
 89 |             bodyClass={classes.fullHeightBody}
 90 |             className={classes.card}
 91 |           >
 92 |             <div className={classes.visitsNumberContainer}>
 93 |               <Typography size="xl" weight="medium">
 94 |                 12, 678
 95 |               </Typography>
 96 |               <LineChart
 97 |                 width={55}
 98 |                 height={30}
 99 |                 data={[
100 |                   { value: 10 },
101 |                   { value: 15 },
102 |                   { value: 10 },
103 |                   { value: 17 },
104 |                   { value: 18 }
105 |                 ]}
106 |                 margin={{ left: theme.spacing.unit * 2 }}
107 |               >
108 |                 <Line
109 |                   type="natural"
110 |                   dataKey="value"
111 |                   stroke={theme.palette.success.main}
112 |                   strokeWidth={2}
113 |                   dot={false}
114 |                 />
115 |               </LineChart>
116 |             </div>
117 |             <Grid
118 |               container
119 |               direction="row"
120 |               justify="space-between"
121 |               alignItems="center"
122 |             >
123 |               <Grid item>
124 |                 <Typography color="textSecondary">Registrations</Typography>
125 |                 <Typography size="md">860</Typography>
126 |               </Grid>
127 |               <Grid item>
128 |                 <Typography color="textSecondary">Sign Out</Typography>
129 |                 <Typography size="md">32</Typography>
130 |               </Grid>
131 |               <Grid item>
132 |                 <Typography color="textSecondary">Rate</Typography>
133 |                 <Typography size="md">3.25%</Typography>
134 |               </Grid>
135 |             </Grid>
136 |           </Widget>
137 |         </Grid>
138 |         <Grid item lg={3} md={8} sm={6} xs={12}>
139 |           <Widget
140 |             title="App Performance"
141 |             upperTitle
142 |             className={classes.card}
143 |             bodyClass={classes.fullHeightBody}
144 |           >
145 |             <div className={classes.performanceLegendWrapper}>
146 |               <div className={classes.legendElement}>
147 |                 <Dot color="warning" />
148 |                 <Typography
149 |                   color="textSecondary"
150 |                   className={classes.legendElementText}
151 |                 >
152 |                   Integration
153 |                 </Typography>
154 |               </div>
155 |               <div className={classes.legendElement}>
156 |                 <Dot color="primary" />
157 |                 <Typography
158 |                   color="textSecondary"
159 |                   className={classes.legendElementText}
160 |                 >
161 |                   SDK
162 |                 </Typography>
163 |               </div>
164 |             </div>
165 |             <div className={classes.progressSection}>
166 |               <Typography
167 |                 size="md"
168 |                 color="textSecondary"
169 |                 className={classes.progressSectionTitle}
170 |               >
171 |                 Integration
172 |               </Typography>
173 |               <LinearProgress
174 |                 variant="determinate"
175 |                 value={30}
176 |                 classes={{ barColorPrimary: classes.progressBar }}
177 |                 className={classes.progress}
178 |               />
179 |             </div>
180 |             <div>
181 |               <Typography
182 |                 size="md"
183 |                 color="textSecondary"
184 |                 className={classes.progressSectionTitle}
185 |               >
186 |                 SDK
187 |               </Typography>
188 |               <LinearProgress
189 |                 variant="determinate"
190 |                 value={55}
191 |                 classes={{ barColorPrimary: classes.progressBar }}
192 |                 className={classes.progress}
193 |               />
194 |             </div>
195 |           </Widget>
196 |         </Grid>
197 |         <Grid item lg={3} md={8} sm={6} xs={12}>
198 |           <Widget
199 |             title="Server Overview"
200 |             upperTitle
201 |             className={classes.card}
202 |             bodyClass={classes.fullHeightBody}
203 |           >
204 |             <div className={classes.serverOverviewElement}>
205 |               <Typography
206 |                 color="textSecondary"
207 |                 className={classes.serverOverviewElementText}
208 |               >
209 |                 60% / 37°С / 3.3 Ghz
210 |               </Typography>
211 |               <div className={classes.serverOverviewElementChartWrapper}>
212 |                 <ResponsiveContainer height={50} width="99%">
213 |                   <AreaChart data={getRandomData(10)}>
214 |                     <Area
215 |                       type="natural"
216 |                       dataKey="value"
217 |                       stroke={theme.palette.secondary.main}
218 |                       fill={theme.palette.secondary.light}
219 |                       strokeWidth={2}
220 |                       fillOpacity="0.25"
221 |                     />
222 |                   </AreaChart>
223 |                 </ResponsiveContainer>
224 |               </div>
225 |             </div>
226 |             <div className={classes.serverOverviewElement}>
227 |               <Typography
228 |                 color="textSecondary"
229 |                 className={classes.serverOverviewElementText}
230 |               >
231 |                 54% / 31°С / 3.3 Ghz
232 |               </Typography>
233 |               <div className={classes.serverOverviewElementChartWrapper}>
234 |                 <ResponsiveContainer height={50} width="99%">
235 |                   <AreaChart data={getRandomData(10)}>
236 |                     <Area
237 |                       type="natural"
238 |                       dataKey="value"
239 |                       stroke={theme.palette.primary.main}
240 |                       fill={theme.palette.primary.light}
241 |                       strokeWidth={2}
242 |                       fillOpacity="0.25"
243 |                     />
244 |                   </AreaChart>
245 |                 </ResponsiveContainer>
246 |               </div>
247 |             </div>
248 |             <div className={classes.serverOverviewElement}>
249 |               <Typography
250 |                 color="textSecondary"
251 |                 className={classes.serverOverviewElementText}
252 |               >
253 |                 57% / 21°С / 3.3 Ghz
254 |               </Typography>
255 |               <div className={classes.serverOverviewElementChartWrapper}>
256 |                 <ResponsiveContainer height={50} width="99%">
257 |                   <AreaChart data={getRandomData(10)}>
258 |                     <Area
259 |                       type="natural"
260 |                       dataKey="value"
261 |                       stroke={theme.palette.warning.main}
262 |                       fill={theme.palette.warning.light}
263 |                       strokeWidth={2}
264 |                       fillOpacity="0.25"
265 |                     />
266 |                   </AreaChart>
267 |                 </ResponsiveContainer>
268 |               </div>
269 |             </div>
270 |           </Widget>
271 |         </Grid>
272 |         <Grid item lg={3} md={4} sm={6} xs={12}>
273 |           <Widget title="Revenue Breakdown" upperTitle className={classes.card}>
274 |             <Grid container spacing={16}>
275 |               <Grid item sm={6}>
276 |                 <PieChart
277 |                   width={160}
278 |                   height={144}
279 |                   margin={{ left: theme.spacing.unit * 2 }}
280 |                 >
281 |                   <Pie
282 |                     data={PieChartData}
283 |                     innerRadius={45}
284 |                     outerRadius={60}
285 |                     dataKey="value"
286 |                   >
287 |                     {PieChartData.map((entry, index) => (
288 |                       <Cell
289 |                         key={`cell-${index}`}
290 |                         fill={theme.palette[entry.color].main}
291 |                       />
292 |                     ))}
293 |                   </Pie>
294 |                 </PieChart>
295 |               </Grid>
296 |               <Grid item sm={6}>
297 |                 <div className={classes.pieChartLegendWrapper}>
298 |                   {PieChartData.map(({ name, value, color }, index) => (
299 |                     <div key={color} className={classes.legendItemContainer}>
300 |                       <Dot color={color} />
301 |                       <Typography>&nbsp;{name}&nbsp;</Typography>
302 |                       <Typography color="textSecondary">
303 |                         &nbsp;{value}
304 |                       </Typography>
305 |                     </div>
306 |                   ))}
307 |                 </div>
308 |               </Grid>
309 |             </Grid>
310 |           </Widget>
311 |         </Grid>
312 |         <Grid item xs={12}>
313 |           <Widget
314 |             header={
315 |               <div className={classes.mainChartHeader}>
316 |                 <Typography variant="headline" color="textSecondary">
317 |                   Daily Line Chart
318 |                 </Typography>
319 |                 <div className={classes.mainChartHeaderLabels}>
320 |                   <div className={classes.mainChartHeaderLabel}>
321 |                     <Dot color="warning" />
322 |                     <Typography className={classes.mainChartLegentElement}>Tablet</Typography>
323 |                   </div>
324 |                   <div className={classes.mainChartHeaderLabel}>
325 |                     <Dot color="primary" />
326 |                     <Typography className={classes.mainChartLegentElement}>Mobile</Typography>
327 |                   </div>
328 |                   <div className={classes.mainChartHeaderLabel}>
329 |                     <Dot color="primary" />
330 |                     <Typography className={classes.mainChartLegentElement}>Desktop</Typography>
331 |                   </div>
332 |                 </div>
333 |                 <Select
334 |                   value={props.mainChartState}
335 |                   onChange={e => props.setMainChartState(e.target.value)}
336 |                   input={
337 |                     <OutlinedInput
338 |                       labelWidth={0}
339 |                       classes={{ notchedOutline: classes.mainChartSelectRoot, input: classes.mainChartSelect }}
340 |                     />
341 |                   }
342 |                   autoWidth
343 |                 >
344 |                   <MenuItem value="daily">Daily</MenuItem>
345 |                   <MenuItem value="weekly">Weekly</MenuItem>
346 |                   <MenuItem value="monthly">Monthly</MenuItem>
347 |                 </Select>
348 |               </div>
349 |             }
350 |           >
351 |             <ResponsiveContainer width="100%" height={350}>
352 |               <ComposedChart
353 |                 margin={{ top: 0, right: -15, left: -15, bottom: 0 }}
354 |                 data={mainChartData}
355 |               >
356 |                 <YAxis
357 |                   ticks={[0, 2500, 5000, 7500]}
358 |                   tick={{ fill: theme.palette.text.hint + '80', fontSize: 14 }}
359 |                   stroke={theme.palette.text.hint  + '80'}
360 |                   tickLine={false}
361 |                 />
362 |                 <XAxis
363 |                   tickFormatter={i => i + 1}
364 |                   tick={{ fill: theme.palette.text.hint  + '80', fontSize: 14 }}
365 |                   stroke={theme.palette.text.hint  + '80'}
366 |                   tickLine={false}
367 |                 />
368 |                 <Area
369 |                   type="natural"
370 |                   dataKey="desktop"
371 |                   fill={theme.palette.background.light}
372 |                   strokeWidth={0}
373 |                   activeDot={false}
374 |                 />
375 |                 <Line
376 |                   type="natural"
377 |                   dataKey="mobile"
378 |                   stroke={theme.palette.primary.main}
379 |                   strokeWidth={2}
380 |                   dot={false}
381 |                   activeDot={false}
382 |                 />
383 |                 <Line
384 |                   type="linear"
385 |                   dataKey="tablet"
386 |                   stroke={theme.palette.warning.main}
387 |                   strokeWidth={2}
388 |                   dot={{
389 |                     stroke: theme.palette.warning.dark,
390 |                     strokeWidth: 2,
391 |                     fill: theme.palette.warning.main
392 |                   }}
393 |                 />
394 |               </ComposedChart>
395 |             </ResponsiveContainer>
396 |           </Widget>
397 |         </Grid>
398 |         {mock.bigStat.map(stat => (
399 |           <Grid item md={4} sm={6} xs={12} key={stat.product}>
400 |             <BigStat {...stat} />
401 |           </Grid>
402 |         ))}
403 |         <Grid item xs={12}>
404 |           <Widget
405 |             title="Support Requests"
406 |             upperTitle
407 |             noBodyPadding
408 |             bodyClass={classes.tableWidget}
409 |           >
410 |             <Table data={mock.table} />
411 |           </Widget>
412 |         </Grid>
413 |       </Grid>
414 |     </React.Fragment>
415 |   );
416 | };
417 | 
418 | const styles = theme => ({
419 |   card: {
420 |     minHeight: "100%",
421 |     display: "flex",
422 |     flexDirection: "column"
423 |   },
424 |   visitsNumberContainer: {
425 |     display: "flex",
426 |     alignItems: "center",
427 |     flexGrow: 1,
428 |     paddingBottom: theme.spacing.unit
429 |   },
430 |   progressSection: {
431 |     marginBottom: theme.spacing.unit
432 |   },
433 |   progressTitle: {
434 |     marginBottom: theme.spacing.unit * 2
435 |   },
436 |   progress: {
437 |     marginBottom: theme.spacing.unit,
438 |     backgroundColor: theme.palette.primary.main
439 |   },
440 |   pieChartLegendWrapper: {
441 |     height: "100%",
442 |     display: "flex",
443 |     flexDirection: "column",
444 |     justifyContent: "center",
445 |     alignItems: "flex-end",
446 |     marginRight: theme.spacing.unit
447 |   },
448 |   legendItemContainer: {
449 |     display: "flex",
450 |     alignItems: "center",
451 |     marginBottom: theme.spacing.unit
452 |   },
453 |   fullHeightBody: {
454 |     display: "flex",
455 |     flexGrow: 1,
456 |     flexDirection: "column",
457 |     justifyContent: "space-between"
458 |   },
459 |   tableWidget: {
460 |     overflowX: "auto"
461 |   },
462 |   progressBar: {
463 |     backgroundColor: theme.palette.warning.main
464 |   },
465 |   performanceLegendWrapper: {
466 |     display: "flex",
467 |     flexGrow: 1,
468 |     alignItems: "center",
469 |     marginBottom: theme.spacing.unit
470 |   },
471 |   legendElement: {
472 |     display: "flex",
473 |     alignItems: "center",
474 |     marginRight: theme.spacing.unit * 2,
475 |   },
476 |   legendElementText: {
477 |     marginLeft: theme.spacing.unit
478 |   },
479 |   serverOverviewElement: {
480 |     display: "flex",
481 |     alignItems: "center",
482 |     maxWidth: "100%"
483 |   },
484 |   serverOverviewElementText: {
485 |     minWidth: 145,
486 |     paddingRight: theme.spacing.unit * 2
487 |   },
488 |   serverOverviewElementChartWrapper: {
489 |     width: "100%"
490 |   },
491 |   mainChartHeader: {
492 |     width: "100%",
493 |     display: "flex",
494 |     alignItems: "center",
495 |     justifyContent: "space-between",
496 |     [theme.breakpoints.only("xs")]: {
497 |       flexWrap: 'wrap',
498 |     }
499 |   },
500 |   mainChartHeaderLabels: {
501 |     display: "flex",
502 |     alignItems: "center",
503 |     [theme.breakpoints.only("xs")]: {
504 |       order: 3,
505 |       width: '100%',
506 |       justifyContent: 'center',
507 |       marginTop: theme.spacing.unit,
508 |       marginBottom: theme.spacing.unit,
509 |     }
510 |   },
511 |   mainChartHeaderLabel: {
512 |     display: "flex",
513 |     alignItems: "center",
514 |     marginLeft: theme.spacing.unit * 3,
515 |   },
516 |   mainChartSelectRoot: {
517 |     borderColor: theme.palette.text.hint + '80 !important',
518 |   },
519 |   mainChartSelect: {
520 |     padding: 10,
521 |     paddingRight: 25
522 |   },
523 |   mainChartLegentElement: {
524 |     fontSize: '18px !important',
525 |     marginLeft: theme.spacing.unit,
526 |   }
527 | });
528 | 
529 | export default withStyles(styles, { withTheme: true })(Dashboard);
530 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/dashboard/DashboardContainer.js:
--------------------------------------------------------------------------------
1 | import { compose, withState } from "recompose";
2 | 
3 | import DashboardView from "./Dashboard";
4 | 
5 | export default compose(
6 |   withState("mainChartState", "setMainChartState", "monthly")
7 | )(DashboardView);
8 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/dashboard/components/BigStat/BigStat.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent } from "react";
  2 | import { Grid, Select, MenuItem, Input, withStyles } from "@material-ui/core";
  3 | import { ArrowForward as ArrowForwardIcon } from "@material-ui/icons";
  4 | import { BarChart, Bar } from "recharts";
  5 | import classnames from "classnames";
  6 | 
  7 | import Widget from "../../../../components/Widget";
  8 | import { Typography } from "../../../../components/Wrappers";
  9 | 
 10 | const getRandomData = () =>
 11 |   Array(7)
 12 |     .fill()
 13 |     .map(() => ({ value: Math.floor(Math.random() * 10) + 1 }));
 14 | 
 15 | class BigStat extends PureComponent {
 16 |   state = { value: "daily" };
 17 | 
 18 |   changeValue = event => {
 19 |     this.setState({ value: event.target.value });
 20 |   };
 21 | 
 22 |   render() {
 23 |     const {
 24 |       product,
 25 |       theme,
 26 |       total,
 27 |       color,
 28 |       registrations,
 29 |       bounce,
 30 |       classes
 31 |     } = this.props;
 32 |     const { value } = this.state;
 33 | 
 34 |     return (
 35 |       <Widget
 36 |         header={
 37 |           <div className={classes.title}>
 38 |             <Typography variant="h5">{product}</Typography>
 39 | 
 40 |             <Select
 41 |               value={this.state.value}
 42 |               onChange={this.changeValue}
 43 |               input={
 44 |                 <Input
 45 |                   disableUnderline
 46 |                   classes={{ input: classes.selectInput }}
 47 |                 />
 48 |               }
 49 |               className={classes.select}
 50 |             >
 51 |               <MenuItem value="daily">Daily</MenuItem>
 52 |               <MenuItem value="weekly">Weekly</MenuItem>
 53 |               <MenuItem value="monthly">Monthly</MenuItem>
 54 |             </Select>
 55 |           </div>
 56 |         }
 57 |         upperTitle
 58 |       >
 59 |         <div className={classes.totalValueContainer}>
 60 |           <div className={classes.totalValue}>
 61 |             <Typography size="xxl" color="textSecondary">
 62 |               {total[value]}
 63 |             </Typography>
 64 |             <Typography color={total.percent.profit ? "success" : "secondary"}>
 65 |               &nbsp;{total.percent.profit ? "+" : "-"}
 66 |               {total.percent.value}%
 67 |             </Typography>
 68 |           </div>
 69 |           <BarChart width={150} height={70} data={getRandomData()}>
 70 |             <Bar
 71 |               dataKey="value"
 72 |               fill={theme.palette[color].main}
 73 |               radius={10}
 74 |               barSize={10}
 75 |             />
 76 |           </BarChart>
 77 |         </div>
 78 |         <div className={classes.bottomStatsContainer}>
 79 |           <div className={classnames(classes.statCell, classes.borderRight)}>
 80 |             <Grid container alignItems="center">
 81 |               <Typography variant="h6">{registrations[value].value}</Typography>
 82 |               <ArrowForwardIcon
 83 |                 className={classnames(classes.profitArrow, {
 84 |                   [!registrations[value].profit]: classes.profitArrowDanger
 85 |                 })}
 86 |               />
 87 |             </Grid>
 88 |             <Typography size="sm" color="textSecondary">
 89 |               Registrations
 90 |             </Typography>
 91 |           </div>
 92 |           <div className={classes.statCell}>
 93 |             <Grid container alignItems="center">
 94 |               <Typography variant="h6">{bounce[value].value}%</Typography>
 95 |               <ArrowForwardIcon
 96 |                 className={classnames(classes.profitArrow, {
 97 |                   [!registrations[value].profit]: classes.profitArrowDanger
 98 |                 })}
 99 |               />
100 |             </Grid>
101 |             <Typography size="sm" color="textSecondary">
102 |               Bounce Rate
103 |             </Typography>
104 |           </div>
105 |           <div className={classnames(classes.statCell, classes.borderRight)}>
106 |             <Grid container alignItems="center">
107 |               <Typography variant="h6">
108 |                 {registrations[value].value * 10}
109 |               </Typography>
110 |               <ArrowForwardIcon
111 |                 className={classnames(classes.profitArrow, {
112 |                   [classes.profitArrowDanger]: !registrations[value].profit
113 |                 })}
114 |               />
115 |             </Grid>
116 |             <Typography size="sm" color="textSecondary">
117 |               Views
118 |             </Typography>
119 |           </div>
120 |         </div>
121 |       </Widget>
122 |     );
123 |   }
124 | }
125 | 
126 | const styles = theme => ({
127 |   title: {
128 |     display: "flex",
129 |     flexDirection: "row",
130 |     justifyContent: "space-between",
131 |     alignItems: "center",
132 |     width: "100%",
133 |     marginBottom: theme.spacing.unit
134 |   },
135 |   bottomStatsContainer: {
136 |     display: "flex",
137 |     justifyContent: "space-between",
138 |     margin: theme.spacing.unit * -2,
139 |     marginTop: theme.spacing.unit
140 |   },
141 |   statCell: {
142 |     padding: theme.spacing.unit * 2
143 |   },
144 |   totalValueContainer: {
145 |     display: "flex",
146 |     alignItems: "flex-end",
147 |     justifyContent: "space-between"
148 |   },
149 |   totalValue: {
150 |     display: "flex",
151 |     alignItems: "baseline"
152 |   },
153 |   profitArrow: {
154 |     transform: "rotate(-45deg)",
155 |     fill: theme.palette.success.main
156 |   },
157 |   profitArrowDanger: {
158 |     transform: "rotate(45deg)",
159 |     fill: theme.palette.secondary.main
160 |   },
161 |   selectInput: {
162 |     padding: 10,
163 |     paddingRight: 25,
164 |     "&:focus": {
165 |       backgroundColor: "white"
166 |     }
167 |   }
168 | });
169 | 
170 | export default withStyles(styles, { withTheme: true })(BigStat);
171 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/dashboard/components/Table/Table.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {
 3 |   Table,
 4 |   TableRow,
 5 |   TableHead,
 6 |   TableBody,
 7 |   TableCell,
 8 | } from "@material-ui/core";
 9 | import { Button } from '../../../../components/Wrappers';
10 | 
11 | const states = {
12 |   sent: "success",
13 |   pending: "warning",
14 |   declined: "secondary"
15 | };
16 | 
17 | const TableComponent = ({ data }) => {
18 |   const keys = Object.keys(data[0]).map(i => i.toUpperCase());
19 |   keys.shift(); // delete "id" key
20 |   return (
21 |     <Table className="mb-0">
22 |       <TableHead>
23 |         <TableRow>
24 |           {keys.map(key => (
25 |             <TableCell>{key}</TableCell>
26 |           ))}
27 |         </TableRow>
28 |       </TableHead>
29 |       <TableBody>
30 |         {data.map(({ id, name, email, product, price, date, city, status }) => (
31 |           <TableRow key={id}>
32 |             <TableCell className="pl-3 fw-normal">{name}</TableCell>
33 |             <TableCell>{email}</TableCell>
34 |             <TableCell>{product}</TableCell>
35 |             <TableCell>{price}</TableCell>
36 |             <TableCell>{date}</TableCell>
37 |             <TableCell>{city}</TableCell>
38 |             <TableCell>
39 |               <Button
40 |                 color={states[status.toLowerCase()]}
41 |                 size="small"
42 |                 className="px-2"
43 |                 variant="contained"
44 |               >
45 |                 {status}
46 |               </Button>
47 |             </TableCell>
48 |           </TableRow>
49 |         ))}
50 |       </TableBody>
51 |     </Table>
52 |   );
53 | };
54 | 
55 | export default TableComponent;
56 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/dashboard/mock.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   tasks: [
  3 |     {
  4 |       id: 0,
  5 |       type: "Meeting",
  6 |       title: "Meeting with Andrew Piker",
  7 |       time: "9:00"
  8 |     },
  9 |     {
 10 |       id: 1,
 11 |       type: "Call",
 12 |       title: "Call with HT Company",
 13 |       time: "12:00"
 14 |     },
 15 |     {
 16 |       id: 2,
 17 |       type: "Meeting",
 18 |       title: "Meeting with Zoe Alison",
 19 |       time: "14:00"
 20 |     },
 21 |     {
 22 |       id: 3,
 23 |       type: "Interview",
 24 |       title: "Interview with HR",
 25 |       time: "15:00"
 26 |     }
 27 |   ],
 28 |   bigStat: [
 29 |     {
 30 |       product: "Light Blue",
 31 |       total: {
 32 |         monthly: 4232,
 33 |         weekly: 1465,
 34 |         daily: 199,
 35 |         percent: { value: 3.7, profit: false }
 36 |       },
 37 |       color: "primary",
 38 |       registrations: {
 39 |         monthly: { value: 830, profit: false },
 40 |         weekly: { value: 215, profit: true },
 41 |         daily: { value: 33, profit: true }
 42 |       },
 43 |       bounce: {
 44 |         monthly: { value: 4.5, profit: false },
 45 |         weekly: { value: 3, profit: true },
 46 |         daily: { value: 3.25, profit: true }
 47 |       }
 48 |     },
 49 |     {
 50 |       product: "Sing App",
 51 |       total: {
 52 |         monthly: 754,
 53 |         weekly: 180,
 54 |         daily: 27,
 55 |         percent: { value: 2.5, profit: true }
 56 |       },
 57 |       color: "warning",
 58 |       registrations: {
 59 |         monthly: { value: 32, profit: true },
 60 |         weekly: { value: 8, profit: true },
 61 |         daily: { value: 2, profit: false }
 62 |       },
 63 |       bounce: {
 64 |         monthly: { value: 2.5, profit: true },
 65 |         weekly: { value: 4, profit: false },
 66 |         daily: { value: 4.5, profit: false }
 67 |       }
 68 |     },
 69 |     {
 70 |       product: "RNS",
 71 |       total: {
 72 |         monthly: 1025,
 73 |         weekly: 301,
 74 |         daily: 44,
 75 |         percent: { value: 3.1, profit: true }
 76 |       },
 77 |       color: "secondary",
 78 |       registrations: {
 79 |         monthly: { value: 230, profit: true },
 80 |         weekly: { value: 58, profit: false },
 81 |         daily: { value: 15, profit: false }
 82 |       },
 83 |       bounce: {
 84 |         monthly: { value: 21.5, profit: false },
 85 |         weekly: { value: 19.35, profit: false },
 86 |         daily: { value: 10.1, profit: true }
 87 |       }
 88 |     }
 89 |   ],
 90 |   notifications: [
 91 |     {
 92 |       id: 0,
 93 |       icon: "thumbs-up",
 94 |       color: "primary",
 95 |       content:
 96 |         'Ken <span className="fw-semi-bold">accepts</span> your invitation'
 97 |     },
 98 |     {
 99 |       id: 1,
100 |       icon: "file",
101 |       color: "success",
102 |       content: "Report from LT Company"
103 |     },
104 |     {
105 |       id: 2,
106 |       icon: "envelope",
107 |       color: "danger",
108 |       content: '4 <span className="fw-semi-bold">Private</span> Mails'
109 |     },
110 |     {
111 |       id: 3,
112 |       icon: "comment",
113 |       color: "success",
114 |       content: '3 <span className="fw-semi-bold">Comments</span> to your Post'
115 |     },
116 |     {
117 |       id: 4,
118 |       icon: "cog",
119 |       color: "light",
120 |       content: 'New <span className="fw-semi-bold">Version</span> of RNS app'
121 |     },
122 |     {
123 |       id: 5,
124 |       icon: "bell",
125 |       color: "info",
126 |       content:
127 |         '15 <span className="fw-semi-bold">Notifications</span> from Social Apps'
128 |     }
129 |   ],
130 |   table: [
131 |     {
132 |       id: 0,
133 |       name: "Mark Otto",
134 |       email: "ottoto@wxample.com",
135 |       product: "ON the Road",
136 |       price: "$25 224.2",
137 |       date: "11 May 2017",
138 |       city: "Otsego",
139 |       status: "Sent"
140 |     },
141 |     {
142 |       id: 1,
143 |       name: "Jacob Thornton",
144 |       email: "thornton@wxample.com",
145 |       product: "HP Core i7",
146 |       price: "$1 254.2",
147 |       date: "4 Jun 2017",
148 |       city: "Fivepointville",
149 |       status: "Sent"
150 |     },
151 |     {
152 |       id: 2,
153 |       name: "Larry the Bird",
154 |       email: "bird@wxample.com",
155 |       product: "Air Pro",
156 |       price: "$1 570.0",
157 |       date: "27 Aug 2017",
158 |       city: "Leadville North",
159 |       status: "Pending"
160 |     },
161 |     {
162 |       id: 3,
163 |       name: "Joseph May",
164 |       email: "josephmay@wxample.com",
165 |       product: "Version Control",
166 |       price: "$5 224.5",
167 |       date: "19 Feb 2018",
168 |       city: "Seaforth",
169 |       status: "Declined"
170 |     },
171 |     {
172 |       id: 4,
173 |       name: "Peter Horadnia",
174 |       email: "horadnia@wxample.com",
175 |       product: "Let's Dance",
176 |       price: "$43 594.7",
177 |       date: "1 Mar 2018",
178 |       city: "Hanoverton",
179 |       status: "Sent"
180 |     }
181 |   ]
182 | };
183 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/dashboard/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Dashboard",
3 |   "version": "1.0.0",
4 |   "private": true,
5 |   "main": "DashboardContainer.js"
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/error/Error.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | import { Grid, Paper, Typography, withStyles, Button } from '@material-ui/core';
 4 | import classnames from 'classnames';
 5 | 
 6 | import logo from './logo.svg';
 7 | 
 8 | const Error = ({ classes }) => (
 9 |   <Grid container className={classes.container}>
10 |     <div className={classes.logotype}>
11 |       <img className={classes.logotypeIcon} src={logo} alt="logo" />
12 |       <Typography variant="h3" color="white" className={classes.logotypeText}>Material Admin</Typography>
13 |     </div>
14 |     <Paper classes={{ root: classes.paperRoot }}>
15 |       <Typography variant="h1" color="primary" className={classnames(classes.textRow, classes.errorCode)}>404</Typography>
16 |       <Typography variant="h5" color="primary" className={classes.textRow}>Oops. Looks like the page you're looking for no longer exists</Typography>
17 |       <Typography variant="h6" color="textSecondary" className={classnames(classes.textRow, classes.safetyText)}>But we're here to bring you back to safety</Typography>
18 |       <Button variant="contained" color="primary" component={Link} to="/" size="large" className={classes.backButton}>Back to Home</Button>
19 |     </Paper>
20 |   </Grid>
21 | );
22 | 
23 | const styles = theme => ({
24 |   container: {
25 |     height: '100vh',
26 |     width: '100vw',
27 |     display: 'flex',
28 |     flexDirection: 'column',
29 |     justifyContent: 'center',
30 |     alignItems: 'center',
31 |     backgroundColor: theme.palette.primary.main,
32 |     position: 'absolute',
33 |     top: 0,
34 |     left: 0,
35 |   },
36 |   logotype: {
37 |     display: 'flex',
38 |     alignItems: 'center',
39 |     marginBottom: theme.spacing.unit * 12,
40 |     [theme.breakpoints.down("sm")]: {
41 |       display: 'none',
42 |     }
43 |   },
44 |   logotypeText: {
45 |     fontWeight: 500,
46 |     color: 'white',
47 |     marginLeft: theme.spacing.unit * 2,
48 |   },
49 |   logotypeIcon: {
50 |     width: 70,
51 |     marginRight: theme.spacing.unit * 2,
52 |   },
53 |   paperRoot: {
54 |     boxShadow: theme.customShadows.widgetDark,
55 |     display: 'flex',
56 |     flexDirection: 'column',
57 |     alignItems: 'center',
58 |     paddingTop: theme.spacing.unit * 8,
59 |     paddingBottom: theme.spacing.unit * 8,
60 |     paddingLeft: theme.spacing.unit * 6,
61 |     paddingRight: theme.spacing.unit * 6,
62 |     maxWidth: 404,
63 |   },
64 |   textRow: {
65 |     marginBottom: theme.spacing.unit * 10,
66 |     textAlign: 'center',
67 |   },
68 |   errorCode: {
69 |     fontSize: 148,
70 |     fontWeight: 600,
71 |   },
72 |   safetyText: {
73 |     fontWeight: 300,
74 |     color: theme.palette.text.hint,
75 |   },
76 |   backButton: {
77 |     boxShadow: theme.customShadows.widget,
78 |     textTransform: 'none',
79 |     fontSize: 22,
80 |   }
81 | });
82 | 
83 | export default withStyles(styles, { withTheme: true })(Error);


--------------------------------------------------------------------------------
/web/admin/src/pages/error/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="131px" height="106px" viewBox="0 0 131 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
 4 |     <title>logo_white</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <g id="logo_white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
 7 |         <g id="Group-39" transform="translate(12.000000, 16.000000)" stroke-width="16.3476923">
 8 |             <path d="M4,72.4669231 L52.2318841,0" id="Line-10" stroke="#FFFFFF"></path>
 9 |             <path d="M1.10416667,74.69 L105.551432,74.69" id="Line-10" stroke="#FBC02D"></path>
10 |             <path d="M52.2318841,0 L105.551432,74.69" id="Line-10" stroke="#FF5252"></path>
11 |         </g>
12 |     </g>
13 | </svg>


--------------------------------------------------------------------------------
/web/admin/src/pages/error/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Error",
3 |   "version": "0.0.0",
4 |   "main": "Error.js",
5 |   "private": true
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/files/FileState.js:
--------------------------------------------------------------------------------
  1 | export const initialState = {
  2 |   isLoading: false,
  3 |   files: [],
  4 |   total: 0,
  5 |   hasMore: false,
  6 |   error: null,
  7 |   task: {
  8 |     pushing: false,
  9 |     error: null
 10 |   }
 11 | };
 12 | 
 13 | export const REQUEST_FILES = "Files/REQUEST";
 14 | export const RECEIVE_FILES = "Files/RECEIVE";
 15 | export const TASK_PUSHING = "TASK/PUSH_PUSHING";
 16 | export const TASK_PUSH_SUCCESS = "TASK/PUSH_SUCCESS";
 17 | export const TASK_PUSH_ERROR = "Urls/PUSH_ERROR";
 18 | 
 19 | 
 20 | export const requestFiles = () => ({
 21 |   type: REQUEST_FILES
 22 | });
 23 | 
 24 | export const receiveFiles = (json) => ({
 25 |   type: RECEIVE_FILES,
 26 |   files: json.items,
 27 |   total: json.total,
 28 |   hasMore: json.has_more,
 29 | });
 30 | 
 31 | export const taskPushError = (error) => ({
 32 |   type: TASK_PUSH_ERROR,
 33 |   error
 34 | });
 35 | 
 36 | export const pushUrl = (url) => dispatch => {
 37 |   let formData = new FormData();
 38 |   formData.append('url', url);
 39 |   dispatch(({ type: TASK_PUSHING}));
 40 |   return fetch('/addUrl', {
 41 |     method: 'POST',
 42 |     body: formData
 43 |   }).then(response => response.text())
 44 |     .then((err) => {
 45 |       if(err === "ok") {
 46 |         dispatch(({ type: TASK_PUSH_SUCCESS}));
 47 |       }else{
 48 |         dispatch(taskPushError(err));
 49 |         return err;
 50 |       }
 51 |   });
 52 | };
 53 | 
 54 | export const fetchFiles = (page = 1, size = 10) => dispatch => {
 55 |   dispatch(requestFiles());
 56 |   return fetch(`/share_files?page=${page}&size=${size}`)
 57 |     .then(response => response.json())
 58 |     .then(json => dispatch(receiveFiles(json)));
 59 | };
 60 | 
 61 | export default function FilesReducer(state = initialState, { type, ...payload }) {
 62 |   switch (type) {
 63 |     case REQUEST_FILES:
 64 |       return {
 65 |         ...state,
 66 |         isLoading: true
 67 |       };
 68 |     case RECEIVE_FILES:
 69 |       return {
 70 |         ...state,
 71 |         isLoading: false,
 72 |         files: payload.files,
 73 |         total: payload.total,
 74 |         hasMore: payload.has_more,
 75 |         error: null
 76 |       };
 77 |     case TASK_PUSHING:
 78 |       return {
 79 |         ...state,
 80 |         task: {
 81 |           pushing: true,
 82 |           error: null
 83 |         }
 84 |       };
 85 |     case TASK_PUSH_SUCCESS:
 86 |       return {
 87 |         ...state,
 88 |         task: {
 89 |           pushing: false,
 90 |           error: null
 91 |         }
 92 |       };
 93 |     case TASK_PUSH_ERROR:
 94 |       return {
 95 |         ...state,
 96 |         task: {
 97 |           pushing: false,
 98 |           error: payload.error
 99 |         }
100 |       };
101 |     default:
102 |       return state;
103 |   }
104 | }
105 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/files/Files.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Grid } from '@material-ui/core';
  3 | import MUIDataTable from "mui-datatables";
  4 | import { connect } from 'react-redux';
  5 | import prettyBytes from 'pretty-bytes';
  6 | import { format } from 'timeago.js';
  7 | import {
  8 | 	Button,
  9 | 	TextField,
 10 | 	Dialog,
 11 | 	DialogActions,
 12 | 	DialogContent,
 13 | 	DialogContentText,
 14 | 	DialogTitle,
 15 |   CircularProgress
 16 | } from "@material-ui/core";
 17 | import PageTitle from '../../components/PageTitle';
 18 | import { fetchFiles, pushUrl } from './FileState';
 19 | 
 20 | 
 21 | class Files extends React.Component {
 22 | 
 23 | 	state = {
 24 | 		open: false,
 25 | 		page: 1,
 26 | 		pageSize: 10,
 27 | 	};
 28 | 
 29 | 	switchDialogOpen = () => {
 30 | 		this.setState({
 31 | 				open: !this.state.open
 32 | 			})
 33 | 	};
 34 | 
 35 | 	refetch = () => {
 36 | 		if(this.state.open) {
 37 | 			// Dialog打开的时候不刷新，防止窗口抖动
 38 | 			return;
 39 | 		}
 40 | 		this.props.dispatch(fetchFiles(this.state.page + 1, this.state.pageSize));
 41 | 	};
 42 | 
 43 | 	submitUrl = (e) => {
 44 |     e.preventDefault();
 45 |     const { dispatch } = this.props;
 46 |     dispatch(pushUrl(e.target['url'].value))
 47 | 			.then((err) => {
 48 | 				if(err) {
 49 |           alert(err)
 50 |         }
 51 |     	});
 52 | 		this.switchDialogOpen();
 53 | 	};
 54 | 
 55 | 	componentDidMount() {
 56 | 		this.refetch();
 57 | 		this.timer = setInterval(this.refetch, 5000);
 58 | 	}
 59 | 
 60 | 	componentWillUnmount() {
 61 | 		clearInterval(this.timer);
 62 | 	}
 63 | 
 64 | 	render() {
 65 | 		const { files, task, total } = this.props['files'];
 66 | 		const data = files.map(file => [
 67 | 			[file['url'], file['server_filename']],
 68 | 			format(file['ctime'] * 1000, 'zh_CN'),
 69 | 			prettyBytes(file['size']),
 70 | 			file['_id'],
 71 | 			file['last_updated']]
 72 | 		);
 73 | 
 74 | 		const columns = [
 75 |       {
 76 |         name: "文件名",
 77 |         options: {
 78 |           customBodyRender: (value, tableMeta, updateValue) => {
 79 |             return (
 80 |               <a href={value[0]}>{value[1]}</a>
 81 |             );
 82 |           },
 83 |         }
 84 |       },
 85 |       "分享时间",
 86 |       "大小",
 87 |       "ID",
 88 |       "更新时间"
 89 | 		];
 90 | 
 91 | 		const options = {
 92 |       count: total,
 93 |       serverSide: true,
 94 | 			page: this.state.page,
 95 | 			rowsPerPage: this.state.pageSize,
 96 |       onTableChange: (action, tableState) => {
 97 |         this.setState({
 98 | 					page: tableState.page,
 99 | 					pageSize: tableState.rowsPerPage
100 | 				});
101 |         setTimeout(() => this.refetch(), 0);
102 |       }
103 |     };
104 | 
105 |     const AddTask = () => (
106 |       <Dialog open={this.state.open || task.pushing}
107 | 							onClose={this.switchDialogOpen}>
108 |         <DialogTitle>新增采集任务</DialogTitle>
109 |         <DialogContent>
110 |           <DialogContentText>
111 |             请输入分享文件的访问地址。例如：<br/>
112 |             https://pan.baidu.com/s/17BtXyO-i02gsC7h4QsKexg
113 |           </DialogContentText>
114 |           <form id="form" onSubmit={this.submitUrl}>
115 |             <TextField
116 | 							name="url"
117 |               autoFocus
118 |               margin="dense"
119 |               label="URL"
120 |               type="url"
121 |               required
122 |               fullWidth
123 |             />
124 |           </form>
125 |         </DialogContent>
126 |         <DialogActions>
127 | 					{task.pushing ? (
128 | 							<CircularProgress size={26} />
129 | 						): (
130 | 							<Button onClick={this.switchDialogOpen} color="primary">
131 |             取消
132 |           </Button>)}
133 | 
134 |           <Button form="form" type="submit" color="primary">
135 |             提交
136 |           </Button>
137 |         </DialogActions>
138 |       </Dialog>
139 | 		);
140 | 
141 | 		return (
142 | 			<React.Fragment>
143 | 				<PageTitle title="分享的文件" button="新增" onClick={this.switchDialogOpen} />
144 | 				<AddTask />
145 | 				<Grid container spacing={32}>
146 | 					<Grid item xs={12}>
147 | 						<MUIDataTable
148 | 							title="文件列表"
149 | 							data={data}
150 | 							columns={columns}
151 | 							options={options}
152 | 						/>
153 | 					</Grid>
154 | 				</Grid>
155 | 			</React.Fragment>)
156 | 	}
157 | }
158 | 
159 | 
160 | const mapStateToProps = state => state;
161 | export default connect(mapStateToProps)(Files);


--------------------------------------------------------------------------------
/web/admin/src/pages/files/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Files",
3 |   "version": "0.0.0",
4 |   "main": "Files.js",
5 |   "private": true
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/icons/IconsContainer.js:
--------------------------------------------------------------------------------
 1 | import { compose, withState, withHandlers } from "recompose";
 2 | 
 3 | import IconsView from "./IconsView";
 4 | 
 5 | export default compose(
 6 |   withState("activeTabId", "setActiveTabId", 0),
 7 |   withHandlers({
 8 |     changeActiveTabId: props => (event, id) => {
 9 |       props.setActiveTabId(id);
10 |     }
11 |   })
12 | )(IconsView);
13 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/icons/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Icons",
3 |   "version": "0.0.0",
4 |   "main": "IconsContainer.js",
5 |   "private": true
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/login/LoginContainer.js:
--------------------------------------------------------------------------------
 1 | import { compose, withState, withHandlers, lifecycle } from "recompose";
 2 | import { withRouter } from "react-router-dom";
 3 | import { connect } from "react-redux";
 4 | 
 5 | import LoginView from "./LoginView";
 6 | import { loginUser, resetError } from "./LoginState";
 7 | 
 8 | export default compose(
 9 |   connect(
10 |     state => ({
11 |       isLoading: state.login.isLoading,
12 |       isAuthenticated: state.login.isAuthenticated,
13 |       error: state.login.error
14 |     }),
15 |     { loginUser, resetError }
16 |   ),
17 |   withRouter,
18 |   withState("activeTabId", "setActiveTabId", 0),
19 |   withState("nameValue", "setNameValue", ""),
20 |   withState("loginValue", "setLoginValue", ""),
21 |   withState("passwordValue", "setPasswordValue", ""),
22 |   withHandlers({
23 |     handleTabChange: props => (e, id) => {
24 |       props.setActiveTabId(id);
25 |     },
26 |     handleInput: props => (e, input = "login") => {
27 |       if (props.error) {
28 |         props.resetError();
29 |       }
30 | 
31 |       if (input === "login") {
32 |         props.setLoginValue(e.target.value);
33 |       } else if (input === "password") {
34 |         props.setPasswordValue(e.target.value);
35 |       } else if (input === "name") {
36 |         props.setNameValue(e.target.value);
37 |       }
38 |     },
39 |     handleLoginButtonClick: props => () => {
40 |       props.loginUser(props.loginValue, props.passwordValue);
41 |     }
42 |   }),
43 |   lifecycle({
44 |     componentWillReceiveProps(nextProps) {
45 |       if (!this.props.error && nextProps.error) {
46 |         this.props.setPasswordValue("");
47 |       }
48 |     }
49 |   })
50 | )(LoginView);
51 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/login/LoginState.js:
--------------------------------------------------------------------------------
 1 | export const initialState = {
 2 |   isLoading: false,
 3 |   isAuthenticated: !!localStorage.getItem("id_token"),
 4 |   error: null
 5 | };
 6 | 
 7 | export const START_LOGIN = "Login/START_LOGIN";
 8 | export const LOGIN_SUCCESS = "Login/LOGIN_SUCCESS";
 9 | export const LOGIN_FAILURE = "Login/LOGIN_FAILURE";
10 | export const RESET_ERROR = "Login/RESET_ERROR";
11 | export const LOGIN_USER = "Login/LOGIN_USER";
12 | export const SIGN_OUT_SUCCESS = "Login/SIGN_OUT_SUCCESS";
13 | 
14 | export const startLogin = () => ({
15 |   type: START_LOGIN
16 | });
17 | 
18 | export const loginSuccess = () => ({
19 |   type: LOGIN_SUCCESS
20 | });
21 | 
22 | export const loginFailure = () => ({
23 |   type: LOGIN_FAILURE
24 | });
25 | 
26 | export const resetError = () => ({
27 |   type: RESET_ERROR
28 | });
29 | 
30 | export const loginUser = (login, password) => dispatch => {
31 |   dispatch(startLogin());
32 | 
33 |   if (!!login && !!password) {
34 |     setTimeout(() => {
35 |       localStorage.setItem("id_token", "1");
36 |       dispatch(loginSuccess());
37 |     }, 2000);
38 |   } else {
39 |     dispatch(loginFailure());
40 |   }
41 | };
42 | 
43 | export const signOutSuccess = () => ({
44 |   type: SIGN_OUT_SUCCESS
45 | });
46 | 
47 | export const signOut = () => dispatch => {
48 |   localStorage.removeItem("id_token");
49 |   dispatch(signOutSuccess());
50 | };
51 | 
52 | export default function LoginReducer(state = initialState, { type, payload }) {
53 |   switch (type) {
54 |     case START_LOGIN:
55 |       return {
56 |         ...state,
57 |         isLoading: true
58 |       };
59 |     case LOGIN_SUCCESS:
60 |       return {
61 |         ...state,
62 |         isLoading: false,
63 |         isAuthenticated: true,
64 |         error: null
65 |       };
66 |     case LOGIN_FAILURE:
67 |       return {
68 |         ...state,
69 |         isLoading: false,
70 |         error: true
71 |       };
72 |     case RESET_ERROR:
73 |       return {
74 |         error: false
75 |       };
76 |     case SIGN_OUT_SUCCESS:
77 |       return {
78 |         ...state,
79 |         isAuthenticated: false
80 |       };
81 |     default:
82 |       return state;
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/login/LoginView.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import {
  3 |   Grid,
  4 |   CircularProgress,
  5 |   Typography,
  6 |   withStyles,
  7 |   Button,
  8 |   Tabs,
  9 |   Tab,
 10 |   TextField,
 11 |   Fade
 12 | } from "@material-ui/core";
 13 | import classnames from "classnames";
 14 | 
 15 | import logo from "./logo.svg";
 16 | import google from "../../images/google.svg";
 17 | 
 18 | const Login = ({ classes, ...props }) => (
 19 |   <Grid container className={classes.container}>
 20 |     <div className={classes.logotypeContainer}>
 21 |       <img src={logo} alt="logo" className={classes.logotypeImage} />
 22 |       <Typography className={classes.logotypeText}>BaiduyunSpider Admin</Typography>
 23 |     </div>
 24 |     <div className={classes.formContainer}>
 25 |       <div className={classes.form}>
 26 |         <Tabs
 27 |           value={props.activeTabId}
 28 |           onChange={props.handleTabChange}
 29 |           indicatorColor="primary"
 30 |           textColor="primary"
 31 |           centered
 32 |         >
 33 |           <Tab label="Login" classes={{ root: classes.tab }} />
 34 |           <Tab label="New User" classes={{ root: classes.tab }} />
 35 |         </Tabs>
 36 |         {props.activeTabId === 0 && (
 37 |           <React.Fragment>
 38 |             <Typography variant="h1" className={classes.greeting}>
 39 |               Welcome!
 40 |             </Typography>
 41 |             {/*<Button size="large" className={classes.googleButton}>*/}
 42 |               {/*<img src={google} alt="google" className={classes.googleIcon} />*/}
 43 |               {/*&nbsp;Sign in with Google*/}
 44 |             {/*</Button>*/}
 45 |             {/*<div className={classes.formDividerContainer}>*/}
 46 |               {/*<div className={classes.formDivider} />*/}
 47 |               {/*<Typography className={classes.formDividerWord}>or</Typography>*/}
 48 |               {/*<div className={classes.formDivider} />*/}
 49 |             {/*</div>*/}
 50 |             <Fade in={props.error}>
 51 |               <Typography color="secondary" className={classes.errorMessage}>
 52 |                 Something is wrong with your login or password :(
 53 |               </Typography>
 54 |             </Fade>
 55 |             <TextField
 56 |               id="email"
 57 |               InputProps={{
 58 |                 classes: {
 59 |                   underline: classes.textFieldUnderline,
 60 |                   input: classes.textField
 61 |                 }
 62 |               }}
 63 |               value={props.loginValue}
 64 |               onChange={e => props.handleInput(e, "login")}
 65 |               margin="normal"
 66 |               placeholder="Email Adress"
 67 |               type="email"
 68 |               fullWidth
 69 |             />
 70 |             <TextField
 71 |               id="password"
 72 |               InputProps={{
 73 |                 classes: {
 74 |                   underline: classes.textFieldUnderline,
 75 |                   input: classes.textField
 76 |                 }
 77 |               }}
 78 |               value={props.passwordValue}
 79 |               onChange={e => props.handleInput(e, "password")}
 80 |               margin="normal"
 81 |               placeholder="Password"
 82 |               type="password"
 83 |               fullWidth
 84 |             />
 85 |             <div className={classes.formButtons}>
 86 |               {props.isLoading ? (
 87 |                 <CircularProgress size={26} className={classes.loginLoader} />
 88 |               ) : (
 89 |                 <Button
 90 |                   disabled={
 91 |                     props.loginValue.length === 0 ||
 92 |                     props.passwordValue.length === 0
 93 |                   }
 94 |                   onClick={props.handleLoginButtonClick}
 95 |                   variant="contained"
 96 |                   color="primary"
 97 |                   size="large"
 98 |                 >
 99 |                   Login
100 |                 </Button>
101 |               )}
102 |               <Button
103 |                 color="primary"
104 |                 size="large"
105 |                 className={classes.forgetButton}
106 |               >
107 |                 Forget Password
108 |               </Button>
109 |             </div>
110 |           </React.Fragment>
111 |         )}
112 |         {props.activeTabId === 1 && (
113 |           <React.Fragment>
114 |             <Typography variant="h1" className={classes.greeting}>
115 |               Welcome!
116 |             </Typography>
117 |             <Typography variant="h2" className={classes.subGreeting}>
118 |               Create your account
119 |             </Typography>
120 |             <Fade in={props.error}>
121 |               <Typography color="secondary" className={classes.errorMessage}>
122 |                 Something is wrong with your login or password :(
123 |               </Typography>
124 |             </Fade>
125 |             <TextField
126 |               id="name"
127 |               InputProps={{
128 |                 classes: {
129 |                   underline: classes.textFieldUnderline,
130 |                   input: classes.textField
131 |                 }
132 |               }}
133 |               value={props.nameValue}
134 |               onChange={e => props.handleInput(e, "name")}
135 |               margin="normal"
136 |               placeholder="Full Name"
137 |               type="email"
138 |               fullWidth
139 |             />
140 |             <TextField
141 |               id="email"
142 |               InputProps={{
143 |                 classes: {
144 |                   underline: classes.textFieldUnderline,
145 |                   input: classes.textField
146 |                 }
147 |               }}
148 |               value={props.loginValue}
149 |               onChange={e => props.handleInput(e, "login")}
150 |               margin="normal"
151 |               placeholder="Email Adress"
152 |               type="email"
153 |               fullWidth
154 |             />
155 |             <TextField
156 |               id="password"
157 |               InputProps={{
158 |                 classes: {
159 |                   underline: classes.textFieldUnderline,
160 |                   input: classes.textField
161 |                 }
162 |               }}
163 |               value={props.passwordValue}
164 |               onChange={e => props.handleInput(e, "password")}
165 |               margin="normal"
166 |               placeholder="Password"
167 |               type="password"
168 |               fullWidth
169 |             />
170 |             <div className={classes.creatingButtonContainer}>
171 |               {props.isLoading ? (
172 |                 <CircularProgress size={26} />
173 |               ) : (
174 |                 <Button
175 |                   onClick={props.handleLoginButtonClick}
176 |                   disabled={
177 |                     props.loginValue.length === 0 ||
178 |                     props.passwordValue.length === 0 ||
179 |                     props.nameValue.length === 0
180 |                   }
181 |                   size="large"
182 |                   variant="contained"
183 |                   color="primary"
184 |                   fullWidth
185 |                   className={classes.createAccountButton}
186 |                 >
187 |                   Create your account
188 |                 </Button>
189 |               )}
190 |             </div>
191 |             {/*<div className={classes.formDividerContainer}>*/}
192 |               {/*<div className={classes.formDivider} />*/}
193 |               {/*<Typography className={classes.formDividerWord}>or</Typography>*/}
194 |               {/*<div className={classes.formDivider} />*/}
195 |             {/*</div>*/}
196 |             {/*<Button*/}
197 |               {/*size="large"*/}
198 |               {/*className={classnames(*/}
199 |                 {/*classes.googleButton,*/}
200 |                 {/*classes.googleButtonCreating*/}
201 |               {/*)}*/}
202 |             {/*>*/}
203 |               {/*<img src={google} alt="google" className={classes.googleIcon} />*/}
204 |               {/*&nbsp;Sign in with Google*/}
205 |             {/*</Button>*/}
206 |           </React.Fragment>
207 |         )}
208 |       </div>
209 |       <Typography color="primary" className={classes.copyright}>
210 |         © 2014-2019 Flatlogic, LLC. All rights reserved.
211 |       </Typography>
212 |     </div>
213 |   </Grid>
214 | );
215 | 
216 | const styles = theme => ({
217 |   container: {
218 |     height: "100vh",
219 |     width: "100vw",
220 |     display: "flex",
221 |     justifyContent: "center",
222 |     alignItems: "center",
223 |     position: "absolute",
224 |     top: 0,
225 |     left: 0
226 |   },
227 |   logotypeContainer: {
228 |     backgroundColor: theme.palette.primary.main,
229 |     width: "60%",
230 |     height: "100%",
231 |     display: "flex",
232 |     flexDirection: "column",
233 |     justifyContent: "center",
234 |     alignItems: "center",
235 |     [theme.breakpoints.down("md")]: {
236 |       width: "50%"
237 |     },
238 |     [theme.breakpoints.down("md")]: {
239 |       display: "none"
240 |     }
241 |   },
242 |   logotypeImage: {
243 |     width: 165,
244 |     marginBottom: theme.spacing.unit * 4
245 |   },
246 |   logotypeText: {
247 |     color: "white",
248 |     fontWeight: 500,
249 |     fontSize: 60,
250 |     [theme.breakpoints.down("md")]: {
251 |       fontSize: 48
252 |     }
253 |   },
254 |   formContainer: {
255 |     width: "40%",
256 |     height: "100%",
257 |     display: "flex",
258 |     flexDirection: "column",
259 |     justifyContent: "center",
260 |     alignItems: "center",
261 |     [theme.breakpoints.down("md")]: {
262 |       width: "50%"
263 |     }
264 |   },
265 |   form: {
266 |     width: 320
267 |   },
268 |   tab: {
269 |     fontWeight: 400,
270 |     fontSize: 18
271 |   },
272 |   greeting: {
273 |     fontWeight: 500,
274 |     textAlign: "center",
275 |     marginTop: theme.spacing.unit * 4
276 |   },
277 |   subGreeting: {
278 |     fontWeight: 500,
279 |     textAlign: "center",
280 |     marginTop: theme.spacing.unit * 2
281 |   },
282 |   googleButton: {
283 |     marginTop: theme.spacing.unit * 6,
284 |     boxShadow: theme.customShadows.widget,
285 |     backgroundColor: "white",
286 |     width: "100%",
287 |     textTransform: "none"
288 |   },
289 |   googleButtonCreating: {
290 |     marginTop: 0
291 |   },
292 |   googleIcon: {
293 |     width: 30,
294 |     marginRight: theme.spacing.unit * 2
295 |   },
296 |   creatingButtonContainer: {
297 |     marginTop: theme.spacing.unit * 2.5,
298 |     height: 46,
299 |     display: "flex",
300 |     justifyContent: "center",
301 |     alignItems: "center"
302 |   },
303 |   createAccountButton: {
304 |     height: 46,
305 |     textTransform: "none"
306 |   },
307 |   formDividerContainer: {
308 |     marginTop: theme.spacing.unit * 4,
309 |     marginBottom: theme.spacing.unit * 4,
310 |     display: "flex",
311 |     alignItems: "center"
312 |   },
313 |   formDividerWord: {
314 |     paddingLeft: theme.spacing.unit * 2,
315 |     paddingRight: theme.spacing.unit * 2
316 |   },
317 |   formDivider: {
318 |     flexGrow: 1,
319 |     height: 1,
320 |     backgroundColor: theme.palette.text.hint + "40"
321 |   },
322 |   errorMessage: {
323 |     textAlign: "center"
324 |   },
325 |   textFieldUnderline: {
326 |     "&:before": {
327 |       borderBottomColor: theme.palette.primary.light
328 |     },
329 |     "&:after": {
330 |       borderBottomColor: theme.palette.primary.main
331 |     },
332 |     "&:hover:before": {
333 |       borderBottomColor: `${theme.palette.primary.light} !important`
334 |     }
335 |   },
336 |   textField: {
337 |     borderBottomColor: theme.palette.background.light
338 |   },
339 |   formButtons: {
340 |     width: "100%",
341 |     marginTop: theme.spacing.unit * 4,
342 |     display: "flex",
343 |     justifyContent: "space-between",
344 |     alignItems: "center"
345 |   },
346 |   forgetButton: {
347 |     textTransform: "none",
348 |     fontWeight: 400
349 |   },
350 |   loginLoader: {
351 |     marginLeft: theme.spacing.unit * 4
352 |   },
353 |   copyright: {
354 |     position: "absolute",
355 |     bottom: theme.spacing.unit * 2
356 |   }
357 | });
358 | 
359 | export default withStyles(styles, { withTheme: true })(Login);
360 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/login/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="131px" height="106px" viewBox="0 0 131 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
 4 |     <title>logo_white</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <g id="logo_white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
 7 |         <g id="Group-39" transform="translate(12.000000, 16.000000)" stroke-width="16.3476923">
 8 |             <path d="M4,72.4669231 L52.2318841,0" id="Line-10" stroke="#FFFFFF"></path>
 9 |             <path d="M1.10416667,74.69 L105.551432,74.69" id="Line-10" stroke="#FBC02D"></path>
10 |             <path d="M52.2318841,0 L105.551432,74.69" id="Line-10" stroke="#FF5252"></path>
11 |         </g>
12 |     </g>
13 | </svg>


--------------------------------------------------------------------------------
/web/admin/src/pages/login/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Login",
3 |   "version": "0.0.0",
4 |   "main": "LoginContainer.js",
5 |   "private": true
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/maps/Maps.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { withStyles } from '@material-ui/core';
 3 | import {
 4 |   withGoogleMap,
 5 |   withScriptjs,
 6 |   GoogleMap,
 7 |   Marker,
 8 | } from 'react-google-maps';
 9 | 
10 | const BasicMap = withScriptjs(withGoogleMap(() =>
11 |   <GoogleMap
12 |     defaultZoom={12}
13 |     defaultCenter={{ lat: parseFloat(-37.813179), lng: parseFloat(144.950259) }}
14 |   >
15 |     <Marker position={{ lat: -37.813179, lng: 144.950259 }} />
16 |   </GoogleMap>,
17 | ));
18 | 
19 | const Maps = ({ classes }) => (
20 |   <div className={classes.mapContainer}>
21 |     <BasicMap
22 |       googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyB7OXmzfQYua_1LEhRdqsoYzyJOPh9hGLg"
23 |       loadingElement={<div style={{ height: 'inherit', width: 'inherit' }} />}
24 |       containerElement={<div style={{ height: '100%' }} />}
25 |       mapElement={<div style={{ height: '100%' }} />}
26 |     />
27 |   </div>
28 | )
29 | 
30 | const styles = theme => ({
31 |   mapContainer: {
32 |     height: '100%',
33 |     margin: -theme.spacing.unit * 3
34 |   }
35 | });
36 | 
37 | export default withStyles(styles, { withTheme: true })(Maps);


--------------------------------------------------------------------------------
/web/admin/src/pages/maps/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Maps",
3 |   "version": "0.0.0",
4 |   "main": "Maps.js",
5 |   "private": true
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/notifications/NotificationsContainer.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { withStyles } from "@material-ui/core";
  3 | import { compose, withState, withHandlers } from "recompose";
  4 | import { toast } from "react-toastify";
  5 | 
  6 | import Notification from "../../components/Notification";
  7 | import NotificationsView from "./NotificationsView";
  8 | 
  9 | const positions = [
 10 |   toast.POSITION.TOP_LEFT,
 11 |   toast.POSITION.TOP_CENTER,
 12 |   toast.POSITION.TOP_RIGHT,
 13 |   toast.POSITION.BOTTOM_LEFT,
 14 |   toast.POSITION.BOTTOM_CENTER,
 15 |   toast.POSITION.BOTTOM_RIGHT
 16 | ];
 17 | 
 18 | export default compose(
 19 |   withStyles(theme => ({
 20 |     progress: {
 21 |       visibility: "hidden"
 22 |     },
 23 |     notification: {
 24 |       display: "flex",
 25 |       alignItems: "center",
 26 |       background: "transparent",
 27 |       boxShadow: "none",
 28 |       overflow: "visible"
 29 |     },
 30 |     notificationComponent: {
 31 |       paddingRight: theme.spacing.unit * 4
 32 |     }
 33 |   })),
 34 |   withState("notificationsPosition", "setNotificationPosition", 2),
 35 |   withState("errorToastId", "setErrorToastId", null),
 36 |   withHandlers({
 37 |     sendNotification: props => (componentProps, options) => {
 38 |       return toast(
 39 |         <Notification
 40 |           {...componentProps}
 41 |           className={props.classes.notificationComponent}
 42 |         />,
 43 |         options
 44 |       );
 45 |     }
 46 |   }),
 47 |   withHandlers({
 48 |     retryErrorNotification: props => () => {
 49 |       const componentProps = {
 50 |         type: "message",
 51 |         message: "Message was sent successfully!",
 52 |         variant: "contained",
 53 |         color: "success",
 54 |       };
 55 | 
 56 |       toast.update(props.errorToastId, {
 57 |         render: <Notification {...componentProps} />,
 58 |         type: "success"
 59 |       });
 60 |       props.setErrorToastId(null);
 61 |     }
 62 |   }),
 63 |   withHandlers({
 64 |     handleNotificationCall: props => notificationType => {
 65 |       let componentProps;
 66 | 
 67 |       if (props.errorToastId && notificationType === "error") return;
 68 | 
 69 |       switch (notificationType) {
 70 |         case "info":
 71 |           componentProps = {
 72 |             type: "feedback",
 73 |             message: "New user feedback received",
 74 |             variant: "contained",
 75 |             color: "primary"
 76 |           };
 77 |           break;
 78 |         case "error":
 79 |           componentProps = {
 80 |             type: "message",
 81 |             message: "Message was not sent!",
 82 |             variant: "contained",
 83 |             color: "secondary",
 84 |             extraButton: "Resend",
 85 |             extraButtonClick: props.retryErrorNotification
 86 |           };
 87 |           break;
 88 |         default:
 89 |           componentProps = {
 90 |             type: "shipped",
 91 |             message: "The item was shipped",
 92 |             variant: "contained",
 93 |             color: "success"
 94 |           };
 95 |       }
 96 | 
 97 |       const toastId = props.sendNotification(componentProps, {
 98 |         type: notificationType,
 99 |         position: positions[props.notificationsPosition],
100 |         progressClassName: props.classes.progress,
101 |         onClose:
102 |           notificationType === "error" && (() => props.setErrorToastId(null)),
103 |         className: props.classes.notification
104 |       });
105 | 
106 |       if (notificationType === "error") props.setErrorToastId(toastId);
107 |     },
108 |     changeNotificationPosition: props => positionId => {
109 |       props.setNotificationPosition(positionId);
110 |     }
111 |   })
112 | )(NotificationsView);
113 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/notifications/NotificationsView.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Grid, withStyles } from '@material-ui/core';
  3 | import { Close as CloseIcon } from '@material-ui/icons';
  4 | import classnames from 'classnames';
  5 | import { ToastContainer } from 'react-toastify';
  6 | import SyntaxHighlighter from 'react-syntax-highlighter';
  7 | import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
  8 | import tinycolor from 'tinycolor2';
  9 | import 'react-toastify/dist/ReactToastify.css';
 10 | 
 11 | import Widget from '../../components/Widget';
 12 | import PageTitle from '../../components/PageTitle';
 13 | import NotificationCustomComponent from '../../components/Notification';
 14 | import { Typography, Button } from '../../components/Wrappers';
 15 | 
 16 | const CloseButton = ({ closeToast, className }) => (
 17 |   <CloseIcon
 18 |     className={className}
 19 |     onClick={closeToast}
 20 |   />
 21 | );
 22 | 
 23 | const NotificationsPage = ({ classes, ...props}) => (
 24 |   <React.Fragment>
 25 |     <PageTitle title="Notifications" />
 26 |     <Grid container spacing={32}>
 27 |       <ToastContainer className={classes.toastsContainer} closeButton={<CloseButton className={classes.notificationCloseButton} />} closeOnClick={false} progressClassName={classes.notificationProgress} />
 28 |       <Grid item xs={12} md={6} lg={4}>
 29 |         <Widget title="Layout Options" disableWidgetMenu>
 30 |           <Typography>There are few position options available for notifications. You can click any of them to change notifications position:</Typography>
 31 |           <div className={classes.layoutContainer}>
 32 |             <div className={classes.layoutButtonsRow}>
 33 |               <button onClick={() => props.changeNotificationPosition(0)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 0})} />
 34 |               <button onClick={() => props.changeNotificationPosition(1)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 1})} />
 35 |               <button onClick={() => props.changeNotificationPosition(2)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 2})} />
 36 |             </div>
 37 |             <Typography className={classes.layoutText} size="md">Click any position</Typography>
 38 |             <div className={classes.layoutButtonsRow}>
 39 |               <button onClick={() => props.changeNotificationPosition(3)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 3})} />
 40 |               <button onClick={() => props.changeNotificationPosition(4)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 4})} />
 41 |               <button onClick={() => props.changeNotificationPosition(5)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 5})} />
 42 |             </div>
 43 |           </div>
 44 |         </Widget>
 45 |       </Grid>
 46 |       <Grid item xs={12} md={6} lg={4}>
 47 |         <Widget title="Notifications Types" disableWidgetMenu>
 48 |           <Typography>Different types of notifications for lost of use cases. Custom classes are also supported.</Typography>
 49 |           <div className={classes.buttonsContainer}>
 50 |             <Button variant="contained" color="primary" onClick={() => props.handleNotificationCall('info')} className={classnames(classes.notificationCallButton)}>Info Message</Button>
 51 |             <Button variant="contained" color="secondary" onClick={() => props.handleNotificationCall('error')} className={classnames(classes.notificationCallButton)}>Error + Retry Message</Button>
 52 |             <Button variant="contained" color="success" onClick={() => props.handleNotificationCall('success')} className={classnames(classes.notificationCallButton)}>Success Message</Button>
 53 |           </div>
 54 |         </Widget>
 55 |       </Grid>
 56 |       <Grid item xs={12} md={6} lg={4}>
 57 |         <Widget title="Usage" disableWidgetMenu>
 58 |           <Typography>Notifications are created with the help of <a href="https://github.com/fkhadra/react-toastify">react-toastify</a></Typography>
 59 |           <div className={classes.codeContainer}>
 60 |             <SyntaxHighlighter className={classes.codeComponent} language='javascript' style={docco}>{`
 61 |   // import needed components, functions and styles
 62 |   import { ToastContainer, toast } from 'react-toastify';
 63 |   import 'react-toastify/dist/ReactToastify.css';
 64 | 
 65 |   const Page = () => {
 66 |     <div>
 67 |       <ToastContainer />
 68 |       <button onClick={() => toast('Toast Mesasge')}>
 69 |         show notification
 70 |       </button>
 71 |     </div>
 72 |   };
 73 |             `}</SyntaxHighlighter>
 74 |             <Typography variant="caption">For more API information refer to the library documentation</Typography>
 75 |           </div>
 76 |         </Widget>
 77 |       </Grid>
 78 |       <Grid item xs={12} md={6} lg={4}>
 79 |         <Widget title="Notification Types Examples" disableWidgetMenu>
 80 |           <NotificationCustomComponent className={classes.notificationItem} shadowless type="message" message="Thanks for Checking out Messenger" variant="contained" color="secondary"/>
 81 |           <NotificationCustomComponent className={classes.notificationItem} shadowless type="feedback" message="New user feedback received" variant="contained" color="primary"/>
 82 |           <NotificationCustomComponent className={classes.notificationItem} shadowless type="customer" message="New customer is registered" variant="contained" color="success" />
 83 |           <NotificationCustomComponent className={classes.notificationItem} shadowless type="shipped" message="The order was shipped" variant="contained" color="warning" />
 84 |           <NotificationCustomComponent className={classes.notificationItem} shadowless type="delivered" message="The order was delivered" variant="contained" color="primary" />
 85 |           <NotificationCustomComponent className={classes.notificationItem} shadowless type="defence" message="5 Defence alerts" variant="contained" color="info" />
 86 |         </Widget>
 87 |       </Grid>
 88 |       <Grid item xs={12} md={6} lg={4}>
 89 |         <Widget title="Notification Types Examples" disableWidgetMenu>
 90 |           <NotificationCustomComponent className={classes.notificationItem} type="report" message="New report has been received" color="secondary" />
 91 |           <NotificationCustomComponent className={classes.notificationItem} type="feedback" message="New user feedback received" color="primary" />
 92 |           <NotificationCustomComponent className={classes.notificationItem} type="shipped" message="The item was shipped" color="success" />
 93 |           <NotificationCustomComponent className={classes.notificationItem} type="message" message="The new message from user @nahawaii" color="warning" />
 94 |           <NotificationCustomComponent className={classes.notificationItem} type="upload" message="Your file is ready to upload" color="primary" />
 95 |           <NotificationCustomComponent className={classes.notificationItem} type="disc" message="The disc is full" color="info" />
 96 |         </Widget>
 97 |       </Grid>
 98 |       <Grid item xs={12} md={6} lg={4}>
 99 |         <Widget title="Notification Types Examples" disableWidgetMenu>
100 |           <NotificationCustomComponent className={classes.notificationItem} type="report" message="New report has been received" variant="rounded" color="secondary" />
101 |           <NotificationCustomComponent className={classes.notificationItem} type="feedback" message="New user feedback received" variant="rounded" color="primary" />
102 |           <NotificationCustomComponent className={classes.notificationItem} type="shipped" message="The item was shipped" variant="rounded" color="success" />
103 |           <NotificationCustomComponent className={classes.notificationItem} type="message" message="The new message from user @nahawaii" variant="rounded" color="warning" />
104 |           <NotificationCustomComponent className={classes.notificationItem} type="upload" message="Your file is ready to upload" variant="rounded" color="primary" />
105 |           <NotificationCustomComponent className={classes.notificationItem} type="disc" message="The disc is full" variant="rounded" color="info" />
106 |         </Widget>
107 |       </Grid>
108 |     </Grid>
109 |   </React.Fragment>
110 | );
111 | 
112 | const styles = (theme) => ({
113 |   layoutContainer: {
114 |     height: 200,
115 |     display: 'flex',
116 |     flexDirection: 'column',
117 |     justifyContent: 'space-between',
118 |     alignItems: 'center',
119 |     marginTop: theme.spacing.unit * 2,
120 |     border: '1px dashed',
121 |     borderColor: theme.palette.primary.main,
122 |     position: 'relative',
123 |   },
124 |   layoutText: {
125 |     color: tinycolor(theme.palette.background.light).darken().toHexString(),
126 |   },
127 |   layoutButtonsRow: {
128 |     width: '100%',
129 |     display: 'flex',
130 |     justifyContent: 'space-between',
131 |   },
132 |   layoutButton: {
133 |     backgroundColor: theme.palette.background.light,
134 |     width: 125,
135 |     height: 50,
136 |     outline: 'none',
137 |     border: 'none',
138 |   },
139 |   layoutButtonActive: {
140 |     backgroundColor: tinycolor(theme.palette.background.light).darken().toHexString(),
141 |   },
142 |   buttonsContainer: {
143 |     display: 'flex',
144 |     flexDirection: 'column',
145 |     alignItems: 'flex-start',
146 |     marginTop: theme.spacing.unit * 2,
147 |   },
148 |   notificationCallButton: {
149 |     color: 'white',
150 |     marginBottom: theme.spacing.unit,
151 |     textTransform: 'none',
152 |   },
153 |   codeContainer: {
154 |     display: 'flex',
155 |     flexDirection: 'column',
156 |     marginTop: theme.spacing.unit * 2,
157 |   },
158 |   codeComponent: {
159 |     flexGrow: 1,
160 |   },
161 |   notificationItem: {
162 |     marginTop: theme.spacing.unit * 2,
163 |   },
164 |   notificationCloseButton: {
165 |     position: 'absolute',
166 |     right: theme.spacing.unit * 2,
167 |   },
168 |   toastsContainer: {
169 |     width: 400,
170 |     marginTop: theme.spacing.unit * 6,
171 |     right: 0,
172 |   }
173 | });
174 | 
175 | export default withStyles(styles, { withTheme: true})(NotificationsPage);
176 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/notifications/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Notifications",
3 |   "version": "0.0.0",
4 |   "main": "NotificationsContainer.js",
5 |   "private": true
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/tables/Tables.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Grid } from '@material-ui/core';
 3 | import MUIDataTable from "mui-datatables";
 4 | 
 5 | import PageTitle from '../../components/PageTitle';
 6 | import Widget from '../../components/Widget';
 7 | import Table from '../dashboard/components/Table/Table';
 8 | import mock from '../dashboard/mock'; 
 9 | 
10 | const datatableData = [
11 |  ["Joe James", "Example Inc.", "Yonkers", "NY"],
12 |  ["John Walsh", "Example Inc.", "Hartford", "CT"],
13 |  ["Bob Herm", "Example Inc.", "Tampa", "FL"],
14 |  ["James Houston", "Example Inc.", "Dallas", "TX"],
15 |  ["Prabhakar Linwood", "Example Inc.", "Hartford", "CT"],
16 |  ["Kaui Ignace", "Example Inc.", "Yonkers", "NY"],
17 |  ["Esperanza Susanne", "Example Inc.", "Hartford", "CT"],
18 |  ["Christian Birgitte", "Example Inc.", "Tampa", "FL"],
19 |  ["Meral Elias", "Example Inc.", "Hartford", "CT"],
20 |  ["Deep Pau", "Example Inc.", "Yonkers", "NY"],
21 |  ["Sebastiana Hani", "Example Inc.", "Dallas", "TX"],
22 |  ["Marciano Oihana", "Example Inc.", "Yonkers", "NY"],
23 |  ["Brigid Ankur", "Example Inc.", "Dallas", "TX"],
24 |  ["Anna Siranush", "Example Inc.", "Yonkers", "NY"],
25 |  ["Avram Sylva", "Example Inc.", "Hartford", "CT"],
26 |  ["Serafima Babatunde", "Example Inc.", "Tampa", "FL"],
27 |  ["Gaston Festus", "Example Inc.", "Tampa", "FL"],
28 | ];
29 | 
30 | const Tables = props => (
31 |   <React.Fragment>
32 |     <PageTitle title="Tables" />
33 |     <Grid container spacing={32}>
34 |       <Grid item xs={12}>
35 |         <MUIDataTable
36 |           title="Employee List"
37 |           data={datatableData}
38 |           columns={["Name", "Company", "City", "State"]}
39 |           options={{
40 |             filterType: 'checkbox',
41 |           }}
42 |         />
43 |       </Grid>
44 |       <Grid item xs={12}>
45 |         <Widget title="Material-UI Table" upperTitle noBodyPadding>
46 |           <Table data={mock.table} />
47 |         </Widget>
48 |       </Grid>
49 |     </Grid>
50 |   </React.Fragment>
51 | );
52 | 
53 | export default Tables;


--------------------------------------------------------------------------------
/web/admin/src/pages/tables/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Tables",
3 |   "version": "0.0.0",
4 |   "main": "Tables.js",
5 |   "private": true
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/typography/Typography.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Grid, withStyles } from '@material-ui/core';
  3 | 
  4 | import PageTitle from '../../components/PageTitle';
  5 | import Widget from '../../components/Widget';
  6 | import { Typography } from '../../components/Wrappers';
  7 | 
  8 | const TypographyPage = ({ classes }) => (
  9 |   <React.Fragment>
 10 |     <PageTitle title="Typography"/>
 11 |     <Grid container spacing={32}>
 12 |       <Grid item xs={12} md={6}>
 13 |         <Widget title="Headings" disableWidgetMenu>
 14 |           <div className={classes.dashedBorder}>
 15 |             <Typography variant="h1" className={classes.text}>
 16 |               h1. Heading
 17 |             </Typography>
 18 |             <Typography variant="h2" className={classes.text}>
 19 |               h2. Heading
 20 |             </Typography>
 21 |             <Typography variant="h3" className={classes.text}>
 22 |               h3. Heading
 23 |             </Typography>
 24 |             <Typography variant="h4" className={classes.text}>
 25 |               h4. Heading
 26 |             </Typography>
 27 |             <Typography variant="h5" className={classes.text}>
 28 |               h5. Heading
 29 |             </Typography>
 30 |             <Typography variant="h6">
 31 |               h6. Heading
 32 |             </Typography>
 33 |           </div>
 34 |         </Widget>
 35 |       </Grid>
 36 |       <Grid item xs={12} md={6}>
 37 |         <Widget title="Typography Colors" disableWidgetMenu>
 38 |           <div className={classes.dashedBorder}>
 39 |             <Typography variant="h1" color="primary" className={classes.text}>
 40 |               h1. Heading
 41 |             </Typography>
 42 |             <Typography variant="h2" color="success" className={classes.text}>
 43 |               h2. Heading
 44 |             </Typography>
 45 |             <Typography variant="h3" color="secondary" className={classes.text}>
 46 |               h3. Heading
 47 |             </Typography>
 48 |             <Typography variant="h4" color="warning" className={classes.text}>
 49 |               h4. Heading
 50 |             </Typography>
 51 |             <Typography variant="h5" color="primary" colorBrightness="light" className={classes.text}>
 52 |               h5. Heading
 53 |             </Typography>
 54 |             <Typography variant="h6" color="info">
 55 |               h6. Heading
 56 |             </Typography>
 57 |           </div>
 58 |         </Widget>
 59 |       </Grid>
 60 |       <Grid item xs={12} md={6}>
 61 |         <Widget title="Basic Text Settings" disableWidgetMenu>
 62 |           <div className={classes.dashedBorder}>
 63 |             <Typography className={classes.text}>Basic text</Typography>
 64 |             <Typography className={classes.text} weight="light">Basic light text</Typography>
 65 |             <Typography className={classes.text} weight="medium">Basic medium text</Typography>
 66 |             <Typography className={classes.text} weight="bold">Basic bold text</Typography>
 67 |             <Typography className={classes.text}>BASIC UPPERCASE TEXT</Typography>
 68 |             <Typography className={classes.text}>basic lowercase text</Typography>
 69 |             <Typography className={classes.text}>Basic Capitalized Text</Typography>
 70 |             <Typography><i>Basic Cursive Text</i></Typography>
 71 |           </div>
 72 |         </Widget>
 73 |       </Grid>
 74 |       <Grid item xs={12} md={6}>
 75 |         <Widget title="Text Size" disableWidgetMenu>
 76 |           <div className={classes.dashedBorder}>
 77 |             <Typography className={classes.text} size="sm">Heading Typography SM Font Size</Typography>
 78 |             <Typography className={classes.text}>Heading Typography Regular Font Size</Typography>
 79 |             <Typography className={classes.text} size="md">Heading Typography MD Font Size</Typography>
 80 |             <Typography className={classes.text} size="xl">Heading Typography XL Font Size</Typography>
 81 |             <Typography className={classes.text} size="xxl">Heading Typography XXL Font Size</Typography>
 82 |           </div>
 83 |         </Widget>
 84 |       </Grid>
 85 |     </Grid>
 86 |   </React.Fragment>
 87 | );
 88 | 
 89 | const styles = theme => ({
 90 |   dashedBorder: {
 91 |     border: '1px dashed',
 92 |     borderColor: theme.palette.primary.main,
 93 |     padding: theme.spacing.unit * 2,
 94 |     paddingTop: theme.spacing.unit * 4,
 95 |     paddingBottom: theme.spacing.unit * 4,
 96 |     marginTop: theme.spacing.unit,
 97 |   },
 98 |   text: {
 99 |     marginBottom: theme.spacing.unit * 2,
100 |   },
101 | })
102 | 
103 | export default withStyles(styles)(TypographyPage);
104 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/typography/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Typography",
3 |   "version": "0.0.0",
4 |   "main": "Typography.js",
5 |   "private": true
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/users/UserState.js:
--------------------------------------------------------------------------------
 1 | export const initialState = {
 2 |   isLoading: false,
 3 |   hasMore: false,
 4 |   users: [],
 5 |   error: null
 6 | };
 7 | 
 8 | export const REQUEST_USERS = "Users/REQUEST";
 9 | export const RECEIVE_USERS = "Users/RECEIVE";
10 | 
11 | export const requestUsers = () => ({
12 |   type: REQUEST_USERS
13 | });
14 | 
15 | export const receiveUsers = (json) => ({
16 |   type: RECEIVE_USERS,
17 |   users: json.items,
18 |   total: json.total,
19 |   hasMore: json.has_more,
20 | });
21 | 
22 | export const fetchUsers = (page = 1, size = 10) => dispatch => {
23 |   dispatch(requestUsers());
24 |   return fetch(`/share_users?page=${page}&size=${size}`)
25 |     .then(response => response.json())
26 |     .then(json => dispatch(receiveUsers(json)));
27 | };
28 | 
29 | export default function UsersReducer(state = initialState, { type, ...payload }) {
30 |   switch (type) {
31 |     case REQUEST_USERS:
32 |       return {
33 |         ...state,
34 |         isLoading: true
35 |       };
36 |     case RECEIVE_USERS:
37 |       return {
38 |         ...state,
39 |         isLoading: false,
40 |         users: payload.users,
41 |         hasMore: payload.hasMore,
42 |         total: payload.total,
43 |         error: null
44 |       };
45 |     default:
46 |       return state;
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/web/admin/src/pages/users/Users.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Grid } from '@material-ui/core';
 3 | import MUIDataTable from "mui-datatables";
 4 | import { connect } from 'react-redux'
 5 | import PageTitle from '../../components/PageTitle';
 6 | import { fetchUsers } from './UserState'
 7 | 
 8 | 
 9 | class Users extends React.Component {
10 | 
11 |   state = {
12 |     page: 1,
13 |     pageSize: 10,
14 |   };
15 | 
16 |   refetch = () => {
17 |     this.props.dispatch(fetchUsers(this.state.page + 1, this.state.pageSize));
18 |   };
19 | 
20 |   componentDidMount() {
21 |     this.refetch();
22 |     this.timer = setInterval(this.refetch, 5000);
23 |   }
24 | 
25 |   componentWillUnmount() {
26 |     clearInterval(this.timer);
27 |   }
28 | 
29 |   render() {
30 |   	const { users, total } = this.props['users'];
31 |   	const data = users.map(user => [user['uname'], user['avatar_url'], user['uk'], user['last_updated']]);
32 |     const columns = [
33 |     	"昵称",
34 | 			{
35 | 				name: "头像",
36 |         options: {
37 |           customBodyRender: (value, tableMeta, updateValue) => <img alt="头像" width={30} src={value}/>,
38 |         }
39 | 			},
40 | 			"UK",
41 | 			"更新时间"
42 | 		];
43 | 
44 |     const options = {
45 |       count: total,
46 |       serverSide: true,
47 |       page: this.state.page,
48 |       rowsPerPage: this.state.pageSize,
49 |       onTableChange: (action, tableState) => {
50 |         this.setState({
51 |           page: tableState.page,
52 |           pageSize: tableState.rowsPerPage
53 |         });
54 |         setTimeout(() => this.refetch(), 0);
55 |       }
56 |     };
57 | 
58 |   	return (
59 |       <React.Fragment>
60 |         <PageTitle title="分享者" />
61 |         <Grid container spacing={32}>
62 |           <Grid item xs={12}>
63 |             <MUIDataTable
64 |               title="分享者列表"
65 |               data={data}
66 |               columns={columns}
67 |               options={options}
68 |             />
69 |           </Grid>
70 |         </Grid>
71 |       </React.Fragment>
72 |     );
73 | 	}
74 | }
75 | 
76 | 
77 | const mapStateToProps = state => state;
78 | export default connect(mapStateToProps)(Users)


--------------------------------------------------------------------------------
/web/admin/src/pages/users/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Users",
3 |   "version": "0.0.0",
4 |   "main": "Users.js",
5 |   "private": true
6 | }
7 | 


--------------------------------------------------------------------------------
/web/admin/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read http://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit http://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl)
104 |     .then(response => {
105 |       // Ensure service worker exists, and that we really are getting a JS file.
106 |       const contentType = response.headers.get('content-type');
107 |       if (
108 |         response.status === 404 ||
109 |         (contentType != null && contentType.indexOf('javascript') === -1)
110 |       ) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then(registration => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log(
124 |         'No internet connection found. App is running in offline mode.'
125 |       );
126 |     });
127 | }
128 | 
129 | export function unregister() {
130 |   if ('serviceWorker' in navigator) {
131 |     navigator.serviceWorker.ready.then(registration => {
132 |       registration.unregister();
133 |     });
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/web/admin/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import { createStore, applyMiddleware } from 'redux';
 2 | import ReduxThunk from 'redux-thunk'
 3 | 
 4 | import reducers from './reducers';
 5 | 
 6 | const store = createStore(
 7 |   reducers,
 8 |   applyMiddleware(ReduxThunk),
 9 | );
10 | 
11 | export default store;


--------------------------------------------------------------------------------
/web/admin/src/store/reducers.js:
--------------------------------------------------------------------------------
 1 | import { combineReducers } from 'redux';
 2 | 
 3 | import layout from '../components/Layout/LayoutState';
 4 | import login from '../pages/login/LoginState';
 5 | import users from '../pages/users/UserState';
 6 | import files from '../pages/files/FileState';
 7 | 
 8 | export default combineReducers({
 9 |   layout,
10 |   login,
11 |   users,
12 | 	files
13 | });


--------------------------------------------------------------------------------
/web/admin/src/themes/default.js:
--------------------------------------------------------------------------------
  1 | import tinycolor from "tinycolor2";
  2 | 
  3 | const primary = "#536DFE";
  4 | const secondary = "#FF5C93";
  5 | const warning = "#FFC260";
  6 | const success = "#3CD4A0";
  7 | const info = "#9013FE";
  8 | 
  9 | const lightenRate = 7.5;
 10 | const darkenRate = 15;
 11 | 
 12 | export default {
 13 |   palette: {
 14 |     primary: {
 15 |       main: primary,
 16 |       light: tinycolor(primary)
 17 |         .lighten(lightenRate)
 18 |         .toHexString(),
 19 |       dark: tinycolor(primary)
 20 |         .darken(darkenRate)
 21 |         .toHexString()
 22 |     },
 23 |     secondary: {
 24 |       main: secondary,
 25 |       light: tinycolor(secondary)
 26 |         .lighten(lightenRate)
 27 |         .toHexString(),
 28 |       dark: tinycolor(secondary)
 29 |         .darken(darkenRate)
 30 |         .toHexString(),
 31 |       contrastText: "#FFFFFF"
 32 |     },
 33 |     warning: {
 34 |       main: warning,
 35 |       light: tinycolor(warning)
 36 |         .lighten(lightenRate)
 37 |         .toHexString(),
 38 |       dark: tinycolor(warning)
 39 |         .darken(darkenRate)
 40 |         .toHexString()
 41 |     },
 42 |     success: {
 43 |       main: success,
 44 |       light: tinycolor(success)
 45 |         .lighten(lightenRate)
 46 |         .toHexString(),
 47 |       dark: tinycolor(success)
 48 |         .darken(darkenRate)
 49 |         .toHexString()
 50 |     },
 51 |     info: {
 52 |       main: info,
 53 |       light: tinycolor(info)
 54 |         .lighten(lightenRate)
 55 |         .toHexString(),
 56 |       dark: tinycolor(info)
 57 |         .darken(darkenRate)
 58 |         .toHexString()
 59 |     },
 60 |     text: {
 61 |       primary: "#4A4A4A",
 62 |       secondary: "#6E6E6E",
 63 |       hint: "#B9B9B9"
 64 |     },
 65 |     background: {
 66 |       default: "#F6F7FF",
 67 |       light: "#F3F5FF"
 68 |     }
 69 |   },
 70 |   customShadows: {
 71 |     widget:
 72 |       "0px 3px 11px 0px #E8EAFC, 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9A1A",
 73 |     widgetDark:
 74 |       "0px 3px 18px 0px #4558A3B3, 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9A1A",
 75 |     widgetWide:
 76 |       "0px 12px 33px 0px #E8EAFC, 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9A1A"
 77 |   },
 78 |   overrides: {
 79 |     MuiBackdrop: {
 80 |       root: {
 81 |         backgroundColor: "#4A4A4A1A"
 82 |       }
 83 |     },
 84 |     MuiMenu: {
 85 |       paper: {
 86 |         boxShadow:
 87 |           "0px 3px 11px 0px #E8EAFC, 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9A1A"
 88 |       }
 89 |     },
 90 |     MuiSelect: {
 91 |       icon: {
 92 |         color: "#B9B9B9",
 93 |       }
 94 |     },
 95 |     MuiListItem: {
 96 |       button: {
 97 |         '&:hover, &:focus': {
 98 |           backgroundColor: '#F3F5FF',
 99 |         },
100 |       },
101 |       selected: {
102 |         backgroundColor: '#F3F5FF !important',
103 |         '&:focus': {
104 |           backgroundColor: '#F3F5FF',
105 |         },
106 |       }
107 |     },
108 |     MuiTouchRipple: {
109 |       child: {
110 |         backgroundColor: "white"
111 |       }
112 |     },
113 |     MuiTableRow: {
114 |       root: {
115 |         height: 56,
116 |       }
117 |     },
118 |     MuiTableCell: {
119 |       root: {
120 |         borderBottom: '1px solid rgba(224, 224, 224, .5)',
121 |       },
122 |       head: {
123 |         fontSize: '0.95rem',
124 |       },
125 |       body: {
126 |         fontSize: '0.95rem',
127 |       }
128 |     }
129 |   }
130 | };
131 | 


--------------------------------------------------------------------------------
/web/admin/src/themes/index.js:
--------------------------------------------------------------------------------
 1 | import defaultTheme from './default';
 2 | 
 3 | export default {
 4 |   default: defaultTheme
 5 | }
 6 | 
 7 | export const overrides = {
 8 |   typography: {
 9 |     h1: {
10 |       fontSize: '3rem',
11 |     },
12 |     h2: {
13 |       fontSize: '2rem',
14 |     },
15 |     h3: {
16 |       fontSize: '1.64rem',
17 |     },
18 |     h4: {
19 |       fontSize: '1.5rem',
20 |     },
21 |     h5: {
22 |       fontSize: '1.285rem',
23 |     },
24 |     h6: {
25 |       fontSize: '1.142rem',
26 |     }
27 |   }
28 | };


--------------------------------------------------------------------------------