Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
Merge pull request #825 from zanata/frontend-module
Browse files Browse the repository at this point in the history 
rhbz1222392 - Frontend module for all javascript projects
  • Loading branch information
Patrick Huang committed Jun 1, 2015
2 parents bcd1897 + fba9994 commit 04edf7c
Show file tree
Hide file tree
Showing 35 changed files with 1,623 additions and 646 deletions.
2 changes: 2 additions & 0 deletions frontend/.gitignore
View file
@@ -0,0 +1,2 @@
# npm modules
node_modules/
128 changes: 128 additions & 0 deletions frontend/pom.xml
View file
@@ -0,0 +1,128 @@
<?xml version="1.0"?>
<project xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd" xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.zanata</groupId>
<artifactId>server</artifactId>
<version>3.7.0-SNAPSHOT</version>
</parent>
<artifactId>frontend</artifactId>
<name>frontend</name>
<url>http://maven.apache.org</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<node.version>v0.12.2</node.version>
<npm.version>2.7.6</npm.version>
<web.target>${project.build.directory}/web</web.target>
<bundle.output>${project.build.directory}/build</bundle.output>
<bundle.dest>${bundle.output}/META-INF/resources</bundle.dest>
<node.install.directory>${project.build.directory}</node.install.directory>
<npm.cli.script>${node.install.directory}/node/npm/bin/npm-cli.js</npm.cli.script>

<!-- ==== list of modules to build by npm and node ==== -->
<module.user-profile-page>user-profile-page</module.user-profile-page>
</properties>


<dependencies>

</dependencies>

<build>
<resources>
<resource>
<filtering>false</filtering>
<directory>src/main/web</directory>
<targetPath>${web.target}</targetPath>
</resource>
</resources>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>0.0.23</version>
<configuration>
<workingDirectory>${node.install.directory}</workingDirectory>
</configuration>

<executions>
<execution>
<id>install node and npm</id>
<phase>generate-resources</phase>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>${node.version}</nodeVersion>
<npmVersion>${npm.version}</npmVersion>
</configuration>
</execution>
</executions>
</plugin>

<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.4.0</version>
<configuration>
<environmentVariables>
<PATH>${node.install.directory}/node:${node.install.directory}/node/npm/bin:${env.PATH}</PATH>
</environmentVariables>
<executable>${node.install.directory}/node/node</executable>
</configuration>


<executions>
<execution>
<id>execute npm install for: ${module.user-profile-page}</id>
<phase>process-resources</phase>
<goals>
<goal>exec</goal>
</goals>
<configuration>
<workingDirectory>${web.target}/${module.user-profile-page}</workingDirectory>
<arguments>
<argument>${npm.cli.script}</argument>
<argument>install</argument>
</arguments>
</configuration>
</execution>
<execution>
<id>execute npm run build for: ${module.user-profile-page}</id>
<phase>compile</phase>
<goals>
<goal>exec</goal>
</goals>
<configuration>
<workingDirectory>${web.target}/${module.user-profile-page}</workingDirectory>
<arguments>
<argument>${npm.cli.script}</argument>
<argument>run</argument>
<argument>build</argument>
<argument>bundleDest=${bundle.dest}</argument>
</arguments>
</configuration>
</execution>
</executions>
</plugin>

<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<configuration>
<skip>true</skip>
<failIfNoTests>false</failIfNoTests>
</configuration>
</plugin>

<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-jar-plugin</artifactId>
<configuration>
<classesDirectory>${bundle.output}</classesDirectory>
</configuration>
</plugin>
</plugins>
</build>

</project>
17 changes: 17 additions & 0 deletions frontend/src/main/web/user-profile-page/README.md
View file
@@ -0,0 +1,17 @@
# React Profile

## Setup

`npm install`

## Options

### Production Build

`npm run build`

### Development Server

#### (a HTTP server to serve index.html with webpack produced bundle.js)

`npm start`
14 changes: 14 additions & 0 deletions frontend/src/main/web/user-profile-page/copy.sh
View file
@@ -0,0 +1,14 @@
#!/bin/bash


arg1=$1
arg2=$2

srcDest=${arg1:="$HOME/work/root/server/zanata-war/src/main/webapp/profile/js/"}
deployedDest=${arg2:="/NotBackedUp/tools/jboss-eap/standalone/deployments/zanata.war/profile/js/"}

echo "will copy bundle.min.js to [$srcDest] and [$deployedDest]"

cp bundle.min.js ${srcDest}
cp bundle.min.js ${deployedDest}

36 changes: 36 additions & 0 deletions frontend/src/main/web/user-profile-page/index.html
View file
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html class="new-zanata">
<head lang="en">
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://assets-zanata.rhcloud.com/7/assets/css/style.min.css">
<!--<link type="text/css" rel="stylesheet" href="http://localhost:5000/assets/css/style.css">-->
<title>Zanata Profile</title>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Source+Sans+Pro:300,400,600,700,400italic:latin,latin-ext' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
</head>
<body class="new-zanata zanata">
<div class="g">
<div class="g__item w--1-4 w--1-3-m">

</div>
<div class="g__item w--3-4 w--2-3-m">
<div id="userMatrixRoot" data-base-url="./lib/stores/userStats.json?foo=" class="bg--highest l--pad-v-2"></div>
</div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" ></script>
<script src="bundle.js" ></script>
</body>
</html>
10 changes: 10 additions & 0 deletions frontend/src/main/web/user-profile-page/index.js
View file
@@ -0,0 +1,10 @@
import React from 'react';
import RecentContributions from './lib/components/RecentContributions';
import Configs from './lib/constants/Configs';

var mountNode = document.getElementById('userMatrixRoot'),
baseUrl = mountNode.getAttribute('data-base-url');

