Browse Source

Migrated to React.JS

Dmitry Yu Okunev 2 years ago
parent
commit
f262cdd2de

+ 0 - 1
.meteor/packages

@@ -19,4 +19,3 @@ shell-server@0.2.4            # Server-side component of the `meteor shell` comm
 
 autopublish@1.0.7             # Publish all data to the clients (for prototyping)
 insecure@1.0.7                # Allow all DB writes from clients (for prototyping)
-iron:router

+ 0 - 9
.meteor/versions

@@ -34,14 +34,6 @@ htmljs@1.0.11
 http@1.2.12
 id-map@1.0.9
 insecure@1.0.7
-iron:controller@1.0.12
-iron:core@1.0.11
-iron:dynamic-template@1.0.12
-iron:layout@1.0.12
-iron:location@1.0.11
-iron:middleware-stack@1.1.0
-iron:router@1.1.2
-iron:url@1.1.0
 jquery@1.11.10
 launch-screen@1.1.1
 livedata@1.0.18
@@ -62,7 +54,6 @@ observe-sequence@1.0.16
 ordered-dict@1.0.9
 promise@0.8.9
 random@1.0.10
-reactive-dict@1.1.9
 reactive-var@1.0.11
 reload@1.1.11
 retry@1.0.9

+ 4 - 0
client/main.css

@@ -99,3 +99,7 @@ iframe {
 	top: 45px;
 }
 
+#hello-text {
+	padding: 30px;
+}
+

+ 1 - 26
client/main.html

@@ -5,31 +5,6 @@
 </head>
 
 <body>
+	<div id="render-target"></div>
 </body>
 
-<template name="main">
-	<header>
-		<a href='https://start.mephi.ru/start' target='iframe' onclick='$("#services option:nth-child(1)").prop("selected", true); $("#iframe").attr("src", "https://start.mephi.ru/start"); return false;'><img id='logo' src='/images/mephi_logo_onwhite_32px.png' alt='MEPHI logo' width='32px' height='32px'></a>
-		<nav>
-			{{> Template.dynamic template="services" data=services }}
-		</nav>
-		<div id='auth'>
-			test
-		</div>
-	</header>
-	<iframe name='iframe' id='iframe' src='/start'></iframe>
-</template>
-
-<template name="services">
-	<select id='services'>
-		{{#each this}}
-			{{> service}}
-		{{/each}}
-	</select>
-</template>
-
-<template name="service">
-	<option class='service' data-link='{{link_to}}'>
-		{{name}}
-	</option>
-</template>

+ 0 - 31
client/main.js

@@ -1,31 +0,0 @@
-import { Template } from 'meteor/templating';
-
-import './main.html';
-
-document._services = [
-	{ link_to: 'https://start.mephi.ru/start', name: 'Стартовая страница' },
-	{ link_to: 'https://login.mephi.ru/login?service=https://voip.mephi.ru/login', name: 'IP-телефония' },
-	{ link_to: 'https://login.mephi.ru/login?service=https://cps.mephi.ru', name: 'Система учёта рабочего времени' },
-	{ link_to: 'https://login.mephi.ru/login?service=https://tasks.mephi.ru', name: 'Система «Задачи»' },
-	{ link_to: 'https://login.mephi.ru/login?service=https://chat.mephi.ru', name: 'Чат' },
-	{ link_to: 'https://login.mephi.ru/login?service=https://dc.mephi.ru', name: 'ЦОД' },
-	{ link_to: 'https://login.mephi.ru/login?service=https://cloud.campus.mephi.ru/apps/user_cas/login', name: 'Файловое облако' },
-];
-
-Router.route('/', function () {
-	this.render('main', {
-		data: {services: document._services},
-	})
-
-	Template.main.events({
-		'change select#services': function(event, template) {
-			var link_to = event.target.selectedOptions[0].dataset.link;
-			$('iframe').attr('src', link_to);
-		}
-	});
-
-	Template.main.onRendered(function(){
-		document._main = this;
-	});
-});
-

+ 10 - 0
client/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Meteor } from 'meteor/meteor';
+import { render } from 'react-dom';
+ 
+import { router } from '../imports/startup/client/Router.jsx';
+
+Meteor.startup(() => {
+	render(router(), document.getElementById('render-target'));
+});
+

+ 0 - 7
client/start.html

@@ -1,7 +0,0 @@
-<template name="start">
-	<div id='logo-fullscreen-container'>
-		<br><br>
-		Здравствуйте!<br><br>
-		<img id='logo-fullscreen' src='/images/mephi_logo_large.png' alt='MEPHI logo (large)'>
-	</div>
-</template>

+ 0 - 5
client/start.js

@@ -1,5 +0,0 @@
-
-Router.route('/start', function () {
-	this.render('start');
-});
-

+ 20 - 0
imports/startup/client/Router.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Router, Route } from 'react-router';
+import createBrowserHistory from 'history/createBrowserHistory';
+
+// route components
+import Common from '../../ui/Common.jsx';
+import StartPage from '../../ui/StartPage.jsx';
+import NotFoundPage from '../../ui/NotFoundPage.jsx';
+
+const browserHistory = createBrowserHistory();
+
+export const router = () => (
+	<Router history={browserHistory}>
+		<div>
+			<Route exact path="/" component={Common}/>
+			<Route path="/start" component={StartPage}/>
+			<Route path="*" component={NotFoundPage}/>
+		</div>
+	</Router>
+);

