Skip to content

Commit

Permalink
suport reactjs, add superagent.js and change to .html from .php
Browse files Browse the repository at this point in the history
  • Loading branch information
bokotomo committed Dec 17, 2016
1 parent a6e24f7 commit ea76af4
Show file tree
Hide file tree
Showing 8 changed files with 270 additions and 53 deletions.
5 changes: 5 additions & 0 deletions README.md
Expand Up @@ -2,6 +2,8 @@
Httpリクエストをテストするためのツール。
post/get送信をアプリと機能管理できます。
サーバに入れるだけで、httpリクエストをテストできます。
・自分のサーバでテストしたい。(外部であると不安)
・デザインされたツールを使いたい。

## DemoImage
<img src="https://tomo.syo.tokyo/openimg/httptester_MainPageConfilm6.jpg" width="47%">
Expand All @@ -13,3 +15,6 @@ post/get送信をアプリと機能管理できます。
## Using
PHP
SQLite3
React.js
superagent.js
CSS3
20 changes: 13 additions & 7 deletions design.css
Expand Up @@ -11,6 +11,7 @@ body {

/* default */
input:focus{outline:none;}
button:focus{outline:none;}
textarea:focus{outline:none;}
textarea{resize:none;}
:placeholder-shown {color: #c4cbd0;font-weight: 400;}
Expand All @@ -29,15 +30,15 @@ textarea{resize:none;}
height:50px;line-height:50px;border-bottom: 1px solid #E8E8E8;position: relative;
}
.header-title{
position: absolute;width:100%;color: #5C9EE9;font-size:20px;text-align: center;font-weight: 400;
position: absolute;width:165px;color: #5C9EE9;font-size:20px;text-align: center;font-weight: 400;
}
.header-newapp-button{
position: absolute;right:10px; background: #36A2F9;font-size: 12px;color:#fff;border-radius: 20px;text-align: center;width:80px;height:30px;line-height:30px;margin-top: 10px;cursor: pointer;
}

/* sideBar */
#sidebar{
position: absolute;background: #4A586A;width:165px;height:800px;z-index: 3;box-shadow: -2px 2px 3px 0px rgba(0, 0, 0, 0.24) inset;font-size: 14px;
position: absolute;background: #4A586A;width:165px;height:100%;z-index: 3;box-shadow: -2px 2px 3px 0px rgba(0, 0, 0, 0.24) inset;font-size: 14px;
}
.sidebar-tag{
margin-top: 10px;color:#fff;padding-left:5px;border-radius: 0px 40px 40px 0px / 0px 40px 40px 0px;width:155px;height:35px;line-height:35px;box-sizing: border-box;font-weight: 300;cursor: pointer;
Expand All @@ -52,15 +53,20 @@ textarea{resize:none;}
background: rgba(217, 235, 240, 0.29);
}

/* sideBarRight */
#sidebar-right{
position: absolute;right:0;width: 240px;height:100%;border-left:1px solid #d8d8d8;background: #fff;z-index: 2;padding:10px;box-sizing: border-box;
}