Configs.baseUrl = baseUrl;

React.render(<RecentContributions />, mountNode);
44 changes: 44 additions & 0 deletions frontend/src/main/web/user-profile-page/lib/actions/Actions.js
View file
@@ -0,0 +1,44 @@
import Dispatcher from '../dispatchers/UserMatrixDispatcher';
import ActionTypes from '../constants/ActionTypes';


var Actions = {
changeDateRange: function(dateRangeOption) {
Dispatcher.handleViewAction(
{
actionType: ActionTypes.DATE_RANGE_UPDATE,
data: dateRangeOption
}
);
},

changeContentState: function(contentState) {
Dispatcher.handleViewAction(
{
actionType: ActionTypes.CONTENT_STATE_UPDATE,
data: contentState
}
);
},

onDaySelected: function(day) {
Dispatcher.handleViewAction(
{
actionType: ActionTypes.DAY_SELECTED,
data: day
}
);
},

clearSelectedDay: function() {
Dispatcher.handleViewAction(
{
actionType: ActionTypes.DAY_SELECTED,
data: null
}
);
}

};

export default Actions;
106 changes: 106 additions & 0 deletions frontend/src/main/web/user-profile-page/lib/components/CalendarMonthMatrix.jsx
View file
@@ -0,0 +1,106 @@
import React from 'react';
import moment from 'moment-range';
import DayMatrix from './DayMatrix';
import Actions from '../actions/Actions';
import {ContentStates} from '../constants/Options';
import {DateRanges} from '../constants/Options';

var CalendarMonthMatrix = React.createClass({
propTypes: {
matrixData: React.PropTypes.arrayOf(
React.PropTypes.shape(
{
date: React.PropTypes.string.isRequired,
wordCount: React.PropTypes.number.isRequired
})
).isRequired,
selectedDay: React.PropTypes.string,
selectedContentState: React.PropTypes.oneOf(ContentStates).isRequired,
dateRangeOption: React.PropTypes.oneOf(DateRanges).isRequired
},

getDefaultProps: function() {
// this is to make week days locale aware and making sure it align with
// below display
var now = moment(),
weekDays = [],
weekDay;
for (var i = 0; i < 7; i++) {
weekDay = now.weekday(i).format('ddd');
weekDays.push(<th className="cal__heading" key={weekDay}>{weekDay}</th>);
}
return {
weekDays: weekDays
}
},

handleClearSelection: function() {
Actions.clearSelectedDay();
},

render: function() {
var selectedDay = this.props.selectedDay,
cx = React.addons.classSet,
clearClass = this.props.selectedDay ? '' : 'is-hidden',
tableClasses = {
'l--push-bottom-1': true,
'cal': true,
'cal--highlight': this.props.selectedContentState === ContentStates[1],
'cal--success': this.props.selectedContentState === ContentStates[2],
'cal--unsure': this.props.selectedContentState === ContentStates[3]
},
matrixData = this.props.matrixData,
days = [], result = [],
dayColumns, firstDay, heading;

if (matrixData.length == 0) {
return <table><tr><td>Loading</td></tr></table>
}

firstDay = moment(matrixData[0]['date']);
for (var i = firstDay.weekday() - 1; i >= 0; i--) {
// for the first week, we pre-fill missing week days
days.push(<td className="cal__day" key={firstDay.weekday(i).format()}></td>);
}

matrixData.forEach(function(entry) {
var date = entry['date'];

days.push(
<DayMatrix key={date} dateLabel={moment(date).format('Do')} date={date} wordCount={entry['wordCount']} selectedDay={selectedDay} />
);
});

while(days.length) {
dayColumns = days.splice(0, 7);
result.push(<tr className="cal__week" key={this.props.dateRangeOption + '-week' + result.length}> {dayColumns} </tr>);
}

heading = (
<div className="l--push-bottom-half g">
<div className="g__item w--1-2">
<h3 className="epsilon txt--uppercase">{this.props.dateRangeOption}'s Activity</h3>
</div>
<div className="g__item w--1-2 txt--align-right">
<p className={clearClass}><button className="button--link" onClick={this.handleClearSelection}>Clear selection</button></p>
</div>
</div>
);

return (
<div>
{heading}
<table className={cx(tableClasses)}>
<thead className="cal__head">
<tr>{this.props.weekDays}</tr>
</thead>
<tbody>
{result}
</tbody>
</table>
</div>
);
}
});

export default CalendarMonthMatrix;
31 changes: 31 additions & 0 deletions frontend/src/main/web/user-profile-page/lib/components/CalendarPeriodHeading.jsx
View file
@@ -0,0 +1,31 @@
import React from 'react';
import moment from 'moment';
import dateUtils from '../utils/DateHelper'

var CalendarPeriodHeading = React.createClass(
{
render: function() {
var stdFmt = dateUtils['dateFormat'],
dateDisplayFmt = 'DD MMM, YYYY (dddd)',
dateRangeDisplayFmt = 'DD MMM, YYYY',
period;

if (this.props.selectedDay) {
period = moment(this.props.selectedDay, stdFmt).format(dateDisplayFmt);
} else {
period = moment(this.props.fromDate, stdFmt).format(dateRangeDisplayFmt)
+ ' … '
+ moment(this.props.toDate, stdFmt).format(dateRangeDisplayFmt)
+ ' (' + this.props.dateRange + ')';
}
return (
<div className='l--push-bottom-half'>
<h3 className='epsilon txt--uppercase'>Activity Details</h3>
<p className="txt--understated">{period}</p>
</div>
)
}
}
);

export default CalendarPeriodHeading;

0 comments on commit 04edf7c

Please sign in to comment.