Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 

403 řádky
24 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <meta name="description" content="Start your development with a Dashboard for Bootstrap 4.">
  7. <meta name="author" content="Creative Tim">
  8. <title>Argon Dashboard - Free Dashboard for Bootstrap 4</title>
  9. <!-- Favicon -->
  10. <link href="../public/img/brand/favicon.png" rel="icon" type="image/png">
  11. <!-- Fonts -->
  12. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
  13. <!-- Icons -->
  14. <link href="../public/vendor/nucleo/css/nucleo.css" rel="stylesheet">
  15. <link href="../public/vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
  16. <!-- Argon CSS -->
  17. <link type="text/css" href="../public/css/argon.css?v=1.0.0" rel="stylesheet">
  18. </head>
  19. <body>
  20. <!-- Sidenav -->
  21. <nav class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-white" id="sidenav-main">
  22. <div class="container-fluid">
  23. <!-- Toggler -->
  24. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidenav-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle navigation">
  25. <span class="navbar-toggler-icon"></span>
  26. </button>
  27. <!-- Brand -->
  28. <a class="navbar-brand pt-0" href="../index.html">
  29. <img src="../public/img/brand/blue.png" class="navbar-brand-img" alt="...">
  30. </a>
  31. <!-- User -->
  32. <ul class="nav align-items-center d-md-none">
  33. <li class="nav-item dropdown">
  34. <a class="nav-link nav-link-icon" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  35. <i class="ni ni-bell-55"></i>
  36. </a>
  37. <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" aria-labelledby="navbar-default_dropdown_1">
  38. <a class="dropdown-item" href="#">Action</a>
  39. <a class="dropdown-item" href="#">Another action</a>
  40. <div class="dropdown-divider"></div>
  41. <a class="dropdown-item" href="#">Something else here</a>
  42. </div>
  43. </li>
  44. <li class="nav-item dropdown">
  45. <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  46. <div class="media align-items-center">
  47. <span class="avatar avatar-sm rounded-circle">
  48. <img alt="Image placeholder" src="../public/img/theme/team-1-800x800.jpg">
  49. </span>
  50. </div>
  51. </a>
  52. <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right">
  53. <div class=" dropdown-header noti-title">
  54. <h6 class="text-overflow m-0">Welcome!</h6>
  55. </div>
  56. <a href="../examples/profile.html" class="dropdown-item">
  57. <i class="ni ni-single-02"></i>
  58. <span>My profile</span>
  59. </a>
  60. <a href="../examples/profile.html" class="dropdown-item">
  61. <i class="ni ni-settings-gear-65"></i>
  62. <span>Settings</span>
  63. </a>
  64. <a href="../examples/profile.html" class="dropdown-item">
  65. <i class="ni ni-calendar-grid-58"></i>
  66. <span>Activity</span>
  67. </a>
  68. <a href="../examples/profile.html" class="dropdown-item">
  69. <i class="ni ni-support-16"></i>
  70. <span>Support</span>
  71. </a>
  72. <div class="dropdown-divider"></div>
  73. <a href="#!" class="dropdown-item">
  74. <i class="ni ni-user-run"></i>
  75. <span>Logout</span>
  76. </a>
  77. </div>
  78. </li>
  79. </ul>
  80. <!-- Collapse -->
  81. <div class="collapse navbar-collapse" id="sidenav-collapse-main">
  82. <!-- Collapse header -->
  83. <div class="navbar-collapse-header d-md-none">
  84. <div class="row">
  85. <div class="col-6 collapse-brand">
  86. <a href="../index.html">
  87. <img src="../public/img/brand/blue.png">
  88. </a>
  89. </div>
  90. <div class="col-6 collapse-close">
  91. <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#sidenav-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle sidenav">
  92. <span></span>
  93. <span></span>
  94. </button>
  95. </div>
  96. </div>
  97. </div>
  98. <!-- Form -->
  99. <form class="mt-4 mb-3 d-md-none">
  100. <div class="input-group input-group-rounded input-group-merge">
  101. <input type="search" class="form-control form-control-rounded form-control-prepended" placeholder="Search" aria-label="Search">
  102. <div class="input-group-prepend">
  103. <div class="input-group-text">
  104. <span class="fa fa-search"></span>
  105. </div>
  106. </div>
  107. </div>
  108. </form>
  109. <!-- Navigation -->
  110. <ul class="navbar-nav">
  111. <li class="nav-item">
  112. <a class="nav-link" href="https://argon-dashboard-nodejs.creative-tim.com/">
  113. <i class="ni ni-tv-2 text-primary"></i> Dashboard
  114. </a>
  115. </li>
  116. <li class="nav-item">
  117. <a class="nav-link" href="https://argon-dashboard-nodejs.creative-tim.com/icons">
  118. <i class="ni ni-planet text-blue"></i> Icons
  119. </a>
  120. </li>
  121. <li class="nav-item">
  122. <a class="nav-link" href="https://argon-dashboard-nodejs.creative-tim.com/maps">
  123. <i class="ni ni-pin-3 text-orange"></i> Maps
  124. </a>
  125. </li>
  126. <li class="nav-item">
  127. <a class="nav-link" href="https://argon-dashboard-nodejs.creative-tim.com/profile">
  128. <i class="ni ni-single-02 text-yellow"></i> User profile
  129. </a>
  130. </li>
  131. <li class="nav-item">
  132. <a class="nav-link" href="https://argon-dashboard-nodejs.creative-tim.com/tables">
  133. <i class="ni ni-bullet-list-67 text-red"></i> Tables
  134. </a>
  135. </li>
  136. <li class="nav-item">
  137. <a class="nav-link" href="https://argon-dashboard-nodejs.creative-tim.com/login">
  138. <i class="ni ni-key-25 text-info"></i> Login
  139. </a>
  140. </li>
  141. <li class="nav-item">
  142. <a class="nav-link" href="https://argon-dashboard-nodejs.creative-tim.com/register">
  143. <i class="ni ni-circle-08 text-pink"></i> Register
  144. </a>
  145. </li>
  146. </ul>
  147. <!-- Divider -->
  148. <hr class="my-3">
  149. <!-- Heading -->
  150. <h6 class="navbar-heading text-muted">Documentation</h6>
  151. <!-- Navigation -->
  152. <ul class="navbar-nav mb-md-3">
  153. <li class="nav-item">
  154. <a class="nav-link" href="https://argon-dashboard-nodejs.creative-tim.com/docs/getting-started/overview">
  155. <i class="ni ni-spaceship"></i> Getting started
  156. </a>
  157. </li>
  158. <li class="nav-item">
  159. <a class="nav-link" href="https://argon-dashboard-nodejs.creative-tim.com/docs/foundation/colors">
  160. <i class="ni ni-palette"></i> Foundation
  161. </a>
  162. </li>
  163. <li class="nav-item">
  164. <a class="nav-link" href="https://argon-dashboard-nodejs.creative-tim.com/docs/components/alerts">
  165. <i class="ni ni-ui-04"></i> Components
  166. </a>
  167. </li>
  168. </ul>
  169. </div>
  170. </div>
  171. </nav>
  172. <!-- Main content -->
  173. <div class="main-content">
  174. <!-- Top navbar -->
  175. <nav class="navbar navbar-top navbar-expand-md navbar-dark" id="navbar-main">
  176. <div class="container-fluid">
  177. <!-- Brand -->
  178. <a class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block" href="https://argon-dashboard-nodejs.creative-tim.com/docs/getting-started/overview">Documentation</a>
  179. <!-- Form -->
  180. <form class="navbar-search navbar-search-dark form-inline mr-3 d-none d-md-flex ml-lg-auto">
  181. <div class="form-group mb-0">
  182. <div class="input-group input-group-alternative">
  183. <div class="input-group-prepend">
  184. <span class="input-group-text"><i class="fas fa-search"></i></span>
  185. </div>
  186. <input class="form-control" placeholder="Search" type="text">
  187. </div>
  188. </div>
  189. </form>
  190. <!-- User -->
  191. <ul class="navbar-nav align-items-center d-none d-md-flex">
  192. <li class="nav-item dropdown">
  193. <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  194. <div class="media align-items-center">
  195. <span class="avatar avatar-sm rounded-circle">
  196. <img alt="Image placeholder" src="../public/img/theme/team-4-800x800.jpg">
  197. </span>
  198. <div class="media-body ml-2 d-none d-lg-block">
  199. <span class="mb-0 text-sm font-weight-bold">Jessica Jones</span>
  200. </div>
  201. </div>
  202. </a>
  203. <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right">
  204. <div class=" dropdown-header noti-title">
  205. <h6 class="text-overflow m-0">Welcome!</h6>
  206. </div>
  207. <a href="../examples/profile.html" class="dropdown-item">
  208. <i class="ni ni-single-02"></i>
  209. <span>My profile</span>
  210. </a>
  211. <a href="../examples/profile.html" class="dropdown-item">
  212. <i class="ni ni-settings-gear-65"></i>
  213. <span>Settings</span>
  214. </a>
  215. <a href="../examples/profile.html" class="dropdown-item">
  216. <i class="ni ni-calendar-grid-58"></i>
  217. <span>Activity</span>
  218. </a>
  219. <a href="../examples/profile.html" class="dropdown-item">
  220. <i class="ni ni-support-16"></i>
  221. <span>Support</span>
  222. </a>
  223. <div class="dropdown-divider"></div>
  224. <a href="#!" class="dropdown-item">
  225. <i class="ni ni-user-run"></i>
  226. <span>Logout</span>
  227. </a>
  228. </div>
  229. </li>
  230. </ul>
  231. </div>
  232. </nav>
  233. <!-- Header -->
  234. <div class="header bg-gradient-primary pb-8 pt-5 pt-lg-8 d-flex align-items-center">
  235. <!-- Header container -->
  236. <div class="container-fluid">
  237. <div class="row justify-content-center">
  238. <div class="col-lg-6 col-md-10 text-center">
  239. <h1 class="display-2 text-white">Documentation <small>v1.0.0</small></h1>
  240. <p class="text-white mt-0 mb-5">We are constantly doing updates on the product and documentation, so please check the online version.</p>
  241. </div>
  242. </div>
  243. </div>
  244. </div>
  245. <!-- Page content -->
  246. <div class="container-fluid mt--7">
  247. <div class="row justify-content-center">
  248. <div class="col-lg-10">
  249. <div class="card p-5">
  250. <div class="mume markdown-preview">
  251. <h2 class="mume-header" id="installation">Installation</h2>
  252. <ol>
  253. <li>You need <code>Node.js (at least 10.x version)</code> installed on your machine. If you don't have it, you should install it</li>
  254. <li><a href="https://github.com/express-argon/">Clone project from github</a> or <a href="https://github.com/node-argon-archive/">download an archive</a></li>
  255. <li><code>cd</code> to your downloaded Argon app</li>
  256. <li>Install necessary dependencies:</li>
  257. <ul>
  258. <li><strong>Via node <code>npm</code> package manager</strong> - Run <code>npm install</code> on the project root</li>
  259. <li><strong>Via node <code>yarn</code> package manager</strong> - Run <code>yarn install</code> on the project root</li>
  260. </ul>
  261. </ol>
  262. <h2 class="mume-header" id="configuration-for-posgresql-database-and-redis-data-structure-store">Configuration for PostgreSQL database and Redis data structure store</h2>
  263. <h5 class="mume-header" id="via-docker">Via Docker</h5>
  264. <ol>
  265. <li>Install <strong>Docker</strong> on your machine</li>
  266. <li>Run <code>docker-compose up -d</code> in a terminal on the project root. This will start 3 containers:</li>
  267. <ul>
  268. <li>database(PostgreSQL) container;</li>
  269. <li>redis container - required for session management;</li>
  270. <li>haproxy container - required only for a staging/production setup;</li>
  271. </ul>
  272. </ol>
  273. <h5 class="mume-header" id="via-another-choosen-solution">Via another chosen solution.</h5>
  274. <ol>
  275. <li>Install your <strong>PostgreSQL</strong> database</li>
  276. <li>Install your <strong>Redis</strong> server</li>
  277. <li>Change connection configuration, from your root <code>cd</code> to <code>env-files</code> folder and change the following configurations with your own:</li>
  278. </ol>
  279. <ul>
  280. <li><strong>For Posgresql connection:</strong></li>
  281. </ul>
  282. <pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token constant">DATABASE_URL</span><span class="token operator">=</span>http<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">127.0</span><span class="token number">.0</span><span class="token number">.1</span><span class="token punctuation">:</span><span class="token number">5432</span>
  283. <span class="token constant">DATABASE_NAME</span><span class="token operator">=</span>creativeTim
  284. <span class="token constant">DATABASE_USER</span><span class="token operator">=</span>creativeTim
  285. <span class="token constant">DATABASE_PASSWORD</span><span class="token operator">=</span>creativeTim
  286. </pre>
  287. <ul>
  288. <li><strong>For Redis connection:</strong></li>
  289. </ul>
  290. <pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token constant">REDIS_HOST</span><span class="token operator">=</span>localhost
  291. <span class="token constant">REDIS_PORT</span><span class="token operator">=</span><span class="token number">6379</span>
  292. </pre>
  293. <h2 class="mume-header" id="migrate-database-tables">Migrations and Seeds</h2>
  294. <ol>
  295. <li>For database tables structure, in project root run: <code>npm knex migrate:latest</code> or <code>yarn knex migrate:latest</code> if you are using <code>yarn</code> as the default package manager</li>
  296. <li>To create a default user run: <code>npm knex seed:run</code> or <code>yarn knex seed:run</code> if you are using <code>yarn</code> as the default package manager</li>
  297. </ol>
  298. <h2>Run the application</h2>
  299. <ol>
  300. <li>For starting the application, the following script (defined in `package.json` under `scripts`) must be called</li>
  301. <ul>
  302. <li>via <strong>npm</strong>: <code>npm run start</code> or <code>npm run dev</code> for starting the development environment, which has livereload enabled;</li>
  303. <li>via <strong>yarn</strong>: <code>yarn start</code> or <code>yarn dev</code> for starting the development environment, which has livereload enabled</li>
  304. </ul>
  305. </ol>
  306. <h2 class="mume-header" id="usage">Usage</h2>
  307. <p>Register a user or login using <strong><a href="mailto:admin@argon.com">admin@argon.com</a></strong> and <strong>secret</strong> and start testing the preset (make sure to run the migrations and seeders for these credentials to be available).</p>
  308. <p>Besides the dashboard and the auth pages this preset also has an edit profile page. Keep in mind that all the features can be viewed once you login using the credentials provided above or by registering your own user.</p>
  309. <h2 class="mume-header" id="features">Features</h2>
  310. <p>For each feature code <code>cd</code> into <code>features</code> folder, and you will found a folder for each feature, mostly each folder contain:</p>
  311. <ul>
  312. <li>A <code>routes.js</code> file that usually contains <code>GET</code> and <code>POST</code> requests, for eg the profile router looks like this:</li>
  313. </ul>
  314. <pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword">const</span> <span class="token punctuation">{</span> wrap <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'async-middleware'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  315. <span class="token keyword">const</span> requestBodyValidation <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./commands/verify-request-body'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  316. <span class="token keyword">const</span> updateUserInfo <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./commands/update-user-info'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  317. <span class="token keyword">const</span> <span class="token punctuation">{</span> loadPage <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./commands/profile'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  318. module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span>router<span class="token punctuation">,</span> middlewares <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  319. router<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'/profile'</span><span class="token punctuation">,</span> middlewares<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>middleware <span class="token operator">=&gt;</span> <span class="token function">wrap</span><span class="token punctuation">(</span>middleware<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">wrap</span><span class="token punctuation">(</span>loadPage<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  320. router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/update-profile-info'</span><span class="token punctuation">,</span> <span class="token function">wrap</span><span class="token punctuation">(</span>requestBodyValidation<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">wrap</span><span class="token punctuation">(</span>updateUserInfo<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  321. <span class="token keyword">return</span> router<span class="token punctuation">;</span>
  322. <span class="token punctuation">}</span><span class="token punctuation">;</span>
  323. </pre>
  324. <ul>
  325. <li>A <code>repository.js</code> file that contains feature database queries</li>
  326. <li>A <code>commands</code> folder where you can find the all feature functionality functions, for eg the one for login template rendering looks like this:</li>
  327. </ul>
  328. <pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword">function</span> <span class="token function">loadPage</span><span class="token punctuation">(</span>req<span class="token punctuation">,</span> res<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  329. <span class="token function">debug</span><span class="token punctuation">(</span><span class="token string">'login:servePage'</span><span class="token punctuation">,</span> req<span class="token punctuation">,</span> res<span class="token punctuation">)</span><span class="token punctuation">;</span>
  330. res<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token string">'pages/login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  331. <span class="token punctuation">}</span>
  332. </pre>
  333. <ul>
  334. <li>A <code>constants.js</code> file, to store all your static variables, for eg:</li>
  335. </ul>
  336. <pre data-role="codeBlock" data-info="" class="language-"><code>const USERNAME_PASSWORD_COMBINATION_ERROR = 'These credentials do not match our records.';
  337. const INTERNAL_SERVER_ERROR = 'Something went wrong! Please try again.';
  338. </code>
  339. </pre>
  340. <p>All feature routes are mounted in <code>routes/index.js</code> from the project root.</p>
  341. <h2 class="mume-header" id="for-the-front-end-side">For the Front-end side:</h2>
  342. <h5 class="mume-header" id="templates">Templates</h5>
  343. <ul>
  344. <li>You can find all the templates in <code>views</code> folder where you will find:</li>
  345. </ul>
  346. <ol>
  347. <li>The <code>layout.ejs</code> file, the main template layout.</li>
  348. <li>A <code>pages</code> folder with all the pages templates</li>
  349. <li>A <code>partials</code> folder with the common components for eg. header, footer, sidebar</li>
  350. </ol>
  351. <h2 class="mume-header" id="change-log">Change log</h2>
  352. <p>Please see the <a href="../changelog.md">changelog</a> for more information on what has changed recently.</p>
  353. <h2 class="mume-header" id="credits">Credits</h2>
  354. <ul>
  355. <li><a href="https://creative-tim.com/">Creative Tim</a></li>
  356. <li><a href="https://udevoffice.com/">Under Development Office</a></li>
  357. </ul>
  358. <h2 class="mume-header" id="license">License</h2>
  359. <p><a href="https://github.com/laravel-frontend-presets/argon/blob/master/license.md">MIT License</a>.</p>
  360. <h2 class="mume-header" id="screen-shots">Screen shots</h2>
  361. <p><img style="max-width: 100%" src="../screens/Login.png" alt="Argon Login"></p>
  362. <p><img style="max-width: 100%" src="../screens/Dashboard.png" alt="Argon Dashboard"></p>
  363. <p><img style="max-width: 100%" src="../screens/Users.png" alt="Argon Users"></p>
  364. <p><img style="max-width: 100%" src="../screens/Profile.png" alt="Argon Profile"></p>
  365. </div>
  366. </div>
  367. </div>
  368. </div>
  369. <!-- Footer -->
  370. </div>
  371. </div>
  372. <!-- Argon Scripts -->
  373. <!-- Core -->
  374. <script src="../public/vendor/jquery/dist/jquery.min.js"></script>
  375. <script src="../public/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  376. <!-- Argon JS -->
  377. <script src="../public/js/argon.js?v=1.0.0"></script>
  378. </body>
  379. </html>