feeles-ide
Version:
The hackable and serializable IDE to make learning material
593 lines (501 loc) • 20.6 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ProjectCard = exports.default = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf4 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _typestyle = require("typestyle");
var _moment = _interopRequireDefault(require("moment"));
var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
var _Tabs = require("@material-ui/core/Tabs");
var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
var _Card = _interopRequireDefault(require("@material-ui/core/Card"));
var _CardHeader = _interopRequireDefault(require("@material-ui/core/CardHeader"));
var _CardActions = _interopRequireDefault(require("@material-ui/core/CardActions"));
var _CardContent = _interopRequireDefault(require("@material-ui/core/CardContent"));
var _AddCircle = _interopRequireDefault(require("@material-ui/icons/AddCircle"));
var _OpenInBrowser = _interopRequireDefault(require("@material-ui/icons/OpenInBrowser"));
var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
var _brown = _interopRequireDefault(require("@material-ui/core/colors/brown"));
var _red = _interopRequireDefault(require("@material-ui/core/colors/red"));
var _database = require("../database/");
var _EditableLabel = _interopRequireDefault(require("../jsx/EditableLabel"));
var cn = {
body: (0, _typestyle.style)({
padding: 0
}),
button: (0, _typestyle.style)({
marginLeft: 16
}),
header: (0, _typestyle.style)({
marginLeft: 24
}),
radio: (0, _typestyle.style)({
marginBottom: 16
}),
group: (0, _typestyle.style)({
padding: 24
}),
center: (0, _typestyle.style)({
textAlign: 'center'
}),
container: (0, _typestyle.style)({
margin: 16,
padding: 8,
paddingBottom: 16,
height: '20rem',
overflow: 'scroll',
backgroundColor: _brown.default['50']
}),
card: (0, _typestyle.style)({
marginTop: 16
}),
label: (0, _typestyle.style)({
fontWeight: 600,
marginRight: '1rem'
})
};
var CloneDialog =
/*#__PURE__*/
function (_PureComponent) {
(0, _inherits2.default)(CloneDialog, _PureComponent);
function CloneDialog() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, CloneDialog);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf4.default)(CloneDialog)).call.apply(_getPrototypeOf2, [this].concat(args)));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
error: null,
projects: null,
processing: false,
currentProject: _this.props.project,
// Default show projects same url (origin + pathname)
showAllUrls: false
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleCreate",
/*#__PURE__*/
(0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee() {
var project;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if (!_this.hasSaved) {
_context.next = 2;
break;
}
return _context.abrupt("return");
case 2:
_this.setState({
processing: true
});
_context.prev = 3;
_context.next = 6;
return (0, _database.createProject)(_this.props.files.map(function (item) {
return item.serialize();
}));
case 6:
project = _context.sent;
_context.next = 9;
return _this.props.setProject(project);
case 9:
_context.next = 11;
return _this.refreshState(project);
case 11:
_context.next = 17;
break;
case 13:
_context.prev = 13;
_context.t0 = _context["catch"](3);
console.log(_context.t0);
if (typeof _context.t0 === 'string' && _context.t0 in _this.props.localization.cloneDialog) {
alert(_this.props.localization.cloneDialog[_context.t0]);
}
case 17:
_this.setState({
processing: false
});
case 18:
case "end":
return _context.stop();
}
}
}, _callee, this, [[3, 13]]);
})));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleTitleChange",
/*#__PURE__*/
function () {
var _ref2 = (0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee2(project, title) {
var localization, nextProject;
return _regenerator.default.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
localization = _this.props.localization;
_this.setState({
processing: true
});
_context2.prev = 2;
_context2.next = 5;
return (0, _database.updateProject)(project.id, {
title: title
});
case 5:
nextProject = _context2.sent;
if (!(_this.hasSaved && _this.state.currentProject.id === project.id)) {
_context2.next = 13;
break;
}
_context2.next = 9;
return _this.props.setProject(nextProject);
case 9:
_context2.next = 11;
return _this.refreshState(nextProject);
case 11:
_context2.next = 15;
break;
case 13:
_context2.next = 15;
return _this.refreshState();
case 15:
_context2.next = 20;
break;
case 17:
_context2.prev = 17;
_context2.t0 = _context2["catch"](2);
if (typeof _context2.t0 === 'string') {
alert(localization.cloneDialog[_context2.t0]);
}
case 20:
_this.setState({
processing: false
});
case 21:
case "end":
return _context2.stop();
}
}
}, _callee2, this, [[2, 17]]);
}));
return function (_x, _x2) {
return _ref2.apply(this, arguments);
};
}());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleProcessStart", function () {
_this.setState({
processing: true
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleProcessEnd", function () {
_this.setState({
processing: false
});
_this.refreshState();
});
return _this;
}
(0, _createClass2.default)(CloneDialog, [{
key: "componentDidMount",
value: function componentDidMount() {
this.refreshState();
}
}, {
key: "refreshState",
value: function () {
var _refreshState = (0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee3(nextProject) {
var _this2 = this;
var projects;
return _regenerator.default.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return _database.personalDB.projects.toArray();
case 2:
projects = _context3.sent;
projects.sort(function (a, b) {
return b.updated - a.updated;
});
this.setState({
projects: projects,
currentProject: nextProject || (this.hasSaved ? projects.find(function (item) {
return item.id === _this2.state.currentProject.id;
}) : null)
});
case 5:
case "end":
return _context3.stop();
}
}
}, _callee3, this);
}));
function refreshState(_x3) {
return _refreshState.apply(this, arguments);
}
return refreshState;
}()
}, {
key: "render",
value: function render() {
var _this3 = this;
var _this$props = this.props,
onRequestClose = _this$props.onRequestClose,
localization = _this$props.localization;
var currentProject = this.state.currentProject;
var url = location.origin + location.pathname;
var projects = (this.state.projects || []).filter(function (project) {
return _this3.state.showAllUrls || project.url === url;
});
return _react.default.createElement(_Dialog.default, {
open: true,
onClose: onRequestClose
}, _react.default.createElement(_DialogContent.default, null, _react.default.createElement(_Tabs.Tabs, null, _react.default.createElement(_Tabs.Tab, {
label: localization.cloneDialog.saveTitle
}, _react.default.createElement("h1", {
className: cn.header
}, localization.cloneDialog.saveHeader), _react.default.createElement("div", {
className: cn.container
}, this.hasSaved ? [_react.default.createElement("span", {
key: ""
}, localization.cloneDialog.autoSaved), _react.default.createElement(_Card.default, {
key: "current",
className: cn.card
}, _react.default.createElement(_CardHeader.default, {
title: _react.default.createElement(_EditableLabel.default, {
id: "title",
openImmediately: !currentProject.title,
defaultValue: currentProject.title,
tapTwiceQuickly: localization.common.tapTwiceQuickly,
hintText: localization.cloneDialog.setTitle,
onEditEnd: function onEditEnd(text) {
return _this3.handleTitleChange(currentProject, text);
}
}),
subtitle: new Date(currentProject.updated).toLocaleString()
}))] : _react.default.createElement(_Button.default, {
variant: "contained",
fullWidth: true,
key: "new_project",
className: cn.card,
disabled: this.state.processing,
onClick: this.handleCreate
}, _react.default.createElement(_AddCircle.default, null), localization.cloneDialog.saveInNew))), _react.default.createElement(_Tabs.Tab, {
label: localization.cloneDialog.loadTitle
}, _react.default.createElement("h1", {
className: cn.header
}, localization.cloneDialog.loadHeader), !this.state.projects ? _react.default.createElement("div", {
style: {
textAlign: 'center'
}
}, _react.default.createElement(_CircularProgress.default, {
size: 120
})) : _react.default.createElement("div", {
className: cn.container
}, projects.map(function (item) {
return _react.default.createElement(ProjectCard, {
key: item.id,
project: item,
showURL: _this3.state.showAllUrls,
launchIDE: _this3.props.launchIDE,
processing: _this3.state.processing,
onProcessStart: _this3.handleProcessStart,
onProcessEnd: _this3.handleProcessEnd,
requestTitleChange: _this3.handleTitleChange,
requestProjectSet: _this3.props.setProject,
localization: localization
});
}))))), _react.default.createElement(_DialogActions.default, null, _react.default.createElement(_Button.default, {
variant: "text",
className: cn.button,
onClick: function onClick() {
return _this3.setState(function (prevState) {
return {
showAllUrls: !prevState.showAllUrls
};
});
}
}, localization.menu.showAllUrls), ",", _react.default.createElement(_Button.default, {
variant: "text",
className: cn.button,
onClick: onRequestClose
}, localization.cloneDialog.cancel)));
}
}, {
key: "hasSaved",
get: function get() {
return !!this.state.currentProject;
}
}]);
return CloneDialog;
}(_react.PureComponent);
exports.default = CloneDialog;
(0, _defineProperty2.default)(CloneDialog, "propTypes", {
resolve: _propTypes.default.func.isRequired,
onRequestClose: _propTypes.default.func.isRequired,
files: _propTypes.default.array.isRequired,
localization: _propTypes.default.object.isRequired,
project: _propTypes.default.object,
setProject: _propTypes.default.func.isRequired,
launchIDE: _propTypes.default.func.isRequired
});
var ProjectCard =
/*#__PURE__*/
function (_PureComponent2) {
(0, _inherits2.default)(ProjectCard, _PureComponent2);
function ProjectCard() {
var _getPrototypeOf3;
var _this4;
(0, _classCallCheck2.default)(this, ProjectCard);
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
_this4 = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf3 = (0, _getPrototypeOf4.default)(ProjectCard)).call.apply(_getPrototypeOf3, [this].concat(args)));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this4)), "handleLoad", function () {
return _this4.props.launchIDE(_this4.props.project);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this4)), "handleRemove",
/*#__PURE__*/
(0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee4() {
var _this4$props, project, localization;
return _regenerator.default.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
_this4$props = _this4.props, project = _this4$props.project, localization = _this4$props.localization;
if (confirm(localization.common.cannotBeUndone)) {
_context4.next = 3;
break;
}
return _context4.abrupt("return");
case 3:
_this4.props.onProcessStart();
_context4.prev = 4;
_context4.next = 7;
return (0, _database.deleteProject)(project.id);
case 7:
_context4.next = 9;
return _this4.props.requestProjectSet(null);
case 9:
_context4.next = 14;
break;
case 11:
_context4.prev = 11;
_context4.t0 = _context4["catch"](4);
alert(localization.cloneDialog.failedToRemove);
case 14:
_this4.props.onProcessEnd();
case 15:
case "end":
return _context4.stop();
}
}
}, _callee4, this, [[4, 11]]);
})));
return _this4;
}
(0, _createClass2.default)(ProjectCard, [{
key: "render",
value: function render() {
var _this5 = this;
var _this$props2 = this.props,
localization = _this$props2.localization,
project = _this$props2.project;
var styles = {
button: {
marginLeft: 16
},
card: {
marginTop: 16
},
remove: {
color: _red.default['400']
},
label: {
fontWeight: 600,
marginRight: '1rem'
}
};
return _react.default.createElement(_Card.default, {
key: project.id,
className: styles.card
}, _react.default.createElement(_CardHeader.default, {
title: _react.default.createElement(_EditableLabel.default, {
id: "title",
defaultValue: project.title,
tapTwiceQuickly: localization.common.tapTwiceQuickly,
onEditEnd: function onEditEnd(text) {
return _this5.props.requestTitleChange(project, text);
}
}),
subtitle: [(0, _moment.default)(project.updated).fromNow(), this.props.showURL ? project.url : ''].join(' ')
}), _react.default.createElement(_CardContent.default, null, _react.default.createElement("div", null, _react.default.createElement("span", {
className: styles.label
}, localization.cloneDialog.created), new Date(project.created).toLocaleString()), _react.default.createElement("div", null, _react.default.createElement("span", {
className: styles.label
}, localization.cloneDialog.updated), new Date(project.updated).toLocaleString()), _react.default.createElement("div", null, _react.default.createElement("span", {
className: styles.label
}, localization.cloneDialog.size), "".concat((project.size / 1024 / 1024).toFixed(2), "MB"))), _react.default.createElement(_CardActions.default, null, _react.default.createElement(_Button.default, {
variant: "text",
disabled: this.props.processing,
onClick: this.handleLoad
}, _react.default.createElement(_OpenInBrowser.default, null), localization.cloneDialog.openOnThisTab), _react.default.createElement(_Button.default, {
variant: "text",
disabled: this.props.processing,
onClick: this.handleRemove
}, _react.default.createElement(_Delete.default, {
style: {
color: _red.default['400']
}
}), ' ', _react.default.createElement("span", {
className: styles.remove
}, localization.cloneDialog.remove))));
}
}]);
return ProjectCard;
}(_react.PureComponent);
exports.ProjectCard = ProjectCard;
(0, _defineProperty2.default)(ProjectCard, "propTypes", {
project: _propTypes.default.object.isRequired,
showURL: _propTypes.default.bool.isRequired,
launchIDE: _propTypes.default.func.isRequired,
processing: _propTypes.default.bool.isRequired,
onProcessStart: _propTypes.default.func.isRequired,
onProcessEnd: _propTypes.default.func.isRequired,
requestProjectSet: _propTypes.default.func.isRequired,
requestTitleChange: _propTypes.default.func.isRequired,
localization: _propTypes.default.object.isRequired
});
(0, _defineProperty2.default)(ProjectCard, "defaultProps", {
showURL: false,
processing: false,
onProcessStart: function onProcessStart() {},
onProcessEnd: function onProcessEnd() {},
requestProjectSet: function requestProjectSet() {},
requestTitleChange: function requestTitleChange() {}
});