+ 30 - 0
imports/ui/Common.jsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+import Services from './Services.jsx';
+
+export default class Common extends Component {
+
+	getServices() {
+		return Services.get();
+	}
+
+	renderServices() {
+		return <Services/>;
+	}
+
+	render() {
+		return <div id='Common'>
+			<header>
+				<a href='https://start.mephi.ru/start' target='iframe' onClick={function(){$('select#services :nth-child(1)').prop('selected', true); $('iframe').trigger('change');return false}}><img id='logo' src='/images/mephi_logo_onwhite_32px.png' alt='MEPHI logo' width='32px' height='32px'/></a>
+				<nav>
+					{this.renderServices()}
+				</nav>
+				<div id='auth'>
+					test
+				</div>
+			</header>
+			<iframe name='iframe' id='iframe' src='/start'></iframe>
+		</div>;
+	}
+}
+

+ 10 - 0
imports/ui/NotFoundPage.jsx

@@ -0,0 +1,10 @@
+import React, { Component, PropTypes } from 'react';
+
+export default class NotFoundPage extends Component {
+	render() {
+		return	<div id="NotFoundPage">
+				Страница не найдена.
+			</div>;
+	}
+}
+

+ 14 - 0
imports/ui/Service.jsx

@@ -0,0 +1,14 @@
+import React, { Component, PropTypes } from 'react';
+
+export default class Service extends Component {
+	render() {
+		return	<option className='service' data-link={this.props.service.link_to}>
+				{this.props.service.name}
+			</option>;
+	}
+}
+
+Service.propTypes = {
+	service: PropTypes.object.isRequired,
+};
+

+ 26 - 0
imports/ui/Services.jsx

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+
+import Service from './Service.jsx';
+
+export default class Services extends Component {
+	get() {
+		return [
+			{ link_to: 'https://start.mephi.ru/start', name: 'Стартовая страница' },
+			{ link_to: 'https://login.mephi.ru/login?service=https://voip.mephi.ru/login', name: 'IP-телефония' },
+			{ link_to: 'https://login.mephi.ru/login?service=https://cps.mephi.ru', name: 'Система учёта рабочего времени' },
+			{ link_to: 'https://login.mephi.ru/login?service=https://tasks.mephi.ru', name: 'Система «Задачи»' },
+			{ link_to: 'https://login.mephi.ru/login?service=https://chat.mephi.ru', name: 'Чат' },
+			{ link_to: 'https://login.mephi.ru/login?service=https://dc.mephi.ru', name: 'ЦОД' },
+			{ link_to: 'https://login.mephi.ru/login?service=https://cloud.campus.mephi.ru/apps/user_cas/login', name: 'Файловое облако' },
+		];
+	}
+
+	render() {
+		return	<select id='services' onChange={function(ev){var link_to = ev.target.selectedOptions[0].dataset.link;$('iframe').attr('src', link_to)}}>
+				{this.get().map((service) => (
+					<Service key={service.link_to} service={service}/>
+				))}
+			</select>;
+	}
+}
+

+ 14 - 0
imports/ui/StartPage.jsx

@@ -0,0 +1,14 @@
+
+import React, { Component, PropTypes } from 'react';
+
+export default class StartPage extends Component {
+	render() {
+		return	<div id="StartPage">
+				<div id='logo-fullscreen-container'>
+					<div id="hello-text">Здравствуйте!</div>
+					<img id='logo-fullscreen' src='/images/mephi_logo_large.png' alt='MEPHI logo (large)'/>
+				</div>
+			</div>;
+	}
+}
+

+ 5 - 1
package.json

@@ -6,6 +6,10 @@
   },
   "dependencies": {
     "babel-runtime": "^6.20.0",
-    "meteor-node-stubs": "~0.2.4"
+    "history": "^4.6.3",
+    "meteor-node-stubs": "~0.2.4",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-router": "^4.1.2"
   }
 }