/* contens */
#contens{
position: absolute;background: #F1F4F5;width: 100%;height:800px;z-index: 2;
position: absolute;background: #F1F4F5;width: 100%;height:100%;z-index: 2;
}
.contens-in{
padding:10px 0px 10px 165px;
padding:12px 240px 10px 165px;
}
.contens-sendarea-padding{
padding:0px 10px;
padding:0px 12px;
}
.contens-input-text{
border:1px solid #DEE3E5;height:35px;line-height:35px;font-size:16px;width: 100%;box-sizing: border-box;padding:0px 8px;
Expand All @@ -86,10 +92,10 @@ textarea{resize:none;}
.contens-input-saveinput{
background:none;width:140px;border:1px solid #DEE3E5;border-radius: 50px;height:28px;line-height:18px;font-size:12px;float:right;margin-left: 5px;padding-left: 10px;
}
.contens-logarea{
#contens-logarea{
background: #fff;position: fixed;bottom: 0;width: 100%;border-top: 1px solid #B4BCC1;
}
.contens-logarea-textarea{
#contens-logarea-textarea{
border:none;height:180px;font-size:16px;width: 100%;box-sizing: border-box;padding:10px 10px;
}

Expand Down
3 changes: 3 additions & 0 deletions http.php
@@ -1,4 +1,7 @@
<?php
namespace HttpTester;

use HttpTester;

class HttpSendProvider
{
Expand Down
20 changes: 20 additions & 0 deletions httptester.php
@@ -0,0 +1,20 @@
<?php
if(!empty($_POST["url"])){
$url = htmlspecialchars($_POST["url"]);
}else{
$url="";
}
if(!empty($_POST["text"])){
$text = htmlspecialchars($_POST["text"]);
}else{
$text="";
}
$responseData = [
"data"=>"ok",
"status"=>"true",
"sendData"=>[
"url"=>$url,
"text"=>$text,
],
];
echo json_encode($responseData);
150 changes: 150 additions & 0 deletions index.html
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HttpTester</title>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel='stylesheet' type='text/css' href='design.css?id=4'>
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="./js/superagent.js"></script>
<script type="text/jsx">
var request = window.superagent;
var serverUrl = "https://tomo.syo.tokyo/httptester/httptester.php";

var NewAppButton = React.createClass({
onClick(e) {
alert("addNewAPP");
},
render: function(){
return (
<div onClick={this.onClick} className="header-newapp-button">New App</div>
);
}
});

var Header = React.createClass({
render: function() {
return (
<header id="header">
<h1 className="header-title">HTTPTESTER</h1>
<NewAppButton />
</header>
);
}
});

var SideBar = React.createClass({
render: function() {
return (
<div id="sidebar">
<div className="sidebar-tag sidebar-tag-on">Default</div>
<div className="sidebar-tag-title">RequestList</div>
<div className="sidebar-tag sidebar-tag-on">Empty</div>
<div className="sidebar-tag sidebar-tag-off">test</div>
</div>
);
}
});

var SideBarRight = React.createClass({
render: function() {
return (
<div id="sidebar-right">user's Log and image</div>
);
}
});

var SendPostButton = React.createClass({
onClick(e) {
sendHttpRequest("POST", serverUrl);
},
render: function(){
return (
<p><button onClick={this.onClick} className="contens-input-sendbutton">POST</button></p>
);
}
});

var SendGetButton = React.createClass({
onClick(e) {
sendHttpRequest("GET", serverUrl);
},
render: function(){
return (
<p><button onClick={this.onClick} className="contens-input-sendbutton contens-input-sendbutton-marginleft">GET</button></p>
);
}
});

var Content = React.createClass({
render: function() {
return (
<div id="contens">
<div className="contens-in">
<div className="contens-sendarea-padding">
<div className="contens-sendarea">
<p><input type="text" name="url" className="contens-input-text" placeholder="URL" /></p>
<p><textarea type="text" name="text" className="contens-input-textarea" placeholder="name=tomo&age=23"></textarea></p>
<div className="contens-input-area">
<SendPostButton />
<SendGetButton />
<p><button className="contens-input-savebutton">SAVE</button></p>
<p><input type="text" placeholder="save RequestName" className="contens-input-saveinput" /></p>
<div className="clear-fix"></div>
</div>
</div>
</div>

<div id="contens-logarea">
<textarea type="text" name="text" id="contens-logarea-textarea"></textarea>
</div>
</div>
</div>
);
}
});

var Page = React.createClass({
render: function() {
return (
<div id="page">
<Header />
<SideBar />
<Content />
<SideBarRight />
</div>
);
}
});
React.render(<Page />, document.getElementById('react-httptester'));

function sendHttpRequest(type, serverUrl){
if(type == "POST"){
request
.post(serverUrl)
.end(function(err, res){
console.log(res);
var elements = document.getElementById("contens-logarea-textarea");
elements.innerHTML = res.text;
});
}else if(type == "GET"){
request
.get(serverUrl)
.end(function(err, res){
console.log(res);
var elements = document.getElementById("contens-logarea-textarea");
elements.innerHTML = res.text;
});
}else{
alert("miss sendType")
}
}
</script>
</head>
<body>
<div id="react-httptester"></div>
</body>
</html>

0 comments on commit ea76af4

Please sign in to comment.